浏览器渲染页面的原理及流程

渲染引擎在取得内容之后的基本流程：

解析HTML构建dom树—>构建render树—>布局render树—>绘制页面。

1、构建dom树 HTML文档中的所有内容都是节点，各节点之间拥有层级关系，如父子关系，兄弟关系等等，彼此相连构成dom树，dom树中节点和HTML文档存在一一对应的关系。

需要注意的是：在构建dom树期间，如果遇到JS，会阻塞dom树的构建，优先加载JS文件，加载完毕后在继续构建dom树。

在构建dom树的同时，浏览器还会构建一个CSSOM。当遇到css文件时，先加载css文件，然后构建CSSOM，但是会阻塞render树的构建。如果将css文件放在底部，render树在之前就已经构建完了，因此用户可能会看到无样式的页面或者闪屏。

2、渲染树（render树） 渲染树又dom树和CSSOM构成，但并不是必须等dom树及CSSOM加载完成后才开始合并构建render树，三者的构建并无先后条件，亦非完全独立，因此会形成一边加载，一边解析，一边渲染的现象。构建render树，根据render树计算每个可见元素的布局，并输出到绘制流程上，将像素渲染到屏幕上。

3、布局render树 有了render树，浏览器已经能知道网页中有哪些节点，各个节点的css定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

4、绘制 绘制包括重绘和重排两个过程。

4.1、重绘：屏幕的一部分重绘，render树节点发生改变，但不影响该节点在页面中的空间位置及大小，比如说某个div标签的背景颜色、内容发生变化，但几何属性没有发生变化，此时就会触发浏览器重绘。触发重绘的操作主要有：vidibility、outline、背景色等属性的改变。

4.2、重排：也叫回流。当render树节点发生变化，影响了节点的几何属性，导致该节点的位置发生变化，此时就会导致浏览器需要重新布局，这个过程就叫做浏览器的重排。