一.网络传输性能优化

读取缓存→DNS查询→TCP链接→发起请求→接收响应→处理html元素→加载完成。

1.资源打包压缩

目的：减少请求数、减小请求资源体积、提升网络传输速率

工具：webpack（js压缩，html压缩，css提取压缩，依赖关系分析等）

3.图片资源优化

1）使用精灵图(雪碧图css sprite)，就是很多张图标合并到一起，通过背景位置来控制

这里给大家推荐一个自动化生成雪碧图的工具：https://www.toptal.com/developers/css/sprite-generator 

2）使用字体图标

二.页面渲染性能优化

1.减少重排还是重绘

1）CSS属性读写分离：浏览器每次对元素样式进行读操作时，都必须进行一次重新渲染（重排 + 重绘），所以我们在使用JS对元素样式进行读写操作时，最好将两者分离开，先读后写，避免出现两者交叉使用的情况。最最最客观的解决方案，就是不用JS去操作元素样式，这也是我最推荐的。

2）通过切换class或者style.csstext属性去批量操作元素样式

3）dom元素离线更新：当对DOM进行相关操作时，例如innerHTML、appendChild等都可以使用Document Fragment对象进行离线操作，待元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作。

4）将没用的元素设为不可见：visibility: hidden，这样可以减小重绘的压力，必要的时候再将元素显示。

5）压缩DOM的深度，一个渲染层内不要有过深的子元素，少用DOM完成页面样式，多使用伪元素或者box-shadow取代。

6）图片在渲染前指定大小：因为img元素是内联元素，所以在加载图片后会改变宽高，严重的情况会导致整个页面重排，所以最好在渲染前就指定其大小，或者让其脱离文档流。

7）对页面中可能发生大量重排重绘的元素单独触发渲染层，使用GPU分担CPU压力。

链接: https://fly63.com/article/detial/6354