jquery 类选择器与合格的类选择器

Posted 2023-05-09

【中文标题】jquery 类选择器与合格的类选择器

【英文标题】：jquery class-selector vs qualified class-selector

【发布时间】：2015-02-26 13:54:17

【问题描述】：

我目前正在撰写关于 Web 性能的学士论文，刚刚发现了一些我没有预料到的结果。

正如 Paul Irish 或 jquery 本身所建议的，最好从 id 继承。

http://learn.jquery.com/performance/optimize-selectors/

所以我预计 $('.class') 应该比 $('#id class') 或 $('#id').find('.class') 慢。

我在 jsperf 上对其进行了测试，得到了一个非常有趣的结果：

http://jsperf.com/selektor/2

看起来它真的取决于浏览器，但我真的没想到 $('.class') 表现得这么好，特别是在 Chrome 上它比那些从 id 下降的人快得多。

下面的解释对我来说很有意义，但为什么这些浏览器的差异如此之大。引擎有那么不同吗？

不同之处在于，当使用单个类或 id 查找时，可以使用 getElementsByClassName 和 getElementById，它们比 querySelector 快得多。您会发现它在现代浏览器中的速度提高了 10 倍。

来源：http://jsperf.com/jquery-class-vs-tag-qualfied-class-selector/38

那么您对此有何看法？

【问题讨论】：

这（强烈）表明现代浏览器也缓存类条目（以及它们通常的快速 ID 查找表）。任何额外的代码开销（添加 id 搜索）都会减慢它的速度。很高兴知道。

添加了对下面唯一真正问题的答案，因为您已经暴露了一条非常有用的信息。 +1 :)

【参考方案1】：

回答您问题中唯一真正的问题：“以下解释对我来说有意义，但为什么这些浏览器的差异如此之大。引擎是否如此不同？”

答案当然是“是”。这三种浏览器都源于不同的代码库，不同的编码方法会导致速度差异很大。例如“向 3 位程序员询问解决方案，您将获得 3 种不同的解决方案”:)

需要注意的最重要的事情是 class only 搜索实际上在现代浏览器上非常快，尽管有相反的建议。添加额外的检查（甚至是 ID 选择器）只会减慢类搜索。这意味着大多数（如果不是全部）现代浏览器都会保留类与元素的缓存。这可能是为了加快 CSS 处理速度，但副作用也是基于类的快速搜索。