关于前端:从日志中看浏览器的渲染过程

当浏览器获取到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的执行，浏览器的渲染中各模块要进行屡次的解析。