网站性能优化实战

一.网络传输性能优化

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

1.资源打包压缩

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

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

3.图片资源优化

1）使用精灵图(雪碧图css sprite)，就是不少张图标合并到一块儿，经过背景位置来控制

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

2）使用字体图标

字体图标的使用不在这里展开，感兴趣的请看个人另一篇文章：http://www.javashuo.com/article/p-dfdnxyqd-ev.html

二.页面渲染性能优化

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压力。