前端性能优化小纪（前端性能优化理解）

天下武功，无坚不破，唯快不破。对前端而言，快意味着要求资源体量更小、数量更精简、内容更早呈现、交互更加人性化。当项目做到一定程度，就应该考虑性能的问题，前端的性能优化有诸多有迹可循的理论和方法，比如 Yahoo！性能军规、Google PageSpeed Insights Rules。

我们团队一个比较老的项目首屏加载大概需要20多秒，这严重影响了用户体验，于是进行了一次首屏加载的性能优化。

浏览器渲染过程

首先，稍微了解一下，浏览器接收到HTML/CSS/JavaScript等资源后的渲染过程：

浏览器在收到 HTML 文档之后会对文档进行解析开始构建 DOM (Document Object Model) 树，进而在文档中发现样式表，开始解析 CSS 来构建 CSSOM（CSS Object Model）树，这两者都构建完成后，开始构建渲染树。

DOM树描述了文档的结构与内容，CSSOM树则描述了对文档应用的样式规则，想要渲染出页面，就需要将DOM树与CSSOM树结合在一起，这就是渲染树。渲染树构建完毕后，浏览器得到了每个可见节点的内容与其样式，下一步工作则需要计算每个节点在窗口内的确切位置与大小，也就是布局阶段。当Layout布局事件完成后，浏览器会立即发出Paint Setup与Paint事件，开始将渲染树绘制成像素，绘制所需的时间跟CSS样式的复杂度成正比，绘制完成后，用户就可以看到页面的最终呈现效果了。

暂缓JavaScript解析

在上图构建DOM树时，