浏览器何时解析隐藏的元素? [英] When will a browser parse elements which are hidden?

问题描述

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

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

I'm thinking about bloating my DOM a bit for some (lazy probably) reasons with content which is hidden.

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

Now I'm wondering if this would actually affect performance so my question is: when will a browser (talking about recent browser) parse hidden content? When it get added to the DOM? Or when it get actually visible?

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

I'm asking explicit for the content of the div, since the container has to be parsed - otherwise the browser couldn't know its hidden, right? ;)

我要求所有现代浏览器都使用此功能，因为我认为所有现代浏览器都将以相同的方式进行处理.

I'm asking this for all modern browser, since I think that all modern browsers will handle this in the same way.

哦，也许我应该补充一点，我将在每个JS中添加这些隐藏的内容.

Oh and maybe I should add that I'll add these hidden content per JS.

推荐答案

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

Browsers follow something called the Render Tree which is formed by combining the DOM and CSSOM trees. In short, the DOM is concerned about content, while CSSOM is focused on styles applied to the document. The resulting "Render Tree" contains only the visible elements required to render the page.

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

Elements that are not visible or hidden via CSS aka via display: none will not be included in the Render Tree, while all elements that affect the layout will be included. So, it's safe to assume that your example will not get rendered until it becomes visible or affects the layout of the document in some way.

构建渲染树后，它会经历一个布局和 paint 循环.布局周期计算每个元素在渲染树"中的位置，然后绘制周期将每个元素显示在屏幕上.

After the Render Tree is constructed, it goes through a layout and paint cycle. The layout cycle calculates the position of each element in the Render Tree, and then the paint cycle displays each element onto the screen.

有关渲染树的更多信息，请参见关键渲染路径在Google Developers的网络基础知识资源中进行了描述.

For more information about the Render Tree, see Critical Rendering Path described on the Google Developers' web fundamentals resource.

这篇关于浏览器何时解析隐藏的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！