11

最近、さまざまなセレクターエンジンの効率について読んでいます。私は、jQuery が Sizzle エンジンを使用していることを知っています。いくつかの jQuery に関するこのブログ投稿では、Sizzle エンジンがセレクターを配列に分解し、左から右に解析すると述べています。

次に、右から左へ、正規表現を使用して各項目の解読を開始します。これが意味することは、セレクターの一番右の部分は、ID やタグ名など、できるだけ具体的にする必要があるということです。

私の質問は、指定された ID またはタグ名だけでセレクターを実行する方が効率的かどうかです。

var div = $('#someId');
//OR
var div = $('div#someId');

div#someId私はセレクターを同じように行う傾向があるフォームで CSS を記述しているため、 Sizzle に余分な作業を実行させているのでしょうか ( QuerySelectorAllが利用できないと仮定して)。

4

6 に答える 6

15

jQuery と Sizzle は、#idセレクタ[ソース]を に最適化しdocument.getElementById(id)ます。でこのように最適化することはできないと思いますtag#id

最初のほうが速いです。

ところで、#idセレクターのタグ名を指定することは過剰指定です。ドキュメントには特定の ID を持つタグが 1 つしか存在できないためです。CSS であっても、指定しすぎると遅くなります。

于 2011-08-31T19:11:10.250 に答える
8

憶測するより測ってみよう!

このページをロードし、両方のメソッドでランダム要素を照合するテスト ケースを次に示します。

一番下までスクロールしてください。

http://jsperf.com/which-jquery-sizzle-selector-is-faster#runner

ご想像のとおり、プレーンな id は、タグ修飾されたものよりも高速です (getElementByID への削減)。これは、クラスを使用する場合も同じです。

ID による選択は、主に ID が一意であることが保証されているため、クラスによる選択よりも大幅に高速です。

于 2011-08-31T19:20:34.330 に答える
4

jQuery を使用している場合は、getElementById. $('#someId')に変換できますdocument.getElementById('someId')$('div#someId')ではないので、タグ名をなくした方が早いです。

これを示すjsPerf。違いは非常に大きいです。

于 2011-08-31T19:11:32.947 に答える
1
var div = $('#someId'); //should be faster

jQueryはgetElementById()上記のセレクターに使用します

var div = $('div#someId'); //would probably preform slower due to finding all the divs first

jQuery は を使用getElementsByTagName()し、上記のセレクターの要素の配列を反復処理します

また、タグ名はクラスセレクターで使用する必要があることも忘れないでください (可能な限り)。

var div = $('div.myclass') //faster than the statement below

var div = $('.myclass') //slower
于 2011-08-31T19:11:27.253 に答える
0

JsPerf: http://jsperf.com/jquery-id-vs-tagname-id

最初のものは、ID を確認するだけでよいため、高速になります。2 つ目は同じチェックを実行し、タグ名が正しいことを確認する必要があります。 div#idそれiddiv

于 2011-08-31T19:14:20.200 に答える
0

ここのソースコードから見ることができます:関数内のhttp://code.jquery.com/jquery-1.6.2.jsinit

最速のセレクターは$('')、空の jQuery オブジェクトをただちに返すものです。

$('body')次に、jQuery が変換するdocument.body

次は$('#id')、どちらを使うかdocument.getElementById('id')です。

などの他のセレクター$('div#id')は、 への呼び出しになり$(document).find('div#id')ます。find()これらの他のソリューションと比較して非常に複雑であり、Sizzle JS を使用して div を選択します。

于 2011-08-31T19:36:17.763 に答える