是否使用CSS生成的內容（即僞元素）比添加更多DOM元素更高效（即更快解析/渲染）？

爲了保持我的移動Web應用程序的精簡和高效，我試圖在任何給定時間限制DOM上元素的數量。我打算限制使用DOM元素的一種方法是使用僞元素:before和:after來儘可能生成內容。是否使用CSS生成的內容（即僞元素）比添加更多DOM元素更高效（即更快解析/渲染）？

例如，而不是表示與元數據的列表項是這樣的：

<dd class="item"> 
    <div class="name">Name</div> 
    <div class="desc">Description</div> 
    <div class="location">Location</div> 
    <div class="genre">Genre</div> 
</dd>

我可以表示它是這樣的（&使用content:屬性來顯示所述元數據）：

<dd class="child" 
    data-name="Name" 
    data-desc="Description" 
    data-location="Location" 
    data-genre="Genre"> 
</dd>

所以，一個DOM元素具有數據屬性而不是5個單獨的元素，可以說是更清晰的標記。
演示在這裏：http://jsfiddle.net/quc8b/2/

請問這種技術實際上提高性能？我的想法是，用更少的DOM元素，javascript應該更快地解析，我應該能夠更快地添加/刪除列表項節點。但是渲染（即繪畫，佈局，迴流）發生得更快嗎？換句話說，CSS生成的內容比傳統元素和文本節點更快或更高效地進行渲染/解析？

瀏覽器如何內部處理渲染樹和文檔樹中CSS生成的內容對我來說是未知的（陰影DOM可能？）。有沒有討論過這個問題的文章？

來源

2013-04-15 BigMacAttack

在DOM中不存在僞元素，直到CSS規則將其插入元素的前後。這意味着額外的DOM操作，儘管不需要額外的邏輯來匹配選擇器本身。 – ricardohdz

從語義上講，數據的兩種表示之間存在很大差異。第一個表示一個名稱，描述，位置和流派的定義。第二個表示一個定義。就是這樣。如果沒有別的，通過CSS呈現內容當然是不可訪問的。 –

@ricardohdz但是這種DOM操作方法比通過JavaScript處理更有效嗎？ – BigMacAttack

-2

請注意，這個答案在很多年前給出。下面列出的許多聲明不再有效。在提供應該可訪問的內容時，仍然不鼓勵使用僞元素。

我不知道僞元素的性能，但我擔心你把性能放在一切之上。相比，「真正的」 DOM節點時

僞元素具有顯着的缺點：

他們不能被轉移或動畫
不能使用Javascript
動態地改變其外觀它們對搜索引擎來說遠不那麼「重要」
它們在調試時很麻煩
它們的編號限制爲一個:before和一個:after元素
他們不能夠包含HTML標籤，例如鏈接或另外的容器
你傷害了
一些HTML的元素不能有僞元素的內容和外觀的分離的概念

如要進一步瞭解，請參閱Tag-Wiki

我敢肯定有更多。另一方面是某種性能提升，我相信這種提升可以忽略不計。

來源

2013-04-15 20:44:08 nirazul

在開發類似native的嵌入式web應用程序（這是我的用例），性能至關重要。如果整體技術可以使應用程序更具響應性，我願意容忍某些CSS可訪問性限制。 – BigMacAttack

是的，這並沒有回答這個問題。 –

他們可以轉換/動畫他們可以改變外觀使用JS（通過添加類/屬性，但它是可能的）。它們在調試時並不麻煩（曾用過谷歌Chrome開發者工具？）它們可以包含多個信息，單個：before或：after，所以每個都足夠了。這與內容和外觀問題沒有分離。此外，在許多情況下，性能至關重要，並且使用CSS將某些元素轉換爲有用的小部件比使用JS容易得多，而且您不需要清理它。 – Dracco

我也很想搞清楚這一點。所以我做了一個簡單的litte測試用例。

我創建了兩個html頁面。

僞變體： 50.000 paragraph節點

CSS：p:before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; content: ""; }

「多DOM元素」 -variant： 50.000  paragraph

CSS：.icon { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; }

I然後在我的Macbook Pro上運行Chrome Devtools Performance監視器幾次，然後觀察結果。

1. 我用「開始分析和重新加載頁面」來觀察解析和渲染花了多長時間。一般來說，「許多DOM元素」解決方案的速度大約爲300毫秒。例如在下面這個例子中，它花費了2452ms，而「僞」變量花了2033ms。試了幾次，大約有400毫秒的差異。

2.後的頁面已經完全載入我打「記錄」再次出現在性能監視器。使用窗口管理器（1.全屏模式，2.右半屏幕3.左半屏幕）改變瀏覽器窗口的大小3次，我只是改變了瀏覽器窗口的大小

在這種情況下「僞」變體總是大約慢了330毫秒，例如在下面的圖像中花了1463秒，而「許多DOM元素」只花了1136秒。

我還使用腳本和時間測量觸發使用document.body.offsetHeight;和前後記錄的時間迴流嘗試。但我只發現花了1到4毫秒，所以我懷疑它確實可以用來可靠地測量任何東西。可能需要更多元素或操作纔有用。

只是我想到的第一件事情的一個非常快速的測試。讓我知道是否還有其他東西我應該嘗試或測量:)

來源

2018-02-22 23:50:43 Drkawashima

是否使用CSS生成的內容（即僞元素）比添加更多DOM元素更高效（即更快解析/渲染）？

回答

相關問題