爲什麼Document.querySelector比Element.querySelector更有效率

我做了一個測試，迭代次數很少，以測試Document.querySelector和Element.querySelector的效率。爲什麼Document.querySelector比Element.querySelector更有效率

標記：

<form> 
    <input type="text" /> 
</form>

腳本：

與Document.querySelector

begin = performance.now(); 

var 
    i = 0, 
    iterations = 999999; 

for (i; i < iterations; i++) 
{ 
element = document.querySelector('[type="text"]'); 
} 

end = performance.now(); 

firstResult = end - begin;

與查詢查詢

begin = performance.now(); 

var 
    i = 0, 
    iterations = 999999, 
    form = document.querySelector('form'); 

for (i; i < iterations; i++) 
{ 
element = form.querySelector('[type="text"]'); 
} 

end = performance.now(); 

secondResult = end - begin;

日誌：

console.log(firstResult); // 703.7450000001118 

console.log(secondResult); // 1088.3349999999627

的日誌是驚人的我，因爲我認爲，只有在節點上Element.querySelector查詢是元素的後裔和Document.querySelector查詢的所有節點上目前的文件，對吧？

爲什麼會得到這樣的結果？

來源

2015-09-07 Alexandre Thebaldi

如果添加了1000個兄弟節點的形式，你可能會看到文檔級搜索下降的表現。 –

測試[here]（http://jsperf.com/document-vs-element-queryselectorall-performance/3）顯示你的陳述是不正確的 – Tushar

我不知道你的問題的答案，或者你的問題是這是一個很好的基準，但每次調用300微秒的差別似乎不像現實生活中值得擔憂的事情。 – 2015-09-07 04:13:47

從我上面的評論中，選擇器考慮了整個文檔，然後過濾項目以檢查它們是否是目標的後代。所以很可能它仍然需要掃描整個DOM樹，如document.querySelector需要做的。

有一個問題的討論（這仍然是當前的行爲）here。您會在下面的代碼示例中看到跨度作爲結果包含在內，因爲它不能單獨查詢foo以下的項目。

Fiddle

代碼：

document.body.innerHTML = '<div><p id="foo"><span></span></p></div>'; 
var foo = document.getElementById('foo'); 
alert(foo.querySelectorAll('div span').length);

來源

2015-09-07 04:31:01

爲什麼Document.querySelector比Element.querySelector更有效率

回答

相關問題