css - 使用 CSS 生成的内容(即伪元素)是否比添加更多 DOM 元素更有效(即解析/渲染速度更快)？

Question

为了让我的移动网络应用程序保持精简和高效，我试图在任何给定时间限制 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: ""; }

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; }

---

测试:

我使用了在 2015 Macbook Pro 上运行的 Chrome Devtools 性能监视器。

测试 1:“开始分析并重新加载页面”

选项 B 输了大约 400 毫秒。 解析花费了 2452 毫秒，而“伪”变体花费了 2033 毫秒。 我进行了三次此测试，结果相似。

测试2:调整窗口大小

为了测量重新布局，我开始了一个单独的记录，通过从全屏更改为半屏(使用窗口管理器中的快捷键)将浏览器窗口的大小调整了 3 次

“许多 DOM 元素”是赢家，渲染时间为 1136 毫秒，而“伪元素”则为 1463 毫秒。

测试 3:回流

我试图通过使用这段 Javascript 测量页面高度来引起回流:document.body.offsetHeight;

但执行时间从未超过 4 毫秒……没有足够的时间来可靠地衡量性能。

显然 50.000 个元素不足以导致该区域的任何显着减速。

PS:选题不是很科学，刚好是我第一个想到的