Question

我进行了一次测试，只有几次迭代来测试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，正确？

为什么会得到这个结果？

Answer 1

从上面的评论中，选择器会考虑整个文档，然后过滤项目以检查它们是否是目标的后代。因此，它可能仍然需要像Error calling GET https://www.googleapis.com/tagmanager/v1/accounts/accountId/containers: (404) Not found or permission denied那样扫描整个DOM树。

讨论了这个问题（仍然是当前的行为）here。您将在下面的代码示例中看到，结果中包含了跨度，因为它不能单独查询200 OK下面的项目。

Fiddle

代码：

document.querySelector

为什么Document.querySelector比Element.querySelector

1 个答案: