浏览器渲染机制

浏览器的渲染过程主要包括：

• 解析html标签，构建DOM树；
• 解析CSS标签，构建CSSOM树；
• 把DOM树和CSSOM树组合成渲染树；
• 在渲染树的基础上进行布局，计算每个节点的几何结构；
• 把每个节点绘制到屏幕上。

大致如下图：

image.png

在一个网页从发送请求到在页面上显示出来，这些过程是会重复出现的。

浏览器向服务器请求到html代码后，开始遍历文档节点，构建DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

当遍历到link标签时，浏览器会向服务器请求相应的css文件，文件加载完毕则会立即开始解析，构建CSSOM树，这个过程不会阻塞DOM树的建立，html和css的解析是可以并发进行的，所以css应该放置在页面顶部，这样可以缩短网页加载的时间。

当遍历到script标签时，会加载并执行JavaScript脚本，这样会阻塞DOM的构建，直到脚本执行完成才会继续构建DOM，所以Script标签要放在页面底部。

DOM树、CSSOM树、渲染树都可能在第一次Painting后又被更新多次，比如JS修改了DOM或者CSS属性、图片下载完成后网页需要更新，在这些情况下，布局和绘制都会重复进行。