前端性能优化

参考博客：https://juejin.im/post/5b0b7d74518825158e173a0c#heading-10

1.网络传输性能优化

浏览器在收到用户请求时，经历了以下阶段：
重定向 -> 拉取缓存 -> DNS查询 -> 建立TCP链接 -> 发起请求 -> 接收响应 -> 处理HTML元素 -> 元素加载完成

1.1浏览器缓存
在后台配置文件缓存，已经过期时间，不过需要注意，为了避免静态文件更新但是仍有缓存，需要给静态文件加上md5或者哈希后缀。

1.2资源打包压缩
在用户首次打开的时候就提速，需要：
减少http请求数、减少http请求资源体积、提升网络传输速率

webpack 打包优化
1.js文件压缩
2.html压缩
3.提取公共资源
4.提取css并压缩

在服务器上开启Gzip压缩传输，它能将我们的文本类文件体积压缩至原先的四分之一（不用对图片做压缩处理，不然会失真）

1.3图片资源优化
1.3.1不要在html中缩放图片，html中需要多大尺寸的图片，就让ui提供这个尺寸的图片。尽量固定图片尺寸
1.3.2使用雪碧图

1.5使用CDN

2.页面渲染优化

2.1浏览器渲染过程

页面渲染.png

2.4优化策略
1）css属性读写分离：不用在js中直接操作元素样式，可以给它添加新的类
2）通过切换class或元素的style.csstext属性去批量操作元素样式
3）压缩DOM的深度，一个渲染层内不要有过深的子元素，少用DOM完成页面样式，多使用伪元素或box-shadow代替。
4）图片在渲染前指定大小。因为img元素是内联元素，所以在加载图片后会改变宽高，严重的情况会导致整个页面重排，所以最好在渲染前就指定其大小，或者让其脱离文档流。

3.js阻塞性能