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

Question

為了保持移動Web應用程序的精簡和高效，我試圖在任何給定時間限制DOM上的元素數量。 我打算限制DOM元素使用的一種方法是使用偽:before和:after元素在可能的情況下生成內容。

例如，與其用像這樣的元數據來表示一個列表項：

<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？）。 有文章討論嗎？

Answer 1

我也有興趣弄清楚這一點。 所以我做了一個簡單的測試案例。

我創建了兩個html頁面進行比較：

A.偽選擇器：

• HTML：其中50.000： <p>paragraph</p>

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

B.許多DOM元素：

• HTML：其中50.000： <p><span class="icon"></span> paragraph</p>

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

---

測試：

我使用了在2015 Macbook Pro上運行的Chrome Devtools性能監視器。

Test1：“開始分析並重新加載頁面”

選項B在約400ms內是失敗者。 解析耗時2452毫秒，而“偽”變體耗時2033毫秒。 我進行了三次測試，結果相似。

Test2：調整窗口大小

為了測量重新布局，我開始了一個單獨的記錄，在其中我通過從全屏更改為半屏（使用窗口管理器中的快捷鍵）將瀏覽器窗口調整了3次

“許多DOM元素”贏得了比賽，渲染時間為1136毫秒，而“偽元素”則花費了1463毫秒。

Test3：回流

我試圖通過使用這段Javascript測量頁面高度來引起重排： document.body.offsetHeight;

但這花了不到4毫秒的時間來執行...沒有足夠的時間來可靠地衡量性能。

顯然50.000個元素不足以導致該區域的任何顯着速度下降。

PS：測試選擇不是那么科學，只是我想到的第一個選擇

Answer 2

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

我不了解偽元素的性能，但我擔心您會將性能放在首位。

與“真實” DOM節點相比，偽元素具有相當大的缺點：

• 他們不能過渡或動畫
• 您無法使用Javascript動態更改其外觀
• 它們對搜索引擎的重要性遠不如“重要”
• 在調試時它們很麻煩
• 它們的數量僅限於一個:before和一個:after元素
• 它們無法包含HTML標簽，例如鏈接或其他容器
• 您傷害了內容和外觀分離的概念
• 某些HTML元素不能包含偽元素

有關更多閱讀，請參見Tag-Wiki。

我敢肯定還有更多。 另一方面，我認為這種性能提升是微不足道的。