從同一元素獲取多個數據屬性的最快方法是什么

Question

我有一個用例，需要從元素中獲取多個html5數據屬性。 這發生在許多元素之間的循環內，並將數據推入數組進行緩存。

通過進行一些研究，看來使用el.getAttribute('data-whatever')比使用本機html5 dataset方法要快，但是我需要從同一元素中獲取大約5個單獨的數據屬性。

dataset方法允許您通過一次調用檢索所有數據屬性，然后使用標准對象點表示法（dataset.index，dataset.whatever，dataset.somethingelse）訪問它們，而使用getAttribute則必須重復執行getAttribute調用才能檢索所有所需的數據。

如果使用不兼容的屬性，我當然可以簡單地使用點符號來訪問屬性，從而大大提高了此功能。 但是使用html5數據屬性將無法正常工作（即el.data-whatever始終未定義）。

我希望保持符合標准，因此我正在尋找最快的方式來檢索這些多個數據屬性。

提前致謝。

Answer 1

我做了這個測試：

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

測試如下：

數據集全部：

var data = el.dataset;

getAttribute全部：

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/zh-CN/docs/Web/API/element.dataset

Answer 2

只是基准它：

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

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

我正在使用noop來防止JIT對其進行優化。