jQuery コードの最適化 selector_jquery

この記事では、セレクターの観点から jQuery コードの最適化の問題について簡単に説明します。

Sizzle の動作メカニズム

jQuery 1.3 から、Sizzle エンジンであるセレクター式に基づいて要素を検索するコードが分離されました。セレクター式 (「#id」、「.class」、「:nth-child(2)」など) を $() 関数に渡すと、Sizzle はブラウザーでネイティブにサポートされている DOM メソッドを内部的に優先的に使用します。最大の実行速度を実現する要素を見つけます。以下は、Sizzle が優先的に使用するいくつかの標準ネイティブ メソッドです (各メソッドの目的については詳しく説明しません):

コードをコピー コードは次のとおりです。

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()

ブラウザがメソッドをサポートしている場合、または受信セレクター式が標準セレクター (「:eq()」、「:odd」、その他のカスタム セレクターなど) ではない場合、Sizzle は document.getElementsByTagName('*') を使用して要素を取得しますループして各要素をテストする前に、すべての要素を文書化します。明らかに、これは最後の手段としてのみ使用すべき方法であり、この最も愚かな方法は最も効率が低いことも考えられます。

最適化の例
たとえば、ページ フォーム内のすべてのテキスト ボックスを取得するとします。

はい 2 つのセレクターを使用します:

コードをコピーします コードは次のとおりです:

$(' input[type ="text"]')
$('input:text')

最初のセレクターは標準の CSS 属性セレクターで、2 番目のセレクターはカスタム セレクターです。 Sizzle エンジンの以前の分析によると、ほとんどの最新のブラウザー (ネイティブの querySelectorAll() メソッドをサポートするブラウザー) では、最初のセレクターは 2 番目のセレクターよりもはるかに高速です。

別の例を挙げてみましょう。次の 2 つの jQuery クエリがあるとします。

コードをコピーします コードは次のとおりです:

$('input ').eq(1)
$('input:eq(1)')

最初のクエリは、まず標準の CSS 要素セレクターを通じてすべての入力要素を検索します。 jQuery の eq() メソッドを呼び出し、一致結果の 2 番目の要素を取得します (eq() メソッドのインデックス パラメーターは 0 から計算されます)。 2 番目のクエリは、カスタム疑似クラス セレクター eq() を使用します。テストから、最初の方法が 2 番目の方法よりもはるかに高速であることがわかります。

結論
標準セレクターがない場合は、可能な限り CSS 仕様で指定されているセレクターを使用することを検討してください。

(注: この記事は、『JQuery 基礎チュートリアル (第 3 版)』の関連する章に基づいています。)