javascript - これらのセレクターのどれがより速い可能性がありますか？

Question

実際にいくつかの質問、

次の2つが同じ結果セットを返すと仮定します

$("#MyTable tr");
$("tr", "#MyTable");

親子CSSセレクター規則を使用するか、代わりにセレクターにコンテキストを指定するかで、パフォーマンスに違いはありますか？

また、trがテーブルの直接の子になることを保証できるとすると、これは上記のパフォーマンスを改善しますか？

$("#MyTable>tr")

Answer 1

$("#MyTable > tr")テーブルの直接の子としてthead/tfootまたはtbodyのいずれかを使用する必要があるため、実際には機能しない場合があります。ff / chromeなどがあなたのためにtbodyを追加すると思うので、セレクターは

$("#MyTable > tbody > tr")

Answer 2

これら3つの中で最も速いのは次のとおりです。

$("#MyTable > tr")

IDによって要素参照の直接の子孫を選択しているので、選択はかなり直接的なものです。

編集：@redsquareは、FirefoxとChromeでは上記が機能しないことを指摘しています。これらのブラウザはtbody要素をテーブルに追加するためです。

コンテキストセレクターは基本的に「検索」に変換されるため、最初の2つのうち最も遅いものは次のとおりです。

$("tr", "#MyTable");

選択が行われる前に、次のように変換されます。

$('#MyTable').find('tr');

もちろん、それらを自分でベンチマークすることは、おそらくあなたにとって大きな利益になるでしょう。

SOで以前に尋ねられたいくつかの関連する質問は次のとおりです。

• jQueryセレクターのパフォーマンス
• jQueryセレクターのパフォーマンスを向上させる良い方法は？