jqueryセレクターエンジンsizzle_jqueryの簡単な分析

ごめんなさい、私はjqueryを1年ほど使っていますが、$(selector)しか知りません。内部セレクターの流れはまったくわかりません。そこで、jquery のソース コードを調べてみました。jquery で使用されているセレクター エンジンは、jquery の作者による別のオープン ソース プロジェクトであり、最速の dom セレクターとして知られています。コードは 2000 行未満です。

上記は、あまり刺激的な冒頭の文ではありません。例を挙げてみましょう。 $('.test') は jquery でどのように処理されますか?
1. まず次の判断をします

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

/ **
*querySelectorAll 関数について
* 現在のドキュメント内の特定のセレクターに一致するすべての要素を返します
*var nodelist = element.querySelectorAll("div.test");
* ブラウザー ie8 、Chrome をサポートします。 Firefox(3.5)
* よくわからない場合は、Google で調べてください
*/
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "

";
// Safari は、/ / quirks モードで。
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return
}
Sizzle = function( query, context , extra, seed ) {
//querySelectorAll を使用して
をクエリします}
}

ブラウザが ie8 または Google の場合は、組み込みの querySelectorAll を直接使用します(".test") は dom 構造体を返します。ie6 を使用している場合、次のことが起こります。
2. querySelectorAll がサポートされていない場合、次のプロセスが開始されます。

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

/**
.sizzle via
chunker = /((?:((?:([^()] )|[^()] ) )|[(?:[[^[]]*]|[ '"][^'"]*['"]|[^[]'"] ) ]|\.|[^ > ~,([\] ) |[> ~])(s*,s *)?((?:.|r|n)*)/g
この通常のルールは
に一致します。'.test' に渡したパラメーター '.test' と一致し、それを配列に入れます
。ブラウザが getElementsByClassName をサポートしているかどうかを確認します。サポートしている場合は、この関数を通じて dom を返します。ループした後、context.getElementsByTagName("*") を使用します。 className = 'test' の要素が配列に入れられ、dom に返されます。*/


わかりました、上記は $('.test' ) のプロセスです。混乱している場合は、ソース コードを見てデバッグできます。

シズル セレクターについて
個人的には、シズルだと思います。 querySelectorAll は 'div.test. :eq(1)' をサポートしていないため、selector は querySelectorAll 関数の拡張バージョンです。
nth|eq|gt|lt|first|last| のような文字の場合。偶数 | 奇数 は、右から左へ、いわゆる右から左へ、セレクターには表示されません。たとえば $('div img') は、最初にすべての imgs を選択し、親が div かどうかに基づいてそれらをフィルターします。 これが非常に効率的である理由は、DOM クエリが 1 つだけ実行されるためです。
「eq(1)」のような文字がセレクターに表示されると、左から右へ通常の順序になります。これは、結果セットをフィルタリングする必要があるためです。

思考
$('div img:eq(0)') と $('div img').first() ではどちらが効率的ですか? 個人的には、最初の左から右は効率が悪いので、後者の方が高いと思います！テストされていません!理論的導出！
今日はプロセスを簡単に見ましたが、具体的なコードについては詳しく調べていませんでした。ここでの良いアイデアは、学んで吸収する価値があります
Paizhuan へようこそ