前端性能优化

本篇文章主要是我自己对前端性能优化的一点总结。
我认为前端性能优化主要分为四大部分：渲染优化，代码优化，资源优化，请求优化。
其中渲染优化和代码优化主要取决于个人书写代码的习惯以及遵循前端代码规范，而资源优化和请求优化往往是工作当中比较常见的，优化起来效果比较明显。

渲染优化

首先要了解前端页面渲染的过程：

1. 构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
2. 构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
3. 执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
4. 构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
   渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
5. 布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
6. 绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式；

Webkit渲染引擎流程如下图：

注意要点：

因为浏览器是从上到下解析文档的，而js会阻塞文档解析，所以一般建议把

回流和重绘：
回流：有些时候我们会在文档布局完成后对DOM进行修改，这时候可能需要重新进行布局，称其为回流。
重绘：重新绘制渲染对象，也就是重绘。

操纵dom会触发回流，如果布局改变过大，就可能触发重绘，很明显重绘的性能消耗更大，所以需要尽量避免。一般想要避免回流和重绘，可以先将要修改dom脱离文档流在进行修改。但是一般页面操纵中回流和重绘一般很难完全避免，对优化空间不大，而且前端性能优化是一个综合考虑的问题，过于在意这个，可能会导致开发麻烦，后期维护困难等问题，所以一般不用考虑优化这个，了解下即可。

总结：渲染优化一般开发者只要遵循前端代码书写规范就可以潜移默化的避免大部分性能问题。

代码优化

前端代码优化主要和开发者的个人书写代码的习惯以及业务逻辑高度相关，不同的项目优化点可能不一样，以下主要简单谈下比较通用的优化点：

1. 尽量保证函数的单一性，完整性，不要将大量的业务逻辑放在一个函数里。
2. 尽量降低代码的重复率，多封装组件。
3. if – else 嵌套不要过多，合理使用循环。
   …

总结：代码优化有很多方面，我就不一一列举，网上有很多对代码优化的文章，对于开发者主要是要有优化代码的思维，和要经常去优化自己的代码，但是也要注意，优化工作是并不是一个单独的工作，也要考虑代码的可读性和可维护性，所以不要为了代码优化而去使用一些可读性比较差的代码，比如三元运算符的多层嵌套，可读性极差，这样反而得不偿失。

资源优化

常见的资源优化，如代码压缩，合并；第三方库的异步加载，按需加载；静态资源的CDN加速；

然后就是比较针对的，对一些图片较多项目的优化，因为图片资源一般比较大，加载比较慢，优化的话，用户感知比较明显。

1. 图片压缩；
2. 使用精灵图；
3. 图片尽量使用合适的尺寸；
4. 懒加载，预加载，渐进式图片；
5. 使用适合的图片格式；

总结：资源优化常见的优化可以通过webpack进行设置，在打包的时候进行优化，重点是图片优化，这块用户感知明显，优化空间比较大。

请求优化

首先要知道接口请求的各个阶段：

• 因为有“队头阻塞”，浏览器对每个域名最多开 6 个并发连接（HTTP/1.1），当页面里链接很多的时候就必须排队等待（Queued、Queueing），这里它就等待了 0.79ms，然后才被浏览器正式处理；
• 浏览器要预先分配资源，调度连接，花费了 1.17ms（Stalled）;
• 与代理服务器连接进行协商所花费了0.18ms（Proxy negotiation）;
• 连接前必须要解析域名，这里因为有本地缓存，所以只消耗了10us（DNS Lookup）；
• 与网站服务器建立连接的成本很高，总共花费了 107.58ms，其中有 57.71ms 用于 TLS 握手，那么 TCP 握手的时间就是 49.87（Initial connection、SSL）；
• 实际发送数据非常快，只用了54us（Request sent）；
• 之后就是等待服务器的响应，专有名词叫 TTFB（Time To First Byte），也就是“首字节响应时间”，里面包括了服务器的处理时间和网络传输时间，花了 84.49ms；
• 接收数据也是非常快的，用了 0.97ms（Content Dowload）。

Content Download是下载资源所需时间，这部分属于有效时间，就是提高这部分时间所在整个请求的时间比。
Queueing是排队等待的时间，因为一般浏览器最高并发6个请求，多的请求就需要排队，需要减少这部分时间。

根据以上的情况，可以有以下的优化点：

1. 合并请求，增加下载资源时间的所占比；
2. 请求数最好不要超过6个；
3. DNS缓存；
4. CDN加速；
5. 开启gzip压缩；

总结：请求优化也是优化的重点，毕竟用户都不喜欢一直看页面转圈，优化思路一般就是减少请求排队等待时间，增加下载资源时间占比。

综上，是我个人在前端工作中对性能优化的一点总结，总之前端性能优化是一个综合考虑的事情，也是一个长期的过程。