浏览器 DOM 树和渲染树有啥区别

Posted 2023-02-22

【中文标题】浏览器 DOM 树和渲染树有啥区别

【英文标题】：what is the difference between browser DOM tree and render tree浏览器 DOM 树和渲染树有什么区别

【发布时间】：2015-10-23 22:22:55

【问题描述】：

我想知道“dom tree”和“render tree”的区别？

渲染树是由“dom树”构建的还是由浏览器构建的不同树？

【问题讨论】：

@EdHeal 这个 Stack Overflow 问题位于“渲染树”的 Google 搜索结果顶部。

这里有一个很好的解释developers.google.com/web/fundamentals/performance/…

【参考方案1】：

很好的问题。 DOM 树本质上是包含所有 html 元素（节点）的树，而渲染树是 DOM 和 CSSOM 树的顶点。渲染树是实际渲染到页面上的树。希望这可以帮助！我写了一篇关于这个的文章，看看:)

http://www.jjburton.com/2016/02/12/web-science-browser-internals-rendering.html

The big question...'How does the browser render a web page?'. Before starting, let's quickly answer some sub-questions:

【参考方案2】：

这些都是非常好的文章，我认为你应该先阅读！

每个前端开发人员都应该知道的关于网页渲染的知识

http://frontendbabel.info/articles/webpage-rendering-101/

浏览器的工作原理：现代网络浏览器的幕后花絮

http://taligarsiel.com/Projects/howbrowserswork1.htm

渲染树构造、布局和绘制

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

希望对你有所帮助！

【讨论】：

CSSOM 和 DOM 树组合成一个渲染树，然后用于计算每个可见元素的布局，并作为渲染过程的输入要筛选的像素。优化每个步骤对于实现最佳渲染性能至关重要。

因此，在构建渲染树后，我们将看到正在下载的图像/子资源/子帧，如developer.mozilla.org/en-US/docs/Web/API/Window/… 所述。您是否知道这些图像/子帧/子资源是在渲染树构建后被渲染树调用的，还是在渲染树还在构建时已经被 DOM 树调用？

【参考方案3】：

渲染树是通过组合 DOM 树（由解析 HTML 生成）和 CSSOM（由解析为文档定义的 CSS 生成）树创建的。

渲染树只包含在屏幕上可见的节点，即如果任何节点的显示标记为none，那么它就不是渲染树的一部分。

然后将渲染树传递到布局阶段，最终传递到绘制阶段，在屏幕上绘制实际像素并且内容对您可见。

回答您的问题：dom 树和渲染树都仅由浏览器创建，是的，渲染树是由 dom 树制成的，如上所述。