0

要素から複数の html5 データ属性を取得する必要があるユース ケースがあります。これは、多くの要素にわたるループ内で発生し、キャッシュのためにデータを配列にプッシュします。

いくつかの調査を行うとel.getAttribute('data-whatever')、ネイティブの html5datasetメソッドを使用するよりも高速に使用できるように見えますが、同じ要素から約 5 つの個別のデータ属性を取得する必要があります。

このdatasetメソッドを使用すると、1 回の呼び出しですべてのデータ属性を取得し、標準のオブジェクト ドット表記法 (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;

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/en-US/docs/Web/API/element.dataset

于 2013-05-23T16:42:51.450 に答える
3

ベンチマークするだけです：

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

getAttributeクロムで使用すると、それでも2倍高速に見えます。

noopJITがそれを最適化するのを防ぐためにaを使用しています。

于 2013-05-23T16:42:53.113 に答える