1.网络传输性能优化
1.1.浏览器缓存
1.2.资源打包压缩
减少请求数、减小请求资源体积、提升网络传输速率。
①JS压缩：②HTML压缩：④提取css并压缩：
1.3.图片资源优化
1.3.1.不要在HTML里缩放图像
1.3.2.使用雪碧图（CSS Sprite）（多张图片聘在一块）
1.3.3.使用字体图标（iconfont）
1.3.4.使用WebP （部分浏览器支持）
1.4.网络传输性能检测工具——Page Speed （不是优化性能里面的）
1.5.使用CDN
2.页面渲染性能优化
2.1.浏览器渲染过程（Webkit）
2.2.DOM渲染层与GPU硬件加速
2.3.重排与重绘
2.4.优化策略
（一）CSS属性读写分离：浏览器每次对元素样式进行读操作时，都必须进行一次重新渲染（重排 + 重绘），所以我们在使用JS对元素样式进行读写操作时，最好将两者分离开，先读后写，避免出现两者交叉使用的情况。最最最客观的解决方案，就是不用JS去操作元素样式，这也是我最推荐的。
（二）通过切换class或者style.csstext属性去批量操作元素样式
（三）DOM元素离线更新：当对DOM进行相关操作时，例如innerHTML、appendChild等都可以使用Document Fragment对象进行离线操作，待元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作。
（四）将没用的元素设为不可见：visibility: hidden，这样可以减小重绘的压力，必要的时候再将元素显示。
（五）压缩DOM的深度，一个渲染层内不要有过深的子元素，少用DOM完成页面样式，多使用伪元素或者box-shadow取代。
（六）图片在渲染前指定大小：因为img元素是内联元素，所以在加载图片后会改变宽高，严重的情况会导致整个页面重排，所以最好在渲染前就指定其大小，或者让其脱离文档流。
（七）对页面中可能发生大量重排重绘的元素单独触发渲染层，使用GPU分担CPU压力。（这项策略需要慎用，得着重考量以牺牲GPU占用率能否换来可期的性能优化，毕竟页面中存在太多的渲染层对于GPU而言也是一种不必要的压力，通常情况下，我们会对动画元素采取硬件加速。）
3.JS阻塞性能
3.1不写死循环，及时释放内存
