Question

考虑以下两部分脚本。第一行是较短的一行，并使用少一个变量$t，但是，将this再次转换为jQuery对象。

从性能（不可读性）的角度来看，是否优于其他？

如果第一个更好，是否有人想要使用第二个，例如我需要将this转换为jQuery对象一百次？在进行这种转变时是否有任何经验法则？

$(".click").click(function(){
    $('body').data('link',$(this));
    $("#dialog").data('id',$('#id').val()).data('status',$(this).text()).dialog("open");
});

$(".click").click(function(){
    var $t=$(this);
    $('body').data('link',$t);
    $("#dialog").data('id',$('#id').val()).data('status',$t.text()).dialog("open");
});

Answer 1

它可能更快，因为$()做了一些工作来弄清楚你给它的东西。当你给$()一个DOM元素时，极不太重要。如果你没有紧张的循环，那就不重要了。处理click并不是一个性能关键的代码。

当您反复查询DOM时，您会遇到差异，例如：

$(".foo[data-nifty]").doThis();
$(".foo[data-nifty]").doThat();
$(".foo[data-nifty]").doTheOther();

在那里，你强迫用DOM foo和data-nifty属性重复搜索所有元素的DOM。现在，除非它在一个循环中，它可能也没关系，但那是你应该注意的那种地方。如果所有三种方法都是可链接的，则编写一个链，或使用一个临时变量。

一般来说，编写可读代码，尽早测试，经常测试，当您看到真实的性能问题时，请处理它们。

反过来也需要寻找：

$(".foo").click(function() {
    var $t = $(this);
    $t.doThis();
    $t.doThat();
    $t.find(".something").not(".hooked").addClass("hooked").on("click", function() {
        // Do something here without using `$t`...
    });
});

在那里，我们在点击的.foo元素中查找没有.something的任何.hooked，如果找到，则为其添加点击处理程序。（这显然是非常人为的;我们会使用事件委托。但是假设它是我们真正写的东西。）

在理论中，如果有任何新的.something被挂钩，那么它们的事件处理程序将被保留，并且因为它是对该点击的上下文的闭包，所以{{1}变量保存在内存中，这意味着$t变量引用的内容也保存在内存中。因此，我们最终可能会使用比理想情况更多的内存。（由于$t中的DOM元素集不是我们需要保留在$t中的内容。）

在实践中，现代引擎可以并且有时会“优化”闭包，释放理论认为需要保留的变量，如果他们能够证明自己可以做到而不会产生副作用。但是当你不需要的时候依靠它并不理想。在上面，您可以在末尾添加$t或$t = undefined;以释放它引用的jQuery集。调用的上下文和$t = null;变量仍然可以保留（禁止JavaScript引擎优化），但至少用于引用的jQuery集$t不是。

Answer 2

显然，从性能角度来看，第二个例子更有效。

想象一下，你是一名建筑师，而且你正在修理破碎的天花板。您的第一个示例就像您在工具箱中需要的工具一样。第二个例子就像你的工具带上有工具一样，你不必爬下梯子拿到工具再爬起来。

是否应该间歇性地使用JavaScript局部变量来提高性能？

2 个答案: