Javascript doc.queryselectoral（'id元素'）与doc.querySelector（'id'）.queryselectoral（'element'）之间的性能；

我正在尝试查找具有以下内容的元素：

doc.querySelectorAll('#divContentList article');

它工作得很好，但另一位开发人员告诉我应该写：

doc.querySelector('#divContentList').querySelectorAll('article');

他说这样更好，因为它直接进入内容列表，然后查找文章元素

我不认为他的解决方案在速度性能方面是最好的，它会搜索元素两次。 我认为querySelectorAll足以胜任它的工作

---

主要问题是，哪一行代码总体上是最好的

您可以使用jsPerf进行此类测试

---

我已经为您的用例设置了一个简单的性能测试，它们的性能似乎相似，单个querySelector有时似乎更具性能，但我认为这在您的应用程序中根本不会是一个问题。

您可以使用jsPerf进行此类测试

---

我已经为您的用例设置了一个简单的性能测试，它们的性能似乎相似，单个querySelector有时似乎性能更高一些，但我认为这在您的应用程序中根本不会是一个问题。

这个问题的答案是：

方法1更快 方法2更快 没有区别 问题是答案可能会随着时间的推移而改变。浏览器供应商倾向于优化经常使用的方法。如果方法1被大量使用，它可能会更快，或者在将来更快

在给定的输入条件下，这两种方法对我来说似乎都是相同的。如果一个人应该更快有一个根本原因：使用更快的方法

由于您的第一个匹配项是一个id，因此始终只能有一个匹配项

---

如果您的查询是.parent.child，并且有许多家长没有孩子，那么.parent.child可能比.parent.qsa.child快。

此问题的答案是：

方法1更快 方法2更快 没有区别 问题是答案可能会随着时间的推移而改变。浏览器供应商倾向于优化经常使用的方法。如果方法1被大量使用，它可能会更快，或者在将来更快

在给定的输入条件下，这两种方法对我来说似乎都是相同的。如果一个人应该更快有一个根本原因：使用更快的方法

由于您的第一个匹配项是一个id，因此始终只能有一个匹配项

---

如果您的查询是.parent.child，并且有许多父级没有子级，那么.parent.child可能比.parent.qsa.child快。

queryselector所有计算结果都是从右到左的，因此第一个查询将查找页面上的所有文章，然后将其筛选到仅位于divContentList下面的文章。我会对id执行getElementById，然后在下面查找文章

---

但正如其他人所说，测试它。并在多个浏览器中进行测试。

queryselector all从右到左求值，因此第一个将查找页面上的所有文章，然后将其筛选到仅位于contentlist下面的文章。我会对id执行getElementById，然后在下面查找文章

但正如其他人所说，测试它。并在多个浏览器中进行测试。

多亏了他的jsPerf第一个示例：

正确，querySelectorAll从右向左求值

编辑：

我还发现querySelector和getElementById/getElementsByTagName有些不同。querySelector返回静态节点列表，而getElementById返回活动节点列表

我又做了一个 document.getElementById'divContentList'。getElementsByTagName'article'； 这个拿蛋糕。这种差异是荒谬的

多亏了他的jsPerf第一个例子：

正确，querySelectorAll从右向左求值

编辑：

我还发现querySelector和getElementById/getElementsByTagName有些不同。querySelector返回静态节点列表，而getElementById返回活动节点列表

我又做了一个 document.getElementById'divContentList'。getElementsByTagName'article'；

---

这个拿蛋糕。这种差异是荒谬的

当然，这是一个老问题，但偶然发现了这一点&感觉像是在权衡。在此之前，我想没有其他人深入研究过的一个重要问题是：这两种说法在技术上并不是同义词。这可以解释一般性能差异

最简单的例子就是YouTube。如果你看任何视频，你会发现他们实际上重复了ID和内容。在我尝试的第一个视频中，加载comments部分后，document.querySelectorAllcontent实际上返回了大约20个元素。这不符合标准，而且用户会告诉您这是无效的HTML。然而，浏览器仍然允许这样做，而不是直接拒绝或修改HTML

如果您的站点重复使用divContentList，您的声明将返回所有文章ele 来自他们所有人内部的信息；而您的同事只会返回它找到的第一个divContentList实例中嵌套的项目。这也许可以解释为什么你的同事通常表现得更快，见下文。正如大多数人已经指出的，用getElementById替换他/她的第一个querySelector在所有浏览器中可能会更快

除此之外，我同意一个普遍的观点，即如果你想知道某件事的表现：只需测量它。但要注意如何构建测试。我的建议是始终在实际用例的上下文中进行测试。有线程讨论了element.querySelector document.querySelector；然而，从最近的简短测试来看，我无法复制这一点

在所有情况下，在本页面上使用ID/类，如侧边栏和.question超链接document.querySelector.queryselectoral；优于文档。querySelectorAll“”

然而，我觉得这很关键，差别从来没有超过10-20%。在某一点上，问题变成了可读性/可写性与性能之间的权衡是否值得。如果您只运行此语句一到两次，则差异可能在微秒量级。对于一般用例，您的原始声明或同事的声明都可以

还有最后一点

我不认为他的解决方案在速度性能方面是最好的，它会搜索元素两次

---

如果你想读一读，你可以看看浏览器是如何为网页实现这些查找方法的。查看Firefox源代码，您会发现getElementById使用哈希表查找，这使得查找结果几乎是即时的。供应商之间的实现会有所不同，这就是为什么在许多不同的浏览器上测试站点可能很重要。

当然，这是一个老问题，但偶然发现了这一点&感觉像是在权衡。在此之前，我想没有其他人深入研究过的一个重要问题是：这两种说法在技术上并不是同义词。这可以解释一般性能差异

最简单的例子就是YouTube。如果你看任何视频，你会发现他们实际上重复了ID和内容。在我尝试的第一个视频中，加载comments部分后，document.querySelectorAllcontent实际上返回了大约20个元素。这不符合标准，而且用户会告诉您这是无效的HTML。然而，浏览器仍然允许这样做，而不是直接拒绝或修改HTML

如果您的站点重复使用divContentList，那么您的语句将返回所有内容中的所有文章元素；而您的同事只会返回它找到的第一个divContentList实例中嵌套的项目。这也许可以解释为什么你的同事通常表现得更快，见下文。正如大多数人已经指出的，用getElementById替换他/她的第一个querySelector在所有浏览器中可能会更快

除此之外，我同意一个普遍的观点，即如果你想知道某件事的表现：只需测量它。但要注意如何构建测试。我的建议是始终在实际用例的上下文中进行测试。有线程讨论了element.querySelector document.querySelector；然而，从最近的简短测试来看，我无法复制这一点

在所有情况下，在本页面上使用ID/类，如侧边栏和.question超链接document.querySelector.queryselectoral；优于文档。querySelectorAll“”

然而，我觉得这很关键，差别从来没有超过10-20%。在某一点上，问题变成了可读性/可写性与性能之间的权衡是否值得。如果您只运行此语句一到两次，则差异可能在微秒量级。对于一般用例，您的原始声明或同事的声明都可以

还有最后一点

我不认为他的解决方案在速度性能方面是最好的，它会搜索元素两次

---

如果你想读一读，你可以看看浏览器是如何为网页实现这些查找方法的。查看Firefox源代码，您会发现getElementById使用哈希表查找，这使得查找结果几乎是即时的。供应商之间的实现会有所不同，这就是为什么在许多不同的浏览器上测试您的站点非常重要。

您有没有测试过代码？您一定要测试它，但是doc.querySelector'divContentList'肯定会比getElementById慢。这几乎肯定不是应用程序中最慢的。不用担心。不管它值多少钱，如果可能的话，我会使用getElementById。请参阅此测试用例：您是否测试了代码？Y

---

您肯定应该测试它，但是doc.querySelector'divContentList'肯定会比getElementById慢。这几乎肯定不是应用程序中最慢的事情。不用担心。不管它值多少钱，如果可能的话，我会使用getElementById。看看这个测试用例：嘿，谢谢你的链接。你真棒！这将意味着两者之间存在差异。编写第一种方法比编写第二种方法小。在本例中，使用id和tagname.yup，这可能会根据选择器的复杂性以及DOM中的元素数量而改变：嘿，谢谢你的链接。你真棒！这将意味着两者之间存在差异。编写第一种方法比编写第二种方法小。在本例中，使用id和tagname.yup，这可能会根据选择器的复杂性以及DOM中的元素数量而改变：这些方法之间似乎有区别。这个答案归结为我不确定是否有一种方法更快，但如果有，那么你应该使用它这并不是很有帮助。这些方法之间似乎有区别。这个答案归结为我不确定是否有一种方法更快，但如果有一种，那么你应该使用它这并没有多大帮助。我用不在divContentList中的文章更新了测试用例。如果qsa从右到左计算，我预计单个qsa会慢得多，但事实并非如此。我们怎么解释呢？不知道怎么解释这个@Halcyon。4个月前我听说浏览器从右向左读取CSS。所以对于qsa，对我来说是一个确认，它也是。这意味着你从左到右写CSS的方式实际上是糟糕的CSS，对性能有影响。因此，拥有2个以上的CSS选择器实际上是不好的。或者定义html标记，例如section | |.main.section而不是.main section。让我觉得只有一个选择器可以控制所有这些内容。我用不在divContentList中的项目更新了测试用例。如果qsa从右到左计算，我预计单个qsa会慢得多，但事实并非如此。我们怎么解释呢？不知道怎么解释这个@Halcyon。4个月前我听说浏览器从右向左读取CSS。所以对于qsa，对我来说是一个确认，它也是。这意味着你从左到右写CSS的方式实际上是糟糕的CSS，对性能有影响。因此，拥有2个以上的CSS选择器实际上是不好的。或者定义html标记，例如section | |.main.section而不是.main section。让我觉得只有一个选择器才能控制一切。