浏览器 DOM 树和渲染树有什么区别

what is the difference between browser DOM tree and render tree

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

渲染树是由 "dom tree" 构建的还是浏览器创建的不同树？

好问题。 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:

这些都是非常好的文章，我觉得你应该先看看！

  1. What Every Frontend Developer Should Know About Webpage Rendering

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

  2. How browsers work : Behind the scenes of modern web browsers

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

  3. Render-tree Construction, Layout, and Paint

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

希望对您有所帮助！

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

渲染树仅包含将在屏幕上可见的节点，即如果任何节点的显示标记为 none，则它不会成为渲染树的一部分。

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

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