前端性能优化清单

这已经不是一个新鲜的话题了。在前端框架层出不穷，理念翻天覆地的情况下，总有针对的优化手段，但是优化的同时我们要清楚，到底是为了什么而优化。

优化的目的

首先我们最应该关注的是用户体验，这是能为公司带来直接效益的方面，不光是界面流程要设计得足够精巧，如果页面加载时长过长，操作卡顿，都会影响用户浏览下去的兴致。用户很有可能是在一台性能欠佳的电脑并且是在网络不好的情况下去浏览的，因此我们不仅要在开发机上拥护良好的体验，更要模拟条件不好的情况下网站运行的情况。对于一些大体量用户量极大的公司来说，能争取多一部分用户，甚至每一秒的提升，都可能带来可观的收益。

所以，我们应该从两个方面入手优化。

1. 页面加载
2. 代码的执行

页面加载的优化

从使用的资源入手

• 并不是所有的网站都需要bootstrap来构建用户界面，对UI的抽象会增加浏览器必须下载的CSS，而CSS是阻塞渲染的资源，所以小项目引入CSS框架带来的开销会显著延迟渲染。
• 并非所有的网站都需要成为单页面应用，javascript资源不仅需要下载，而且还需要经过解析编译和执行，是最昂贵的资源。

关注发送资源的方式

• 将静态资源部署到CDN上，突破浏览器单个域名的请求并发数
• 关注资源发送的优先级，用于首屏渲染的资源应尽快加载，对于立马要用的资源，应在头部声明preload，script的加载声明async，对于用户即将要用的资源，用prefetch在空闲的时候加载。
• 分割代码，按需加载（webpack）
• 将资源迁移至HTTP/2，以并行的方式加载。同时，HTTP/2支持头部压缩并且以二进制的格式传输，减小了发送资源的大小。

留意发送数据的大小

• 压缩文本资源，替换较长的变量名，通过webpack.optimize.UglifyJsPlugin对资源进行压缩，对于一些特定的资源比如CSS，webpack在导入的时候文件会被编译成一个字符串，因此压缩要在特定的loader中开启，比如css-loader的minimize.
• 服务器开启gzip对资源进行压缩，需要注意的是一些文件格式是已经压缩过的（JPEG,PNG,GIF,WOFF等），因此不会对压缩做出相应。
• 对于图形内容，除非是要用到透明度的情况下使用PNG格式，一般条件首选有损的jpg格式。使用工具删除图片的元数据，尽量使用较低质量的图片。
• 浏览器每次发出的请求都会带上cookie，所以cookie不应存放太多的数据，需要持久化的数据应该存储在localstorage上。

关注请求耗时

• 对于静态资源，应该通过设置http缓存保存在本地，通过cache-control设置有效时长，浏览器会判断是否需要请求，减少请求来回消耗的时间。
• 使用service worker配合cache api对资源进行缓存。在网络条件不好的情况下优先使用离线资源。
• 避免重定向

页面执行的优化

工厂生产的效率高不高，一方面不仅仅要关注原材料是否及时送达，另一方面也要关注生产过程中各个环节是否相互制约，那个环节出现瓶颈。这种情况同样出现在浏览器的页面产出。

• 对于CSS而言，用于计算某元素计算样式的时间中大约有50%用来匹配选择器，而另一半时间用于从匹配的规则中构建 RenderStyle（计算样式的表示），我们要尽量用类名的方式去替代复杂过长的选择器，尽管对于代码而言不太优雅，但是这能节省css用来匹配的时间。
• 用requestAnimationFrame替代setTimeout和setInterval执行动画。
• 使用transform 实现 几何属性的动画。
• 对CSS合成合理分层。使用will-change 属性开启分层绘制。
• 使用web worker 开启新线程处理复杂计算。