j查询选择器优化

jQuery selector optimization

本文关键字：优化 选择器 查询      更新时间：2023-09-26

在选择器的右侧要具体，在左侧要不那么具体。

// unoptimized
$('div.data .gonzalez');
// optimized
$('.data td.gonzalez');

报价来源

  1. 有人可以解释为什么不太具体的左边作为CSS选择器更快吗？

  2. 这是嘶嘶声的事情还是同样适用于document.querySelectorAll？

    3. 在 CSS

  3. 文件中使用"类似优化"的 CSS 选择器是否有任何速度提升？

jQuery的Sizzle引擎从右到左解析选择器，所以这是真的。但也有一些例外，例如，当第一个操作数是 ID 时。然后，搜索将在具有此 ID 的元素的上下文中运行。这是 Sizzle Engine 的一个特点，但我不知道 querySelectorForAll 是如何实现的。

举个例子： 

$('div.data .gonzalez');
嘶

嘶声将获取带有类冈萨雷斯的所有 DOM 元素，然后检查每个元素的祖先是否是带有类数据的div 标签

这本书顺

便提到了这一点，但我相当确定建议是特定于 Sizzle（jQuery 选择器引擎）的，而不是一般的。您的里程可能会有所不同，但实现querySelectorAll的浏览器不太可能显示现实世界的差异。

嘶嘶声在

适当的时候由内而外工作，因此可能会寻找td.gonzales，然后查看它是否在.data内，而不是相反。我记得当Sizzle第一次出现时，这有点令人惊讶，但实际上效果更好。因此，您可以看到为什么后代选择器的右侧越具体越好。

这是一个测试用例，在IE7中尝试一下，你会看到对更具体的右侧的明显偏好。但是在现代浏览器中尝试一下，您似乎基本上没有区别。

不过，这都是微优化，在没有实际问题需要解决的情况下几乎毫无用处，因为它会根据页面上的元素而有很大差异。记住您是否实际上有一个缓慢的选择器导致您在旧浏览器上遇到麻烦很有用，但除此之外......

相关文章：