41.网页渲染原理

简单来说，浏览器渲染一共有五步，

1. 解析HTML标签，构建DOM树。

在这个阶段，引擎开始解析html，解析出来的结果会成为一棵dom树
dom的目的至少有2个：

• 作为下个阶段渲染树状图的输入
• 成为网页和脚本的交互界面。(最常用的就是getElementById等等)

当解析器到达script标签的时候，发生下面四件事情

1. html解析器停止解析,
2. 如果是外部脚本，就从外部网络获取脚本代码
3. 将控制权交给js引擎，执行js代码
4. 恢复html解析器的控制权
   ＝＝＝由此可以得到第一个结论1＝=＝＝

• 由于<script>标签是阻塞解析的，将脚本放在网页尾部会加速代码渲染。
• defer和async属性也能有助于加载外部脚本。
• defer使得脚本会在dom完整构建之后执行；
• async标签使得脚本只有在完全available才执行，并且是以非阻塞的方式进行的。

2. 解析CSS标签，构建CSSOM树。

我们已经看到html解析器碰到脚本后会做的事情，接下来我们看下html解析器碰到样式表会发生的情况
js会阻塞解析，因为它会修改文档(document)。css不会修改文档的结构，如果这样的话，似乎看起来css样式不会阻塞浏览器html解析。但是事实上 css样式表是阻塞的。阻塞是指当cssom树建立好之后才会进行下一步的解析渲染。

通过以下手段可以减轻cssom带来的影响

• 将script脚本放在页面底部
• 尽可能快的加载css样式表
• 将样式表按照media type和media query区分，这样有助于我们将css资源标记成非阻塞渲染的资源。
• 非阻塞的资源还是会被浏览器下载，只是优先级较低。

3. 3.把DOM和CSSOM组合成渲染树（render tree）

• 

4. 在渲染树的基础上进行布局，计算每个节点的几何结构。

布局(layout)：定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……

5. 把每个节点绘制到屏幕上（painting）,正式开画！

作者：饥人谷_刘康
链接：https://www.jianshu.com/p/e6eb2adbd55e
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。