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

在IE中，比较表达式沿以下行的执行速度：

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

非常相似

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

---

有时第二种变体运行得更快，有时更慢。速度差通常为2倍或更多。发生了什么？

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

在页面中查找所有锚定标记

只留下祖先

div.product

只留下那些有祖先的

div.gallery

第二个

查找具有class

.gallery

和tag

div

在其子代中搜索

div.product

在其子体中搜索定位标记

第一个将从右向左搜索元素，而第二个将从左向右搜索元素

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

如果要提高速度，请确保最右侧的选择器尽可能具体

e、 g:在这种情况下，您可以为锚定标记添加一个特殊类，如

.gallery-link

，然后您的查询将成为一个简单的

a.gallery-link

，它在IE中将为锚定标记调用

getElementsByTagName

函数，然后它们将根据其类名进行过滤。请注意，由于不必遍历DOM树，因此查询速度明显加快。成本稍微复杂一点。对于昂贵的查询，这可能是值得的