使用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>。

第二种情况（存在attrs）可能会影响DOM /渲染性能，不是吗？如果是这样，多少钱？

为了澄清，我不打算单独使用数据属性，只是将它们暴露给第三方脚本或浏览器插件。考虑dotjs左右。使用数据属性，可以非常轻松地抓取/抓取页面。

Answer 1

这个原因的主要因素是解析HTML。这一时间被捕获并显示在Chrome DevTools时间轴中，但在很棒的方案中，它非常小。

数据属性不会影响renderTree，因此对Layout和Paint的影响为零。 querySelector('div')表现也不会受到影响。这个可能具有什么性能影响只是你在DOM中存储真相，所以你将使用DOM操作来读取值。抓取一个元素来读取数据（使用elem.dataset）将总是比从DOM上没有的结构中获取数据要慢。因此，您可以使用CPU分析器或时间轴来确定应用程序内操作的执行开销。真的取决于多少和多少次。

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

使用Chrome DevTools时间轴可以衡量所有这些因素。

Answer 2

对于数据属性，有两篇有趣的文章需要阅读：

1- https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/

• 与存储数据相比，读取数据属性的性能 JS数据仓库中的数据很糟糕。使用数据集甚至比使用数据集慢 使用getAttribute（）读取数据。
• 某些浏览器[IE]存在支持问题：http://caniuse.com/#feat=dataset
• 您可以在此处找到每个浏览器的效果指标：http://jsperf.com/data-dataset

2- http://html5doctor.com/html5-custom-data-attributes/

• 随着数据属性的广泛使用，可能会发生冲突 在命名约定变得更大
• 从性能的角度来看，通过访问DOM getAttribute（）显然比访问JS变量慢， 事件存储在一个数组中，所以你给一个JS游戏使用的用例 它可能永远不会发生存储值：开发人员会使用 它将信息从服务器传输到客户端，但一旦DOM已经存在 收获后，最好保留JS中的所有值以便更快地访问

所以，在我看来，如果你对变量名称有所了解，如果你不关心IE中的一些问题（可能只有IE7＆lt;，因为我认为9和8数据attr会起作用），使用数据attributs将是一个很好的解决方案。 关于性能，您可以尝试上面的链接并查看差异，但我认为将值存储在Javascript变量中的一致数据结构中更为合适。