从输入URL到页面展示，这中间发生了什么？（二）

导航流程完成之后，就来到了我们的渲染流程，渲染流程分为以下七个步骤

一、构建dom树

浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。

在控制台里面输入“document”后回车，这样你就能看到一个完整的 DOM 树结构

也可以通过JavaScript查询或修改dom树

二、样式计算

1、把 CSS 转换为浏览器能够理解的结构

和 HTML 文件一样，浏览器也是无法直接理解这些纯文本的 CSS 样式，所以当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheets。

在控制台中输入 document.styleSheets，这样你就能看到一个完整的styleSheets结构

2、 转换样式表中的属性值，使其标准化

CSS 文本中有很多属性值，如 2em、blue、bold，这些类型数值不容易被渲染引擎理解，所以需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过程就是属性值标准化。

body {
    font-size: 2em }