url到渲染页面过程:
1、DNS解析
DNS也是一个网络协议,把域名变成IP地址,获得目标地址, 建立TCP连接
它从输入的时候 呢 是先找 历史书签和浏览器缓存 如果没有就找本地的host文件 如果没有就会DNS解析
TCP
HTTP/SSL
响应解析(SPA,SSR服务端渲染)
浏览器渲染
优化:
网址把用到的域名先用dns解析一下
vue 首屏加载优化,之前我已经优化四个点了,但是还是觉得有点慢1:路由懒加载
2:组件按需引入
3:gzip压缩
4:使用CDN加载资源
网络:DNS、CDN、图片(雪碧图、base64、图片懒加载)
缓存:cdn缓存、浏览器缓存、本地缓存(localstorage、sessionStorage、cookie、indexDB)
渲染:白屏问题(骨架屏、资源预加载、懒加载)
webpack:
速度:babel-loader的cacheDirectory缓存、HMR、optimization.splitChunks、DLL、查找时间
体积:压缩
同构就是前后端执行相同的一套代码
强缓存就是 当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制,具体表现为: respone header 的cache-control,常见的设置是max-age public private no-cache no-store 。
协商缓存就是 就是给资源设置个过期时间
客户端每次请求资源时都会看是否过期;只有在过期才会去询问服务器
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘
url->dns解析域名为ip->建立tcp链接发起http请求-》http强/协商缓存-》浏览器渲染响应报文(两种spa,同构