今天来复习一下浏览器的渲染过程，浏览器的渲染发生在从服务端获得到HTTP响应后，其本质就是浏览器的渲染引擎（即浏览器内核）对响应中的HTML文件、CSS文件和JS文件做出解析并在浏览器窗口中绘制结果的过程。我们学习和了解浏览器渲染过程的内容对于以后在工程实践中优化网页性能非常有帮助。
渲染过程
渲染过程可以简单地概括为以下几条：
- 解析HTML文档并开始构建DOM树
- 当在HTML文档中遇到CSS文件或者style标签后，同时开始解析CSS内容，构建CSSOM树
- 将DOM树和CSSOM树合并为Render树，也就是渲染树
- 根据渲染树进行布局的计算，从而得出每个节点的几何信息，也就是回流（reflow）
- 最后就是将计算出几何信息的各个节点绘制到屏幕上
阻塞渲染的因素：CSS和JS
CSS对于渲染的阻塞
我们应该知道，只有CSSOM被完全构建完毕后，DOM和CSSOM才开始合力构建渲染树，而在此之前，不管DOM是否已经构建完毕，都要等待CSSOM的构建，这就是CSS的阻塞。因此，为了提升网页性能，我们应该考虑尽早尽快地加载CSS资源。
##JS对于渲染的阻塞 JS可以修改DOM和CSSOM，而且JS会被立刻解析和执行，因此JS天然地会阻塞渲染过程，其实换句话说，JS引擎的工作无非是接替了与之并列的渲染引擎的工作，而且JS引擎有更高的优先级。为了防止JS阻塞渲染，我们可以使用async或者defer两种模式来加载JS资源，这俩都是异步加载，只是async是异步加载完立即执行，defer是被推迟的，在脚本间依赖性不强选择async，依赖性很强的时候选择defer。除了这种方法，JS文件最好放在HTML文档的后面，防止中途修改DOM阻塞渲染。
