Почему Document.querySelector эффективнее Element.querySelector

Question

Я проверил несколько итераций, чтобы проверить эффективность Document.querySelector и Element.querySelector.

Markup:

<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; 

запросов сElement.querySelector

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 запроса на всех узлах текущий документ, не так ли?

Зачем нужен этот результат?

Answer 1

Из моего комментария выше, селектор учитывает весь документ, а затем фильтрует элементы, чтобы проверить, являются ли они потомками цели. Поэтому вполне вероятно, что все еще нужно сканировать все дерево 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);