html 页面渲染过程：

1. 浏览器获取到 html 资源后开始解析 html ( dom tree ) --> 构建 dom 树

2. 解析到 css 后根据 css 生成 css 规则树 （ style rules ）--> 产生 css 规则树

3. dom 和 css 规则树生成完成

4. 通过 dom 树和 css 规则树生成渲染树 （ render tree ）--> 构建 render 树

5.渲染树构建完成后，浏览器开始计算元素的大小和位置（ layout ）--> 布局 render 树

6.根据计算好的节点信息将内容绘制到屏幕上（ padding ）--> 绘制 render 树

详细过程：

1. dom 树和 css 树的先后顺序

浏览器获取到 html 资源后自上而下开始解析，生成 dom 树；如果遇到 style 的内联样式和 link 会将 css 交由 css 渲染器构建 css 规则树；其中加载 link 引入的外部样式文件是异步加载的，并且整个 css 规则树也是与 dom 树的构建是并行的；

2. javascript 脚本的加载

由于 js 可以操作 dom ,所以在 html 解析到 javascript 脚本时会停止对 dom 的解析；而 css 的解析会阻塞 js 的执行，所以在某些情况下 css 的解析会导致 dom 的解析；

script 的 defe