从浏览器日志里看渲染过程

当浏览器获取到html、css、js及其他资源之后，如何将内容展示到屏幕上，这时候需要渲染引擎来进行处理，渲染引擎中包括html解析器、css解析器、js引擎、布局模块、绘图模块，各个模块都在页面绘制中有其作用。

html解析器用来将html解析成dom树，css解析器为dom各个元素计算出样式信息，js引擎可以修改网页的内容，也能修改css信息，布局模块用于在dom创建之后，将dom元素和样式结合起来，计算大小位置及布局，绘图模块用于将布局计算后的各节点绘制成图像。

浏览器会从上到下解析文档，大致渲染过程如下。

1、遇见 HTML 标记，调用HTML解析器解析为对应的 token （一个token就是一 个标签文本的序列化） 并构建 DOM 树（就是一块内存，保存着tokens，建立它们之间的关系）

2、遇见 style/link 标记调用相应解析器处理CSS标记，并构建出CSS样式树

3、遇见 script 标记 调用javascript引擎 处理script标记、绑定事件、修改DOM 树/CSS树等

4、将 DOM树 与 CSS树 合并成一个渲染树

5、根据渲染树来渲染，以计算每个节点的几何信息

6、最终将各个节点绘制到屏幕上

用一张非常经典的图片来展示这个渲染的过程

 

了解渲染的流程之后，我们再来通过开发者工具中Performace具体来看看浏览器获取资源的顺序，以下的html文档里除了初始化的内容，在 body 标签中引入了一张图片，使用link标签引入了样式，即使html文件中没有js的执行，浏览器解析的过程中仍然有js引擎的参与

以上各个解析器和模块的执行并不一定是单次的，随着资源的获取，js的执行，浏览器的渲染中各模块要进行多次的解析。