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

【问题标题】：jquery class-selector vs qualified class-selectorjquery 类选择器与合格的类选择器
【发布时间】：2015-02-26 13:54:17
【问题描述】：

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

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

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

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

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

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

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

那么您对此有何看法？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：