瀏覽器何時會解析隱藏的元素？

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

我正在考慮一些（懶惰的可能）原因使內容被隱藏，導致我的DOM膨脹。瀏覽器何時會解析隱藏的元素？

現在我想知道這是否會影響性能，所以我的問題是：什麼時候瀏覽器（談論最近的瀏覽器）解析隱藏的內容？當它被添加到DOM？或者當它實際上可見時？

我要求顯式的div的內容，因爲容器必須被解析 - 否則瀏覽器無法知道它的隱藏，對吧？ ;）

我問這是所有現代瀏覽器，因爲我認爲所有現代瀏覽器都會以同樣的方式處理這個問題。

哦，也許我應該補充一點，我會爲每個JS添加這些隱藏的內容。

來源

2015-12-15 Brettetete

它如何知道它被隱藏，直到它解析它？ – 2015-12-15 05:06:19

@torazaburo這是一個公平點。我的問題應該問明確的內容 – Brettetete

瀏覽器通過組合DOM和CSSOM樹形成一個名爲的渲染樹。簡而言之，DOM關注內容，而CSSOM側重於應用於文檔的樣式。生成的「渲染樹」只包含渲染頁面所需的可見元素。

元素是無法通過CSS可見或隱藏又名通過display: none將不會被包含在渲染樹，而影響佈局中的所有元素將被包括在內。因此，假設您的示例在呈現可見或以某種方式影響文檔佈局之前不會被渲染。

渲染樹後構造，它通過一個佈局和油漆週期。佈局週期計算渲染樹中每個元素的位置，然後繪製週期將每個元素顯示在屏幕上。

有關渲染樹的更多信息，請參閱Google Developers網絡基礎資源中描述的Critical Rendering Path。

來源

2015-12-15 02:43:49 boombox

在DOM中添加div可能會導致比瀏覽器解析更多的開銷。

display:none的隱藏元素與可見元素沒有區別，也不會因爲對佈局沒有任何影響而對性能產生正面或負面影響。另一方面，如果您使用visiblity:hidden，則瀏覽器必須爲其保留一個「框」，並且這會比較慢，因爲它會影響佈局。

來源

2015-12-15 02:29:45 ForguesR

嗯，不應該瀏覽器然後嘗試加載圖像，例如？ http://codepen.io/anon/pen/zrrGYE這支筆會嘗試加載圖像，正如我在開發工具中看到的那樣。這筆相同，我使用jQuery將圖像添加到DOM http://codepen.io/anon/pen/OMMVJK – Brettetete

根據此[答案]（http://stackoverflow.com/a/15346450/1980659 ）它不應該被加載。此外，如果您使用'display：none'，則不會重新繪製或重新排列布局。 – ForguesR

那麼，但它是加載在鉻，ff，即邊緣和歌劇：| – Brettetete

瀏覽器何時會解析隱藏的元素？

回答

相關問題