渲染引擎在取得内容之后的基本流程:
解析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树节点发生变化,影响了节点的几何属性,导致该节点的位置发生变化,此时就会导致浏览器需要重新布局,这个过程就叫做浏览器的重排。