html - 使用 html 属性的 DOM 惩罚

Question

我正在考虑使用 HTML5 数据属性来更轻松地为我的应用程序编写第三方脚本。因此，考虑两种情况:

1. 页面上有 10'000 个 HTML 元素，如 <div>Sticker</div> .
2. 还有其他 10,000 个 HTML 元素，例如 <div data-id="{{id}}" data-category="{{category-id}}">Sticker</div> .

第二种情况(属性的存在)可能会影响 DOM/渲染性能，不是吗？如果有，多少钱？

澄清一下，我不打算自己使用数据属性，只是将它们公开给第三方脚本或浏览器插件。考虑 dotjs 左右。使用数据属性，抓取/抓取页面非常容易。

Answer 1

这导致的主要性能命中是在解析 HTML 中。这个时间被捕获并显示在 Chrome DevTools 时间轴中，但在伟大的计划中，它相当小。

Data 属性不影响 renderTree，因此对 Layout 和 Paint 的影响为零。 querySelector('div') 性能也不会受到影响。这可能对性能的影响只是您将真相存储在 DOM 中，因此您将执行 DOM 操作以读出值。抓取一个元素以读取数据(使用 elem.dataset)总是比从不在 DOM 上的结构中抓取数据慢。因此，您可以使用 CPU 分析器或时间线来确定应用程序内 manip 的性能开销。实际上取决于数量和频率。

TL;DR:对渲染/滚动没有影响。对页面加载时间的影响极小。对运行时性能的影响很小。

所有这些都可以通过 Chrome DevTools Timeline 进行衡量。