浏览器渲染页面的过程

浏览器渲染页面的过程：

1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。（更具体的解析HTML过程看上一篇博客：点击打开链接）
2. 将CSS解析成 CSS Rule Tree（css规则树） 。
3. 解析完成后，浏览器引擎会根据DOM树和CSS规则树来构造 Render Tree。注意：Render Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步进行layout，进入布局处理阶段，即计算出每个节点在屏幕中的位置。
5. 再下一步就是绘制，即遍历RenderTree，并使用用户界面后端层绘制每个节点。根据计算好的信息绘制整个页面。

注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。