Question

我正在使用jQuery 1.7.1

我正在尝试编写此代码以提高可读性和性能。在下面的两个案例中，哪一个表现更好，为什么？

// BLOCK ONE
var DivHeight = 0;
$(".PC_SeriesDiv").each(function() {
    var ThisDivHeight = $(this).height();
    if (ThisDivHeight > DivHeight) {
        DivHeight = ThisDivHeight;
    }
});
DivHeight = DivHeight + "px";
$(".PC_SeriesDiv").animate({height: DivHeight}, 250);

// BLOCK TWO
var DivHeight = 0;
var PC_SeriesDiv = $(".PC_SeriesDiv"); 
PC_SeriesDiv.each(function() {
    var ThisDivHeight = $(this).height();
    if (ThisDivHeight > DivHeight) {
        DivHeight = ThisDivHeight;
    }
});
DivHeight = DivHeight + "px";
PC_SeriesDiv.animate({height: DivHeight}, 250);

我的问题实际上归结为这样做是否有任何好处：

   var PC_SeriesDiv = $(".PC_SeriesDiv");

建议将不胜感激。谢谢！

Answer 1

是的，保持对jQuery集合的引用是一种性能提升。 Reference.

使用$为已保存的jQuery集合添加前缀已成为惯例，因此您可以这样做：

var $PC_SeriesDiv = $(".PC_SeriesDiv");

此外，如果HTML中具有PC_SeriesDiv类的所有元素都是相同类型（即<div> s），则使选择器为$("div.PC_SeriesDiv");更有效

Answer 2

最好在PC_SeriesDiv中缓存值，因为Block 1需要JQuery两次搜索DOM，Block 2更有效。

Answer 3

使用第二种方式（中间变量）将来会给你更大的灵活性 - 如果你改变了元素的名称，你只需要在处理它的代码中改变一个地方。在性能方面，我非常怀疑你能感觉到差异 - 在内部它被替换为参考或仍然非常微不足道。事实上，它可能会更快，因为您不需要再次进行查找。

以这种或那种方式编码是否有性能优势？

3 个答案: