10

アプリケーションのサードパーティのスクリプト作成を容易にするために、HTML5 データ属性を使用することを考えています。したがって、次の 2 つのケースを考えてみましょう。

  1. のようなページには 10,000 個の HTML 要素があります<div>Sticker</div>。
  2. のような他の 10'000 HTML 要素があります<div data-id="{{id}}" data-category="{{category-id}}">Sticker</div>。

2 番目のケース (attrs の存在) は、おそらく DOM/レンダリングのパフォーマンスに影響しますね。もしそうなら、いくらですか？

明確にするために、データ属性を自分で使用する予定はなく、サードパーティのスクリプトまたはブラウザー アドオン用に公開するだけです。dotjs などを検討してください。データ属性を使用すると、ページのスクレイピング/クロールが非常に簡単になります。

4

2 に答える 2

21

これが引き起こす主なパフォーマンス ヒットは、HTML の解析にあります。この時間はキャプチャされ、Chrome DevTools のタイムラインに表示されますが、全体としては非常に小さいものです。

データ属性は renderTree に影響を与えないため、レイアウトとペイントへの影響はゼロです。querySelector('div')パフォーマンスにも影響はありません。これがパフォーマンスに与える可能性のある影響は、DOM に真実を保存しているため、値を読み取るために DOM 操作を行うことです。要素を取得してデータを読み取る ( を使用elem.dataset) ことは、DOM 上にない構造からそのデータを取得するよりも常に遅くなります。したがって、CPU プロファイラーまたはタイムラインを使用して、アプリ内の操作のパフォーマンス オーバーヘッドを確認できます。どのくらい、どのくらいの頻度で本当に依存します。

TL;DR:レンダリング/スクロールへの影響はありません。ページの読み込み時間への影響を最小限に抑えます。実行時のパフォーマンスへの影響はわずかです。

これらはすべて Chrome DevTools タイムラインで測定できます。

于 2013-02-21T19:35:24.677 に答える
2

データ属性については、読むことが重要な興味深い記事が 2 つあります。

1- https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/

  • このデータを JS データ ウェアハウスに格納する場合と比較して、データ属性の読み取りのパフォーマンスは良くありません。データセットの使用は、getAttribute() でデータを読み取るよりもさらに遅くなります。
  • 一部のブラウザ [IE] にはサポートの問題があります: http://caniuse.com/#feat=dataset
  • ここでは、各ブラウザーのパフォーマンス測定値を見つけることができます: http://jsperf.com/data-dataset

2- http://html5doctor.com/html5-custom-data-attributes/

  • データ属性がより広く使用されるようになるにつれて、命名規則の衝突の可能性がはるかに大きくなります
  • パフォーマンスの観点からは、 getAttribute() を介して DOM にアクセスするのは、配列に格納されたイベントである JS 変数にアクセスするよりも明らかに遅いため、値を格納するためにそれを使用する JS ゲームのユース ケースはおそらく発生しません。開発者はこれを使用してサーバーからクライアントに情報を送信しますが、DOM が収集されたら、すばやくアクセスできるようにすべての値を JS に保持することをお勧めします

したがって、私の意見では、変数名に注意を払っている場合、IE のいくつかの問題を気にしない場合 (おそらく IE7< のみ、9 と 8 のデータ属性が機能すると思うため)、使用するデータ属性は次のようになります。いい解決策です。パフォーマンスについては、上のリンクを試して違いを確認できますが、Javascript 変数に一貫したデータ構造で値を格納する方がよいと思います。

于 2013-02-21T19:24:35.800 に答える