html - 浏览器什么时候会解析隐藏的元素？

Question

<div style="display: none;">foo</div>

出于某些(可能是懒惰的)原因，我正在考虑使用隐藏的内容使我的 DOM 膨胀一些。

现在我想知道这是否真的会影响性能，所以我的问题是:浏览器(谈论最近的浏览器)何时会解析隐藏的内容？什么时候添加到 DOM 中？或者当它真正可见时？

我明确要求 div 的内容，因为必须解析容器 - 否则浏览器无法知道它的隐藏，对吗？ ;)

我要求所有现代浏览器都这样做，因为我认为所有现代浏览器都会以相同的方式处理这个问题。

哦，也许我应该补充一点，我会根据 JS 添加这些隐藏内容。

Answer 1

浏览器遵循一种称为 Render Tree 的东西，它由 DOM 和 CSSOM 树组合而成。简而言之，DOM 关注内容，而 CSSOM 关注应用于文档的样式。生成的“渲染树”仅包含渲染页面所需的可见元素。

通过 CSS 不可见或隐藏的元素，也就是通过 display: none 将不会包含在渲染树中，而所有影响布局的元素都将包含在内.因此，可以安全地假设您的示例在变得可见或以某种方式影响文档布局之前不会被渲染。

渲染树构建完成后，会经历布局和绘制循环。布局循环计算每个元素在渲染树中的位置，然后绘制循环将每个元素显示到屏幕上。

有关渲染树的更多信息，请参阅 Critical Rendering Path在 Google Developers 的网络基础知识资源中进行了描述。