Question

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

从进行一些研究看来，使用el.getAttribute('data-whatever')比使用本机html5 dataset方法更快，但我需要从同一元素中获取5个独立的数据属性。

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

如果使用非兼容属性，我当然可以简单地使用点表示法来访问加速此功能的属性。但是使用html5数据属性这不起作用（即el.data-无论什么总是未定义）。

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

提前致谢。

Answer 1

我做了这个测试：

测试如下：

数据集全部：

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');

enter image description here

Answer 2

只是基准测试：

在Chrome上使用getAttribute时，它看起来仍然快2倍。

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