我应该将 jQuery 选择器组合到变量中以获得更好的性能吗？ [复制]

Posted 2023-03-05

【中文标题】我应该将 jQuery 选择器组合到变量中以获得更好的性能吗？ [复制]

【英文标题】：Should I combine jQuery selectors into variables for better performance? [duplicate]

【发布时间】：2012-10-01 16:06:22

【问题描述】：

可能重复：Does using $this instead of $(this) provide a performance enhancement?

所以我正在创建一个像画廊一样占据整个屏幕的剧院，我根据窗口大小更改 div 和图像的大小。为此，我一直在使用：

function setSizes()

var theaterHeight = $(".theater-wrapper").height();
var theaterWidth = $(".theater-wrapper").width();


$(window).on("resize", window, function() 
        setSizes();
    ); 

这基本上就是我选择元素以获取尺寸以设置高度和宽度等的操作，但是窗口调整大小确实有点滞后，我最终确实有很多选择器并且变化很大几个 div 和图像都在这个函数中，有时初始调用也不能正常工作，反之亦然。所以我的问题是组合选择器会带来更好的性能吗？

喜欢：

var $theaterWrapper = $(".theater-wrapper");

var theaterHeight = $theaterWrapper.height();
var theaterWidth = $theaterWrapper.width();

【问题讨论】：

为什么不直接尝试一下，或者用 jsperf 之类的网站测试一下？

是的，你应该输入更少的内容。

好的，谢谢，我使用了那个网站 j08691，在这种情况下，第二种方式的速度大约快了 20%。干杯。

我使用的 IDE (phpStorm) 看到你在一个函数中多次使用同一个 jQuery 选择器时会发出警告。

【参考方案1】：

这是一个 JSPerf，您可以按原样使用，也可以对其进行修改以更符合您的具体情况：

http://jsperf.com/combined-jquery-selectors

在我的浏览器（Mac 上的 Chrome）中，您的原始版本的运行速度比您建议的优化慢 4%。在我使用 Safari 的 iPhone 上，它慢了大约 6%。但在我 Mac 上的 Firefox 上，相差 14%。

所以看起来你提出的改进实际上更好。

【讨论】：

啊，是的，我在几分钟前自己做了自己的测试，但我只运行了你链接的那个，我的速度提高了 16%。 （Mac OS X Mountain Lion 上的 Firefox 15）

没有人提到的一件事是 jQuery 对最后使用的选择器进行了内部缓存，因此在其中混合更多选择器，您会注意到更高的百分比差异。

我也看到了对 Firefox 的更大影响。将修改答案。

【参考方案2】：

显然是这样，因为在后一种情况下，您遍历 DOM 一次..

如果您使用的选择器是静态选择器，则保存并存储选择器始终是更好的选择...

它还导致代码更小更精简。