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