为什么 Document.querySelector 比 Element.querySelector 更高效答案

【问题标题】：Why Document.querySelector is more efficient than Element.querySelector为什么 Document.querySelector 比 Element.querySelector 更高效
【发布时间】：2015-09-07 04:03:11
【问题描述】：

我进行了几次迭代的测试，以测试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

log 对我来说太棒了，因为我认为 Element.querySelector 只在元素的后代节点上查询，Document.querySelector 在当前文档的所有节点上查询，对吧？

为什么会得到这个结果？

【问题讨论】：

如果在表单中添加 1000 个兄弟节点，您可能会看到文档级别搜索的性能下降。
测试here，表明你的说法不正确
我不知道您的问题的答案，也不知道您的问题是否是一个好的基准，但每次调用 300 微秒的差异在现实生活中似乎并不值得担心。
是的，但是这个问题不是要求进行代码审查，也不是要求进行性能调整。它在问为什么一种方法比另一种方法快得多，这绝对是 SO 的范围。
因为他们并没有要求性能方面的帮助，所以他们说“函数 A 比函数 B 快，为什么？”。这就是这些功能如何实际工作的全部内容。这是一个SO类型的问题。我现在可以告诉你，这个问题将作为 Code Review 的题外话立即关闭。我们不做代码解释。

标签： javascript performance selector microbenchmark

【解决方案1】：

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

有一个关于这个问题的讨论（这仍然是当前的行为）here。您将在下面的代码示例中看到 span 被包含在内，因为它不能单独查询 foo 下面的项目。

Fiddle

代码：

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

【讨论】：