我是否应该将jQuery选择器组合到变量中以获得更好的性能

Question

可能的重复项：
使用 $this 而不是 $（this） 是否可以增强性能？

所以我正在创建一个像剧院一样的照片库，占据整个屏幕，我根据窗口大小更改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();

Answer 1

下面是一个 JSPerf，您可以按原样使用或修改以更匹配您的具体情况：

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

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

因此，看起来您提出的改进实际上更好。

Answer 2

显然

确实如此，因为在后一种情况下，您遍历 DOM 的时间减少了一次。

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

此外，它还导致更小、更精简的代码。