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>

我可以像这样表示它（＆amp;使用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页面进行比较：

：一种。伪选择器： 50.000 paragraph个节点

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

<强> B中。 “额外DOM元素”： 50.000  paragraph

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

测试：

我每页使用Chrome Devtools Performance监视器3次（在2015 Macbook Pro上运行），这就是我发现的内容

使用“开始分析和重新加载页面” 选项B是失败者〜400ms。解析时间为2452ms，而“伪”变体需要2033ms。

为了测量重新布局性能，我在页面完全加载后开始单独录制。

我通过从全屏更改为半屏（使用Spectacle窗口管理器）将浏览器窗口调整了3次。

“许多DOM元素”获胜，渲染时间为1136毫秒，而“伪”变体则为1463毫秒。

然后我尝试使用使用document.body.offsetHeight;的脚本引起回流 - 但我发现它从未花费超过4毫秒......没有足够的时间来可靠地测量性能。显然，50.000个元素不足以导致该领域出现任何明显的放缓。

对我想到的第一件事情进行快速测试。如果还有什么我应该尝试或衡量的，请告诉我。）

Answer 2

请注意此答案是多年前提供的。下面列出的许多陈述都不再有效。在提供应该可访问的内容时，仍然不鼓励使用伪元素。

我不知道伪元素的性能，但我担心你把性能放在其他一切之上。

与“真正的”DOM节点相比，伪元素具有相当大的缺点：

他们无法转换或动画
您无法使用Javascript动态更改其外观
它们远不如搜索引擎“重要”
在调试方面它们很麻烦
他们的号码仅限于一个:before和一个:after元素
他们无法包含HTML标签，例如链接或其他容器
你伤害了内容和外观分离的概念
某些HTML元素不能包含伪元素

如需进一步阅读，请参阅Tag-Wiki

我确信还有更多。另一方面是某种性能提升，我相信，这种提升可以忽略不计。

使用CSS生成的内容（即伪元素）比添加更多DOM元素更有效（即解析/渲染更快）吗？

2 个答案:

测试：