在JQuery中查找节点的成本是多少？

我总是保存find()的结果，以避免多次子树遍历，如果我需要多次值：

 var $a_bar = $('div.foo').find('a.bar'); $a_bar.removeClass(...); // ... code here $a_bar.bazz(); 

代替

 $('div.foo').find('a.bar').removeClass(...); // ... code here $('div.foo').find('a.bar').bazz(); 

我想知道它是不是微优化……那么在JQuery中查找节点的成本/复杂度是多少？

Answer 1

你可以在js perf上测试它： http ： //jsperf.com/只需创建一个测试并运行它。

我在这里创建了一个小测试： http ： //jsperf.com/jquery-find55

在我的浏览器上（firefox 18）：

• 测试1（我保存查找结果）得分为7,074次操作
• 测试2（我不保存查找结果）得分为1,553次操作

所以，是的， find是“慢”，将它存储在变量中绝对是一个好主意。

Answer 2

如果您要多次重复使用变量，那么像您一样cache它们绝对是一个好主意。

.find()在你之前传递的jQuery对象中遍历，所以它只查看已经给出的内容，使得它非常快。

 var $mainElement = $('#whatever'), $innerLIs = $mainElement.find('li'), $innerTDs = $mainElement.find('td'); // Now that these are cached in memory, doing anything to them is very quick $innerLIs.hide(); // etc etc 

如果我们一直在查询它们，那么每次都必须查看DOM。 一旦完成，它每次都会将它包装在jQuery对象中。

Answer 3

众所周知，jQuery的选择成本.find ，然后运行.find更是如此。 缓存对象绝对是一个好主意，从干燥的角度来看也具有风格上的优势。

Answer 4

如果你多次操纵相同的东西 – 最好做一个变量。

这样你只是操纵而不是每次都先查找它。

我删除了关于缩短代码的声明 – 这是关于jQuery选择器和“从右到左”思考的网络文章