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

Question

  

可能重复：
  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();

Answer 1

显然确实如此，因为在后一种情况下你正在遍历DOM 少一次。

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

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

Answer 2

这是一个JSPerf，你既可以按原样使用，也可以修改以更贴近你的特定情况：

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

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

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