jQuery selector_jqueryの動作原理と最適化分析-jsチュートリアル-php.cn

jQuery selector_jqueryの動作原理と最適化分析

WBOY

リリース： 2016-05-16 18:04:37

オリジナル

1149 人が閲覧しました

jQuery オブジェクトが宣言されるたびに、jQuery.prototype.init オブジェクトが返されます。多くの人は、init が明らかに jQuery.fn のメソッドであることを理解していません。実際には、これはメソッドではなく、init のコンストラクターです。 js のプロトタイプオブジェクトは継承できます。また、js のオブジェクトは参照のみであり、新しい jQuery、新しい jQuery.fn、および新しい jQuery.fn.init のサブオブジェクトは同じです。ここではその理由については説明しませんが、これが当てはまる理由については次の記事で説明します。
セレクター $(selector,content) を使用すると、init(selectot,content) が inti でどのように実行されるかを見てみましょう:

Copy code コードは次のとおりです:

if ( typeof selector == "string" ) {
//通常のマッチング、HTML コードかどうかを確認します。または Is #id
var match =quickExpr.exec( selector );
//DOM 要素セット、ドキュメント、または jQuery オブジェクトが見つかりません。
//セレクターは #id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array) の形式です。
//HTML コード、clean を呼び出して HTML コードを完成させます。
if ( match[1] ){
selector = jQuery.clean( [ match[1] ],
}
/ / はい: $("#id")
else {
//ID の Dom がロードされているかどうかを判断します
var elem = document.getElementById( match[3] ); if ( elem ){
if ( elem.id != match[3] )
return jQuery().find( selector );
return jQuery( elem ); // 実行完了 return
}
selector = [];
}
//非 ID 形式でコンテキストまたは全文を検索します
} else{
return jQuery( context ).find( selector ); 🎜> }
}

これは、$('#id') として記述されたセレクターのみが最も高速であることを意味します。これは getElementById を 1 回実行するのと同等であり、後続のプログラムは必要ありません。再び処刑されることになる。もちろん、多くの場合、必要なセレクターはそれほど単純ではありません。たとえば、id の下の CSS を className にする必要があります。$('#id.className') や $('#id') などの記述メソッドがあります。 find('.className' );両方の書き込みメソッドの実行結果は同じです。たとえば、

は必ず返りますですが、実行効率が全く違います。

上記のコードを分析した後、$('#id') のような単純なセレクターではない場合、find 関数が実行されます。

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

find: function( selector ) {

//現在のオブジェクトを検索
 var elems = jQuery.map(this, function(elem){ 
return jQuery.find( selector, elem ); 
}); 次のコードは無視できます。処理を実行します。 🎜>//ここでは js 通常オブジェクトの静的メソッドのテストが適用されます 
//indexOf("..") に含まれる親ノードの記述方法を決定するための xpath の構文を理解する必要がありますセレクター 
//本来の目的は配列の繰り返し要素をフィルターすることです 
return this.pushStack( /[^ >] [^ >]/.test( selector ) || selector.indexOf ("..") > -1 ? 
 jQuery.unique( elems ) : 
} 

 
 $('#id .className) ') このように、拡張 find('#id .className',document) は、現在の this がドキュメントの jQuery 配列であるため、拡張 find の実装を検討しています。コードがたくさんあるので、それを見ていきます。つまり、2 番目のパラメータから渡された dom です。子ノードの検索を開始し、ID を比較し、ClassName を比較します。< 処理を待ちます。 それでは、最適化したい場合は、走査がほとんどなくなるように、2 番目のパラメーターのコンテキストの範囲を最小限に抑える方法を見つけるべきでしょうか? 
$('#id').find('.className') をこのように書くと、プログラムは最初の init 時に getElementById を実行してから戻ります。次に、find('.className', divDocument) を実行します。 divDocument は、初めて選択する div タグです。ドキュメントの下に多数の DOM オブジェクトがある場合、今回は divDocument のみを走査する回数が大幅に減ります。 、最初に ID を選択する速度も、横断するよりもはるかに高速です。 
もう誰もが理解するはずです。つまり、最初のレベルの選択は ID を使用するのが最適ですが、今回は範囲の定義とその他の最適化を目的としています。については次回説明します。