浏览器何时会解析隐藏的元素？

Question

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

由于某些（可能是懒惰的）原因，我正在考虑让我的 DOM 有点膨胀，因为内容是隐藏的。

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

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

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

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

Answer 1

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

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

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

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

Answer 2

在 DOM 中添加 div 的 JS 可能会比浏览器解析它造成更多的开销。

带有display:none 的隐藏元素与可见元素没有什么不同，不会正面或负面地影响性能，因为不会影响布局。另一方面，如果您使用visiblity:hidden，则浏览器必须为其保留一个“框”，这会更慢，因为它会影响布局。