javascript - IE 中非常相似的 jQuery 表达式之间的速度差异

Question

在 IE 中，按照以下方式比较表达式的执行速度

$('div.gallery div.product a");

非常相似

$('div.gallery').find("div.product").find("a");

有时第二个变体运行得更快，有时更慢。通常速度差异是 2 倍或更多。这是怎么回事？

Answer 1

第一个变体将执行以下操作:

1. 查找页面中的所有 anchor 标记
2. 只留下祖先 div.product
3. 仅保留祖先 div.gallery 的内容

第二个

1. 查找具有 .gallery 类和 div 标签的元素
2. 在其后代中搜索 div.product
3. 在其后代中搜索 anchor 标记

因此第一个将从右到左搜索元素，而第二个将从左到右搜索元素。

哪个更快取决于您的网站结构，但第一个是推荐方式，因为浏览器以相同的方式匹配 CSS 选择器。

如果您想提高速度，请确保最右边的选择器尽可能具体。

例如:在这种情况下，您可以为 anchor 标记添加一个特殊的类，例如.gallery-link，然后您的查询将变成一个简单的a.gallery-link在 IE 中，它将为 anchor 标记调用 getElementsByTagName 函数，然后它们将按其类名进行过滤。请注意，由于您不必遍历 DOM 树，因此您的查询速度会显着加快。成本是有点复杂的标记。对于成本高昂的查询来说，这可能是值得的。