Question

我有一个jQuery DOM元素node，我想从node搜索一些元素。我这里有两个解决方案

 1 : node.find('a,b,c,d,e').each(..)
 2 : node.find('a')...., node.find('b')....
 3 : node = jQuery([]).pushStack( node.find('a,b,c,d,e') ) etc..

哪一个更适合大DOM元素。我正在寻找速度。

Answer 1

问题有点宽泛，但这是我对所发布代码的分析。

选项3只是一个更冗余的选项1：$.fn.find已经返回一个jQuery对象，没有必要将其分解并将其元素添加到另一个jQuery对象。

当您对每个元素做出完全不同的事情时，选项2很好：

node
  .find('a').doThis().end()
  .find('b').doThat();

请注意，.end()最有可能比再次使用node.find()慢 - 变量查找通常比函数调用更快，但接下来我们讨论的是微秒。

我认为选项1的性能最佳，因为它只会执行单个DOM查询。

请注意，如果您在没有特定于元素的逻辑的情况下应用简单方法，则不需要.each()，因此您可以选择4：

 node.find('a,b,c,d,e').doSomething();

也就是说，jQuery执行隐式迭代，将doSomething应用于每个匹配的元素。

除非在巨大的循环中应用，否则所有这些都将具有不明显的性能差异。 jsPerf是运行性能测试的工具，但请注意，现代JS引擎（如V8）在优化重复行为方面做得非常好。

另外，请记住“过早优化是所有邪恶的根源”。处理性能问题，因为它们变得明显。不要牺牲微秒的可读性。在部署之前，您可以使用Closure Compiler之类的优化工具来获得一些微/毫秒的性能。