javascript - getElementById 与 getElementsByClassName 与 querySelector 的性能

Question

我正在阅读 dev.mozilla 中有关 dom 操作的主题我遇到了一条建议我们使用 querySelector 进行元素选择的声明:

Note that, as with many things in JavaScript, there are many ways to select an element and store a reference to it in a variable. Document.querySelector() is the recommended modern approach...

然而，当我做了一个 test我意识到 getElementsByClassName() 是迄今为止最好的元素选择方法。怎么比 还快getElementById() ?为什么 Mozilla 开发指南仍然推荐使用 查询选择器() 即使它是其中最慢的一个？

Answer 1

document.querySelector的主要优势|是更复杂的 CSS 查询的易用性。

const loginFields = document.querySelector("form.login input");
if (loginFields.some((field) => field.value.trim() === "") {
    alert("Please fill in all fields");
}

另一种方法是使用 document.getElementsByClassName和 Element.getElementsByTagName .

const loginFields = document.getElementsByClassName(".login")[0]
    .getElementsByTagName("input");
if (loginFields.some((field) => field.value.trim() === "") {
    alert("Please fill in all fields");
}

您可能已经注意到，您通常会将返回结果存储到常量/变量中。你(通常)不应该在 for/while 循环中调用它。

关于 (archived) performance test ，这看起来很不公平，因为除了类 test 之外的所有测试都会运行两个查询。


所以我决定做更多的测试。在该页面的 HTML 中，我将 ID“codeOne”添加到第一个具有“code”类的元素中。

然后我进行了四次测试。

根据这些测试结果，我可以得出结论 getElementById 使用 id (691ms) 是 的明显赢家querySelector 使用 id (749ms) 排在第二位。这是因为 ID 易于查找 因为浏览器从 Internet Explorer 复制了此功能，这是过去最占主导地位的浏览器。您甚至可以像使用变量一样使用 id。

请不要这样做，因为它的可读性较差。它也不是更快。
当我们查看测试时 使用类 ，我们可以看到 之间的巨大性能差异getElementsByClassName (778ms) 和 查询选择器 (1460ms) .这是因为 前者只会寻找类名，而后者会做一些额外的检查因为它可以使用复杂的查询，例如“#id.class[attr="value"]”或“form > input”。

最后的结论是，您可以将 document.querySelector 用于一个元素，将 document.querySelectorAll 用于多个元素，只是为了简单起见，因为任何 CSS 查询都可以使用。函数 getElementById 和 getElementsByClassName(以及 getElementsByTagName，不包括在内)理论上应该总是更快，但实际上这不应该影响您网站的性能。您(可能)不会在循环中调用这些函数，因此您可以将结果存储在变量中。