我在读有关渲染树的文章：
在构建DOM树时，浏览器将构建另一棵树，即渲染树。该树按显示顺序显示视觉元素。它是文档的视觉表示。渲染树不包含
display:none，位置绝对元素HEAD。
最后一句话让我有些困惑。渲染树包含可见元素。因此，它应该包含绝对位置。浏览器如何呈现这些元素（display:none，定位绝对元素，HEAD）？有人可以详细解释吗？
我不确定您在哪里读取该信息，但是position: absolute（显然）呈现了元素。
有两棵树：DOM和CSSOM。两者结合在一起生成生成树，该树构建我们看到的页面。
根据Google Developers的说法，display: none不会渲染。但是也没有迹象表明它position: absolute也不会渲染。
Google Developers-渲染树的构造，布局和绘制
文章中的几点要点：
CSSOM和DOM树被合并到一个渲染树中，然后用于计算每个可见元素的布局，并用作将像素渲染到屏幕的绘制过程的输入。（强调我的）
将DOM和CSSOM树合并以形成渲染树。渲染树仅包含渲染页面所需的节点。
对于浏览器而言，第一步是将DOM和CSSOM组合成一个“渲染树”，该树捕获页面上所有可见的DOM内容以及每个节点的所有CSSOM样式信息。（强调我的）
要构建渲染树，浏览器大致执行以下操作：
从DOM树的根开始，遍历每个可见节点。
一些节点根本不可见（例如脚本标签，元标签等），由于它们未反映在渲染的输出中，因此将其省略。
一些节点通过CSS隐藏，并且在渲染树中也被省略-例如，在上例中，span节点在渲染树中缺失，因为我们有一个明确的规则来设置
display: none属性。对于每个可见节点，找到合适的匹配CSSOM规则并应用它们。
发出具有内容及其计算样式的可见节点。
最终输出是一个渲染，该渲染同时包含内容和屏幕上所有可见内容 的样式信息。（强调我的）
在此处阅读全文：渲染树的构造，布局和绘制
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句