jQueryのセレクタ：なぜ$（ "＃IDは"）である（ "P"）よりも速く$（ "＃IDがP"）

Question

このページの作成者を見つける：。http://24ways.org/2011/your-jquery-now-with-less-suckは、jQueryのセレクタ $('#id').find('p')が$('#id p')よりも高速であることを主張します私が正しく理解すれば、おそらく同じ結果が出るでしょう。この違いの理由は何ですか？ $('#id').find('p')が行うことに最適化されているので

Answer 1

...

document.getElementById('id').getElementsByTagName('p'); 

...私が利用可能な場合querySelectorAllを使用するか$('#id p')を推測しているのに対し、またはJavaScriptベースのセレクタエンジンではない場合。

---

パフォーマンスは常にブラウザによって異なります。オペラは、非常に高速のquerySelectorAllを持つことが知られています。

また、さまざまなバージョンのjQueryが異なる最適化を思いつくかもしれません。

$('#id p')は（または現在のところ）であり、最初のバージョンと同じ最適化が与えられている可能性があります。

Answer 2

jQueryが利用可能な場合は、querySelectorAllが使用されるため、ブラウザ固有です。私がWebKitでテストしたとき、それは確かに速かったです。この場合、querySelectorAllが最適化されています。

セレクタ全体が#<id>であり、そのIDを持つドキュメントに要素が1つしかない場合は、getElementByIdに最適化されています。しかし、セレクタが他のものであれば、querySelectorAllは一致する要素を探す文書を横断します。

もちろん、このケースを最適化して同じように実行することは可能ですが、今のところ誰も持っていません。 WebKitソースでhereが見つかり、SelectorDataList::executeがSelectorDataList::canUseIdLookupを使用してgetElementByIdを使用するかどうかを決定します。

if (m_selectors.size() != 1) 
    return false; 
if (m_selectors[0].selector->m_match != CSSSelector::Id) 
    return false; 
if (!rootNode->inDocument()) 
    return false; 
if (rootNode->document()->inQuirksMode()) 
    return false; 
if (rootNode->document()->containsMultipleElementsWithId(m_selectors[0].selector->value())) 
    return false; 
return true; 

あなたは非WebKitのブラウザでテストした場合、それは同様の最適化が不足している可能性があります：それはこのようになります。