Render Tree和CSSOM Tree的区别
- DOM树
① 浏览器把获取到的html代码解析成一个DOM树,html中的每个标签都是DOM树中的一个节点,根节点就是我们常用的document对象。
② DOM树里面包含了所有的html标签,包括display:none;
隐藏,还有用JS动态添加的元素等。 -
CSSOM树
CSS下载完之后对CSS进行解析,解析成CSS对象,然后把CSS对象组装起来,构建CSSOM树
-
Render Tree
① CSSOM树和DOM树连接在一起(一 一对应)形成一个Render Tree,渲染树用来计算可见元素的布局并且作
为将像素渲染到屏幕上的过程的输入。
② 渲染树会忽略display: none;
的元素