浏览器 DOM 树和渲染树有啥区别
Posted
技术标签:
【中文标题】浏览器 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 树制成的,如上所述。
【讨论】:
以上是关于浏览器 DOM 树和渲染树有啥区别的主要内容,如果未能解决你的问题,请参考以下文章