0

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

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

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

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

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

提前致谢。

4

2 回答 2

5

我做了这个测试：

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

测试如下：

数据集全部：

var data = el.dataset;

全部获取属性：

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 单：

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

在此处输入图像描述

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

于 2013-05-23T16:42:51.450 回答
3

只需对其进行基准测试：

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

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

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

于 2013-05-23T16:42:53.113 回答