2

私は、javascript セレクター エンジンを作成するという個人的なプロジェクトに取り組んでいます。エンジンは CSS2 - CSS3 構文を使用して要素ノードを選択します。エンジンの選択結果を他のセレクター エンジンの結果 (主に Sizzle) と比較していました。また、querySelectorAll (QSA) と呼ばれるネイティブのセレクター メソッドと比較しました。一つ違うことに気がつきました。

ドキュメントの HTML 構造は次のように単純です。

<code><span></span></code>

私が使用したセレクターは次のとおりです。

「スパン、コード」

Sizzle または QSA を使用して選択を実行すると、次のような結果が得られました。

[<code>...</code>, <span></span>]

セレクター エンジンを使用したときの結果は次のとおりです。

[<span></span>, <code>...</code>]

Sizzle と QSA は、ドキュメント上の要素の位置に従ってコレクションを並べ替えているようです。私のセレクターエンジンはそうしません。並べ替えは、compareDocumentPosition および Array 並べ替えメソッドを使用して実現できることがわかりました。まだテストしていませんが、明らかにこれはパフォーマンスに少し影響します。(ソース: http://ejohn.org/blog/comparing-document-position/ )。

ノードをソートすると、「ソートされていない」ノードよりも利点があるかどうか疑問に思っています。たとえば、要素が並べ替えられているときに、コレクションのノードに css スタイルを追加する方が効率的ですか (つまり、ループ内で)。ソートされたコレクションを使用する方が良い場合がありますか?

例 (elementNodes には選択結果が含まれます):

for (var i = 0, il = elementNodes.length; i < il; i++) {

 elementNodes[i].style.height = '100px';

 elementNodes[i].style.width = '100px';

 elementNodes[i].style.background = 'red';

}

4

1 に答える 1

0

まず、あなたがここで行っていることが気に入っています。特に、他のオープン ソース エンジンとの比較を行っている点が気に入っています。

実際には、両方の例の「並べ替え」が異なるだけです。

シズルと同じように並べ替える説得力のある理由 (私には思いつきません) が見つからない限り、それを行わないでください。自分のエンジンの順序を明確に理解し、他の人もそれを理解できる限り、それが最も重要です。

于 2012-05-21T16:29:24.137 に答える