一.网络传输性能优化
读取缓存→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压力。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！