浏览器渲染页面的流程

1.DOM

1. 浏览器获取html文件。
2. 浏览器将获取的html文件转化成为Token。
3. 浏览器吧Token转化成为节点对象
4. 浏览器将这些节点相连，变成DOM

2.CSSOM

1. 浏览器在读html文件的时候遇到link标签获取css文件。
2. 浏览器将获取的css文件转化成为token。
3. 浏览器将Token转化成为节点对象。
4. 浏览器将这些结点结合成为CSSOM。

3.渲染树

匹配DOM和CSSOM的节点，并捕获可见内容

4.布局

1. 布局用来获取渲染树的结构、节点位置和大小。
2. 布局依据盒子模型来进行，每个元素都用一个盒子来表示。

5.渲染

吧渲染树以像素的形式绘制在页面，这样我们的页面救呈现出来了。

6.html、css和js文件的解析顺序和注意事项

1. 浏览器获取html文件绘制DOM
2. 浏览器在获取html文件的过程中遇到link标签或者script标签，开始请求css文件和js文件
3. 浏览器根据css文件绘制CSSOM，可同时下载和解析js
4. DOM可以部分解析，CSSOM不能部分解析。
5. 在下载和解析js的时候，DOM的解析会被阻塞（如果srcipt标签设置了async，那么不会阻塞DOM的解析）。
6. 运行js的代码，构建DOM，形成渲染树。