常见的前端优化方案

url到渲染页面过程：
1、DNS解析
DNS也是一个网络协议，把域名变成IP地址，获得目标地址， 建立TCP连接
它从输入的时候 呢 是先找 历史书签和浏览器缓存 如果没有就找本地的host文件 如果没有就会DNS解析
TCP
HTTP/SSL
响应解析（SPA，SSR服务端渲染）
浏览器渲染
优化：
网址把用到的域名先用dns解析一下

预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验 不会 DNS预解析可以提升页面速度 分片： 慢启动，让网络包的大小逐渐匹配网速 处理大数据的场景下，借鉴tcp这个优化方法

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,同构