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 コードのパフォーマンスを最適化する鍵となります。

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

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

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


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


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


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

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

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

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