【发布时间】：2015-10-23 22:22:55
【问题描述】：
我想知道“dom tree”和“render tree”的区别？
渲染树是由“dom树”构建的还是由浏览器构建的不同树？
【问题讨论】：
-
@EdHeal 这个 Stack Overflow 问题位于“渲染树”的 Google 搜索结果顶部。
标签： dom tree render difference
【发布时间】：2015-10-23 22:22:55
【问题描述】：
很好的问题。 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:
【讨论】：
这些都是非常好的文章，我认为你应该先阅读！
每个前端开发人员都应该知道的关于网页渲染的知识
浏览器的工作原理：现代网络浏览器的幕后花絮
渲染树构造、布局和绘制
希望对你有所帮助！
【讨论】：
-
CSSOM 和 DOM 树组合成一个渲染树，然后用于计算每个可见元素的布局，并作为渲染过程的输入要筛选的像素。优化每个步骤对于实现最佳渲染性能至关重要。
-
因此，在构建渲染树后，我们将看到正在下载的图像/子资源/子帧，如developer.mozilla.org/en-US/docs/Web/API/Window/… 所述。您是否知道这些图像/子帧/子资源是在渲染树构建后被渲染树调用的，还是在渲染树还在构建时已经被 DOM 树调用？
渲染树是通过组合 DOM 树（由解析 HTML 生成）和 CSSOM（由解析为文档定义的 CSS 生成）树创建的。
渲染树只包含在屏幕上可见的节点，即如果任何节点的显示标记为none，那么它就不是渲染树的一部分。
然后将渲染树传递到布局阶段，最终传递到绘制阶段，在屏幕上绘制实际像素并且内容对您可见。
回答您的问题：dom 树和渲染树都仅由浏览器创建，是的，渲染树是由 dom 树制成的，如上所述。
【讨论】：