3

ページで DOM セレクターの効率を評価する簡単な方法はありますか? 私の好奇心は jQuery で書かれたページから来ていますが、理想的にはもっと一般的なものを探しています (セレクターの効率は、それを見つけるために使用されるアプローチによって異なる場合があることを理解しています)。

これは、私がフォームを持っていた状況から来ました#myForm。<button class="button">

セレクターとして を使用していまし#myForm buttonたが、明らか#myForm .buttonに#myForm button.buttonと他のいくつかの代替手段を使用できました。

この例では違いは些細なものですが、最善のアプローチとそれに続く方法について一般的なコンセンサスがあるかどうか、組み合わせを試すためにある種のテスト ページをまとめて簡単に作成できる方法があるかどうか、疑問に思いました。これにより、セレクターをパフォーマンステストする方法がわからないことに気づきました。このタイプのアクションを実行するための優先ルートはありますか? どんな考えでも大歓迎です。

4

1 に答える 1

1

この記事による dom セレクターの順序: http://csswizardry.com/2011/09/writing-effective-css-selectors/

  • ID、例: #header
  • クラス (.promo など)
  • div などのタイプ
  • 隣接する兄弟、例えば h2 + p
  • 子、例: li > ul
  • 子孫、例えば ul a
  • ユニバーサル、つまり *
  • 属性、例えば [type="text"]
  • a:hover などの擬似クラス/要素

各セレクターをテストする方法を示すために、いくつかのセレクターの例を含む jsperf テキストを作成しました: http://jsperf.com/dom-selector-testing

これらの結果から、最も速いものから最も遅いものは次のとおりです。

  • getElementById
  • getElementsByTagName
  • getElementsByClassName // ie8 はこれをサポートしていません
  • クエリセレクター
于 2013-10-22T23:11:38.373 に答える