浏览器什么时候会解析隐藏的元素?

boo*_*oop 3 html browser

<div style="display: none;">foo</div>
Run Code Online (Sandbox Code Playgroud)

由于某些(可能是懒惰的)原因,我正在考虑使用隐藏的内容来稍微膨胀我的 DOM。

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

我要求显式提供 div 的内容,因为必须解析容器 - 否则浏览器无法知道它的隐藏,对吧?;)

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

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

boo*_*box 5

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

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

构建渲染树

构建渲染树后,它会经历布局绘制周期。布局周期计算渲染树中每个元素的位置,然后绘制周期将每个元素显示到屏幕上。

有关渲染树的更多信息,请参阅Google 开发者网络基础资源中描述的关键渲染路径。