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

Question

我想知道＆＃34; dom tree＆＃34;和＃34;渲染树＆＃34;差异？

渲染树是否来自＆＃34; dom树＆＃34;或者它是由浏览器制作的不同树？

Answer 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:

Answer 2

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

  

  

1. 每个前端开发人员应该了解的关于网页渲染的内容

        

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

  

2. 浏览器的工作原理：现代网络浏览器的幕后

        

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

  

3. 渲染树构造，布局和绘制

        

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

  

希望能为您提供帮助！

Answer 3

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

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

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

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