首页 文章

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

提问于
浏览 次
15

为了使我的移动网络应用程序保持精简和高效，我试图在任何给定时间限制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可能？） . 有没有文章可以讨论这个问题？

css performance dom pseudo-element shadow-dom

2 回答

  • -3

    我也有兴趣搞清楚这一点 . 所以我做了一个简单的测试用例 .

    我创建了两个html页面进行比较：

    A. Pseudo selectors: 50.000 <p>paragraph</p> 个节点

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

    B. The "Extra DOM-elements": 50.000 <p><span class="icon"></span> paragraph</p>

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

    测试：

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

    Using the "Start profiling and reload page" 选项B是失败者〜400ms . 解析时间为2452ms，而"pseudo"变体需要2033ms .

    screenshot

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

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

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

    enter image description here

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

    只是对我想到的第一件事进行了非常快速的测试 . 让我知道，如果还有什么我应该尝试或衡量:)

    回复于
  • 4

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

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

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

    • 它们无法转换或动画

    • 您无法使用Javascript动态更改其外观

    • 它们远不如搜索引擎那么多_109939_

    • 在调试方面它们很麻烦

    • 他们的号码仅限于一个 :before 和一个 :after 元素

    • 它们无法包含HTML标签，例如链接或其他容器

    • 你伤害了内容和外观分离的概念

    • 某些HTML元素不能包含伪元素

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

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

    回复于

相关问题