javascript - 为什么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;

使用 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在当前文档的所有节点上查询，对吗？

为什么会得到这个结果？

最佳答案

根据我上面的评论，选择器考虑了整个文档，然后过滤了项目以检查它们是否是目标的后代。因此，很可能仍然需要像document.querySelector一样扫描整个DOM树。

讨论了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);

关于javascript - 为什么Document.querySelector比Element.querySelector更有效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32430923/