10

我正在考虑使用 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左右。使用数据属性很容易抓取/抓取页面。

4

2 回答 2

21

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

数据属性不影响渲染树，因此对布局和绘制的影响为零。querySelector('div')性能也不会受到影响。这可能对性能产生的影响只是您将真相存储在 DOM 中，因此您将执行 DOM manip 来读取值。抓取元素以读取数据（使用elem.dataset）总是比从不在 DOM 上的结构中抓取数据要慢。因此，您可以使用 CPU 分析器或时间线来确定应用程序内 manip 的性能开销。真的取决于多少和多久。

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

所有这些事情都可以通过 Chrome DevTools 时间线来衡量。

于 2013-02-21T19:35:24.677 回答
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/

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

所以，在我看来，如果你对变量名有兴趣，如果你不关心 IE 中的一些问题（也许只有 IE7<，因为我认为在 9 和 8 中数据属性会起作用），使用数据属性将是一个不错的解决方案。关于性能，您可以尝试上面的链接并查看差异，但我认为最好将值存储在 Javascript 变量中的一致数据结构中。

于 2013-02-21T19:24:35.800 回答