我正在考虑使用 HTML5 数据属性来更轻松地编写我的应用程序的第三方脚本。因此，考虑两种情况：
- 页面上有 10'000 个 HTML 元素，例如
<div>Sticker</div>.
- 还有其他 10'000 个 HTML 元素，例如
<div data-id="{{id}}" data-category="{{category-id}}">Sticker</div>.
第二种情况（存在 attrs）可能会影响 DOM / 渲染性能，不是吗？如果有的话，多少钱？
澄清一下，我不打算自己使用数据属性，只是将它们公开给第三方脚本或浏览器插件。考虑 dotjs 左右。有了数据属性，就可以很容易地抓取/抓取页面。
这导致的主要性能影响是在解析 HTML 中。这个时间被捕获并显示在 Chrome DevTools 时间线中，但从整体来看，它相当小。
数据属性不影响渲染树，因此对布局和绘制的影响为零。querySelector('div')性能也不会受到影响。什么性能会影响这个could所拥有的只是您将真相存储在 DOM 中，因此您将执行 DOM manip 来读取值。抓取一个元素来读取数据（使用elem.dataset）总是比从不在 DOM 上的结构中获取数据要慢。因此，您可以使用 CPU 分析器或时间线来确定应用程序内 manip 的性能开销。实际上取决于多少和频率。
TL;DR:对渲染/滚动没有影响。对页面加载时间的影响极小。对运行时性能影响很小。
所有这些事情都可以通过 Chrome DevTools Timeline 来衡量。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
