DOM Tree和Render Tree

同样是金山办公的卷子,这是另一个我没怎么了解过的概念,特别记录一下。

DOM Tree

DOM树这个东西说白了就是浏览器内的基于HTML转化来的结构,由浅入深形成一棵树,通过这种树状结构来表示页面内各个元素之间的层级关系。

根元素就是html标签,然后再到下一层级就是head标签、body标签,然后依次往下倒各个层级的标签,整个DOM结构可以被画成是一个树的形式。

在DOM树内存在父节点、子节点、兄弟节点的概念,实际上就是父元素、子元素、兄弟元素。

我们可以通过浏览器提供的DOM操作方法来对DOM树进行操作,我们可以增减其中的内容,或者对某个节点进行修改。

需要特别注意的是,DOM树只包含文档这一部分的结构,不包含任何的样式,样式实际上在浏览器内部是一个另外的结构,即CSSOM(CSS树)。

DOM树是浏览器根据HTML解析、构建的,它和HTML文本不是同一个概念。

Render Tree

Render Tree也就是渲染树,浏览器在构建DOM树的同时会构建渲染树,渲染树会计算节点的样式信息

这一点非常重要,因为DOM树里面的节点并不是所有的都需要渲染,比如设置了隐藏的节点就不需要渲染。我们看到的页面是基于渲染树来渲染的,而不是DOM树,只是我们对DOM树做的改变会同步到渲染树上,之后浏览器再根据渲染树渲染出内容。

渲染树中,比如设置了display: none的节点就不会构建渲染器加入到渲染树,这是它和DOM树的一个根本区别。

设置了visibility: hidden的元素会被创建渲染器,决定是否创建渲染器的样式是display。

在Webkit中,浏览器还会根据DOM节点的不同display样式构建不同种类的渲染器。

小结

只是理解这两个树的区别,那么概念是不难理解的,但是如果要深入去理解这两个树是怎么构建的,最终是怎么样渲染出页面来的,需要去深入到浏览器的基本工作原理才能理解透彻。

就应聘方面来说到这一层表面就已经够了,但是未来想要精进技术还是要深入到浏览器的原理去看一些东西。