浏览器渲染过程

1. 请求服务器得到 html 文件，将字节转换为字符，再将字符 Token 化 （符号/标签），之后把 token 转化为节点对象，之后把这些节点对象连接在一起形成 DOM 树

2. 遇到 link 标签向服务器发送请求得到 CSS 文件,后面步骤类似第一步，最终结合会 CSSOM 树

3. 匹配 DOM 和 CSSOM 的节点结合成 render 树，render 树存储的是页面上能显示的内容，不需要呈现的就不会挂在 render 树上，比如 meta、link、head等标签，设置了 display:none 的也不会被呈现出来

4. 获取 render 树的结构，节点位置、形状和大小，进行布局，布局是依据盒子模型来进行的，也就是每个元素都用一个盒子来表示，然后这些盒子在页面上进行排列和嵌套

5. 进行绘制，将 render 树以像素的形式绘制在页面，页面就呈现出来了

6. 构建 DOM

7. 构建 CSSOM

8. 构建渲染树

9. 布局

10. 绘制

构建 DOM 时遇到了 script 就请求下载执行 JS ，JS 如果没有额外的设置，默认要等 CSSOM 构建完成，而 JS 既可以对 DOM，也可以对 CSSOM 进行修改，这样后面的三步又会再执行一次