优化网页加载速度 / 前端性能优化
前端性能优化
思路：分析一个页面从输入 URL 到页面加载显示完成的所有步骤，采用分治法逐步优化。
1.优化DNS查询
减少域名：尽量把所有的资源放在一个域名下。一个域名同时可以发4（IE8）或8个请求（Chrome）。请求文件少，用1个域名，文件多用多个域名。与3权衡。
2.优化TCP协议
- TCP连接复用，使用keep-alive：连接回复加上请求头：keep-alive。第一次请求不断开，第二次请求复用。
- 使用http 2.0版本：多路复用，连接复用率会更高
3. 优化发送HTTP请求
- 合并JS或CSS文件
- inline image：使用data:url scheme来内连图片
- 减小cookie体积，每个请求都会附带cookie，所以不要滥用cookie。
- 合理使用CasheControl代替发送HTTP请求
- 同时发送多个请求（浏览器自带）IE8可以同时请求下载4个的css文件，Chrome可以同时请求下载8个 。
4.优化接受响应
- 设置Etags：浏览器重复与请求服务器一样的文件，ETag响应304。
- Gzip压缩大文件 使用macos gzip，
npm server gzipgzip 文件名
其响应头为Content-Encodinging：gzip，先压缩接收到再解压缩。缺点：耗费浏览器CPU，权衡
5.优化DOCTYPE
- 不能不写，不能写错
6.优化CSS、JS请求
- 使用CDN：用CDN请求静态资源同时可以增大同时下载数量，内容分发网络（CDN）可以使请求总时间降低，也可以减少cookie
- CSS放在head里：使其尽早下载，因为chrome需要下载完所有的css后才渲染页面
- JS放在body里的最后：尽早显示整个页面，获取节点。
7.使用懒加载
- 组件懒加载
const xxx =()=>import('./components/xxx.vue')
- 路由懒加载
8.优化用户体验
- 用户看到哪些内容就请求哪些内容
- 加一个loading动画用户会感觉时间变快
