jQuery コードの最適化 traversal_jquery

jQuery の DOM トラバーサルの背後にある動作メカニズムを理解すると、コードを記述するときに不必要な繰り返し操作を意識的に回避できるため、コードのパフォーマンスが向上します。この記事では、jQuery のトラバーサル メカニズムから始めて、jQuery コードの最適化の問題について簡単に説明します。

jQuery オブジェクト スタック

jQuery は、jQuery オブジェクト スタックを内部的に維持します。各トラバーサル メソッドは新しい要素のセット (jQuery オブジェクト) を見つけ、jQuery はその要素のセットをスタックにプッシュします。各 jQuery オブジェクトには、context、selector、prevObject の 3 つの属性があります。prevObject 属性は、オブジェクト スタック内の前のオブジェクトを指し、この属性を通じて、元の DOM 要素のセットに戻ることができます。

jQuery には、この内部オブジェクト スタックを操作するための 2 つの非常に便利なメソッドが用意されています。

.end()
.andSelf()
最初のメソッドを呼び出すと、単にポップアップが表示されます。オブジェクト (前の jQuery オブジェクトに戻ります)。 2 番目のメソッドの呼び出しは、より興味深いもので、スタック内の位置をバックトラックし、2 つの位置で要素セットを結合し、結合された新しい要素セットをスタックの先頭にプッシュします。

この DOM 要素スタックを使用すると、クエリとトラバーサル操作の繰り返しを減らすことができ、繰り返しの操作を減らすことが jQuery コードのパフォーマンスを最適化する鍵となります。

最適化例
以下はテーブル行ストライプ効果を実現する関数(前後のコードは省略)です:

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

function Stripe() {
$('#news').find('tr .alt').removeClass ('alt');
$('#news tbody').each(function() {
$(this).children(':visible').has('td ')
.filter(':group(3)').addClass('alt');
}

関数はID セレクターを 2 回 #news 要素を検索します。1 回はそのクラスを含む行から alt クラスを削除し、もう 1 回は新しく選択した行にクラスを追加します。

この関数を最適化するには 2 つの方法があり、1 つは連結です。


連結 連結の最適化では、jQuery の内部オブジェクト スタックと .end() メソッドを利用します。最適化されたコードは次のとおりです。

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

関数ストライプ() {
$('#news').
find('tr.alt').removeClass('alt').end()
find('tbody').each(function( ) {
$(this).children(':visible').has('td')
.filter(':group(3)').addClass('alt'); );
}


.find() への最初の呼び出しでテーブルの行がスタックにプッシュされ、次に .end() メソッドによってこれらの行がポップアウトされ、次の呼び出しが可能になります。 to .find() #news テーブルで操作を引き続き実行しています。これにより、2 つのセレクター検索が 1 つに減ります。

もう 1 つの最適化方法はキャッシュです。


キャッシュ
ここでのいわゆるキャッシュとは、将来の再利用のために以前の操作の結果を保存することです。最適化されたコードは次のとおりです。

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

var $ニュース = $( '#news');

関数 ストライプ() {
$news.find('tr.alt').removeClass('alt'); ').each (function() {
$(this).children(':visible').has('td')
.filter(':group(3)').addClass('alt ');
});
}


キャッシュ メソッドは、jQuery オブジェクトを保存するために追加の変数が作成されるため、もう少し冗長です。しかし、別の観点から見ると、このメソッドはコード内の選択された要素に対する 2 つの操作を完全に分離できるため、他の状況でのニーズを満たす可能性があります。同様に、選択した要素は stripe() 関数の外部に保存できるため、関数が呼び出されるたびにセレクターを繰り返しクエリする必要がなくなります。

結論

jQuery の内部オブジェクト スタックとキャッシュを使用すると、繰り返される DOM クエリとトラバーサルが削減され、スクリプトの実行速度が向上します。 ID に基づいてページ内の要素を選択するのは非常に高速であるため、最適化の前後で上記 2 つの例の間に明らかなパフォーマンスの違いはありません。実際のコーディングでは、最も読みやすく保守が容易な方法を選択する必要があります。実際にパフォーマンスのボトルネックが発生した場合は、上記の最適化手法を使用するとすぐに結果が得られる可能性があります。

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