前端性能优化总结

性能优化从以下几个角度来考虑

1. 页面性能优化
2. 网络性能优化

网络性能优化

网络性能优化主要从以下几个角度：

1. 加快请求速度（使用CDN， keep-alive，Websocket，避免重定向，优先加载CSS文件）
2. 增多请求并发（Domian-Hash）
3. 减小请求数目（合并文件、雪碧图）
4. 减小请求体积（压缩图片和文件，Gzip，懒加载，Cookie-Free（减少不必要的cookie），Cache-Control，合理设置缓存）

页面性能优化

1. 优化DOM性能（减少DOM操作，拼接DOM操作，事件委托，使用合理的CSS选择器，多用原生方法）
2. 优化CSS性能（使用CSS动画代替JS动画，使用tranform完成动画，利用GPU渲染单独的复合层、提高z-index避免隐式合成过多的复合层，使用will-change属性，利用scale减小纯色复合层的尺寸）
3. 优化JS性能（合理缓存变量，减少全局变量，使用局部变量，操作节流）
4. 优化用户体验（加载状态）

参考

• 网络基础09 提高网络性能
• 动画02 浏览器的重绘与重排以及动画性能优化