DOM Tree与Render Tree之间的区别是什么?

[问答题]

牛客439985643678

DOM树是包含了所有html节点的树，渲染树是DOM树和CSSOM树组合而成的，最终渲染在页面上的树。DOM树和渲染树都是浏览器生成的

发表于 2020-02-20 12:07:13 回复(0)

夜寻极光。

浏览器渲染的基本过程:

1. 根据HTML结构生成DOM树。

2. 根据css生成CSSOM树。
3. 将DOM树与CSSOM树整合成RenderTree渲染树。
4. 根据RenderTree开始渲染和显示。
5. 期间遇到`<JavaScript>`会执行并阻碍渲染。

发表于 2021-09-17 14:43:48 回复(0)

牛客806920363号

呈现器是和 DOM 元素相对应的，但并非一一对应。非可视化的 DOM 元素不会插入呈现树中，例如“head”元素。如果元素的 display 属性值为“none”，那么也不会显示在呈现树中（但是 visibility 属性值为“hidden”的元素仍会显示）。

有一些 DOM 元素对应多个可视化对象。它们往往是具有复杂结构的元素，无法用单一的矩形来描述。例如，“select”元素有 3 个呈现器：一个用于显示区域，一个用于下拉列表框，还有一个用于按钮。如果由于宽度不够，文本无法在一行中显示而分为多行，那么新的行也会作为新的呈现器而添加。
另一个关于多呈现器的例子是格式无效的 HTML。根据 CSS 规范，inline 元素只能包含 block 元素或 inline 元素中的一种。如果出现了混合内容，则应创建匿名的 block 呈现器，以包裹 inline 元素。

有一些呈现对象对应于 DOM 节点，但在树中所在的位置与 DOM 节点不同。浮动定位和绝对定位的元素就是这样，它们处于正常的流程之外，放置在树中的其他地方，并映射到真正的框架，而放在原位的是占位框架。