从同一元素获取多个数据属性的最快方法是什么答案

【问题标题】：What is the fastest way to get multiple data-attributes from the same element从同一元素获取多个数据属性的最快方法是什么
【发布时间】：2013-05-23 16:33:12
【问题描述】：

我有一个用例需要从元素中获取多个 html5 数据属性。这发生在跨越许多元素的循环中，并将数据推送到数组中进行缓存。

通过一些研究，似乎使用el.getAttribute('data-whatever') 比使用原生html5 dataset 方法更快，但是我需要从同一个元素中获取大约5 个单独的数据属性。

dataset 方法允许您通过一次调用检索所有数据属性，然后使用标准对象点表示法（ dataset.index、dataset.whatever、dataset.somethingelse ）访问它们，而使用 getAttribute 我必须重复 getAttribute 调用以检索所有需要的数据。

如果使用不兼容的属性，我当然可以简单地使用点符号来访问属性，从而大大加快了这个功能。但是使用 html5 数据属性这不起作用（即 el.data-whatever 将始终未定义）。

我希望保持符合标准，因此我正在寻找检索这些多个数据属性的最快方法。

提前致谢。

【问题讨论】：

您可以在jsperf.com进行测试
从 DOM 节点获取属性似乎不太可能成为性能的焦点。您是否使用 Firefox 或 Chrome（或其他任何工具）分析您的代码以寻找“热点”？
@Pointy 是的，我已经详细介绍过了。这是一个非常不寻常的用例，因此这种优化是实际需要的。无论如何谢谢:)

标签： javascript html

【解决方案1】：

我做了这个测试：

http://jsperf.com/dataset-vs-getattribute-2

测试如下：

全部数据集：

var data = el.dataset;

getAttribute all：

var data = {
    id: el.getAttribute('data-id'),
    user: el.getAttribute('data-user'),
    dateOfBirth: el.getAttribute('data-date-of-birth')
};

单个数据集：

var user = el.dataset.user;

getAttribute single：

var user = el.getAttribute('user');

https://developer.mozilla.org/en-US/docs/Web/API/element.dataset

【讨论】：

我认为第一个例子是由JIT优化的，因为它没有副作用。
另外，您的getAttribute all 创建了一个对象。不太公平

【解决方案2】：

只需对其进行基准测试：

http://jsperf.com/dataset-access-vs-getattrb

在 chrome 上使用 getAttribute 看起来仍然快 2 倍。

我正在使用noop 来防止 JIT 对其进行优化。

【讨论】：

有趣的是，如果您只请求：el.dataset，它比获取所有属性快几倍 - 在 chrome 中。
正如你的板凳上所说，它没有副作用，只是被优化掉了。尝试使用函数调用。
@user1737909 好吧，我很困惑。 NULL 的答案非常明确，但您的结果似乎有所不同。如果您可以在答案中解释为什么您的结果是正确的，我将很乐意为您提供答案。干杯:)
我在最后一行说过：1) 我没有使用对象来存储它 2) 我正在使用 noop 函数来避免 JIT 优化访问（因为它没有副作用）。
另外，我正在比较访问 5 个属性和访问 5 个属性