在jquery中引用选择器比实际调用选择器更快吗？ 如果是这样，它会产生多大影响？

$(preview-button).click(...) $(preview-button).slide(...) $(preview-button).whatever(...) 

这样做是一种更好的做法：

 var preview-button = $(preview-button); preview-button.click(...); preview-button.click(...); preview-button).slide(...); preview-button.whatever(...); 

为了保持代码清洁和模块化，这可能是更好的做法，但它是否会在性能上有所不同？ 是否需要比另一个更长的时间来处理？ 多谢你们。

Answer 1

是的，当您使用选择器而不将其存储在变量中时，jQuery需要每次都解析DOM。

如果你有类似$(".class") jQuery每次使用它时都需要找到该类的元素，但如果它存储在变量中，它会使用变量中的唯一标识符。 无需查找。

所以是的，我完全建议将其存储到变量中。

更新：添加链接作为替代。

如果您只在一个地方使用选择器，您也可以进行链接 ，这意味着您使用相同的点表示法添加一个接一个的方法，如下所示：

 $(".class") .click(function(){ ... }) .mouseenter(function(){ ... }) .css( ... ); 

Answer 2

是。 你也可以把它链起来：

 $(preview-button) .click(...) .slide(...) .whatever(...); 

Answer 3

使用命名变量要快得多，而不是为每个动作传递一次jQuery选择器。 但是，正如已经提到的，在大多数情况下，链接是最佳解决方案。 你可以亲自看看。 这是我刚才做的一个测试：

更新：

显然，Firefox会进行某种缓存，而这三种情况的表现非常相似。 另一方面，与案例2和案例3（特别是数字或节点增加）相比，Chrome和Safari在案例1中的表现相当差。