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

Question

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

从性能(而非可读性)的 Angular 来看，一个比另一个更好吗？

如果第一个更好，是否有人想要使用第二个，例如我需要将 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 元素时，这极不太可能重要。如果你没有陷入紧密的循环中，那并不重要。处理点击并不完全是性能关键的代码。

当您重复查询 DOM 时，就会出现差异，例如:

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

在那里，您无缘无故地强制在 DOM 中重复搜索具有类 foo 和 data-nifty 属性的所有元素。现在，除非这是在循环中，否则可能也不重要，但这正是您应该注意的地方。如果这三个方法都是可链接的，请编写一个链，或使用临时变量。

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

相反的情况也值得寻找:

$(".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 元素中查找任何没有 .hooked 的 .something，并且，如果找到了，向其添加一个点击处理程序。 (这显然是很人为的；我们会使用事件委托(delegate)来代替。但假设这是我们真正会编写的东西。)

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

在实践中，现代引擎有时可以“优化”闭包，释放理论认为它们需要保留的变量，如果它们能够向自己证明它们可以做到这一点而不会造成副作用。但在不需要的时候依赖它并不理想。在上面，您可以在末尾添加 $t = undefined; 或 $t = null; 来释放它引用的 jQuery 集。调用的上下文和 $t 变量可能仍会保留(除非 JavaScript 引擎优化)，但至少用于引用的 jQuery 集 $t 不会被保留.