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

Question

在IE中，比较表达式的执行速度

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

非常相似

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

有时第二种变体运行得更快，有时更慢。通常速度差异是2或更大的系数。发生了什么事？

Answer 1

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

1. 查找页面中的所有锚标记
2. 只留下具有祖先div.product
的那些
3. 只留下具有祖先div.gallery
的那些

第二个

1. 查找包含课程.gallery和标记div
的元素
2. 在其后代中搜索div.product
3. 在其后代中搜索锚标记

所以第一个将从右到左搜索元素，而第二个将从左到右搜索它们。

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

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

例如：在这种情况下，您可以为.gallery-link等锚标签添加一个特殊类，然后您的查询将成为一个简单的a.gallery-link，在IE中将调用getElementsByTagName函数然后，他们将按类名过滤它们。请注意，因为您不必遍历DOM树，所以查询变得更快。成本是一个更复杂的标记。对于昂贵的查询，它可能是值得的。