2

我的一个朋友（他比我更擅长 javascript）最近帮我优化了一些代码，他提到的其中一件事可能会有所帮助，那就是调用外部函数而不是使用作用域函数。但是，看起来这实际上似乎对性能没有太大影响。任何更熟悉javascript内部工作原理的人会解释为什么会这样吗？有任何理由使用一种方法而不是另一种方法吗？

我的意思是，这个：

function showI(e) {
    var iVal = $(e).attr('iteration');
    var iValx99 = iVal * 99;
    var iValx999 = iVal * 999;
    alert(iVal + ' // ' + iValx99 + ' // ' + iValx999);
}
var element;
for (var i = 0; i < 50; i++) {
    element = $('<div />', {
        'class': 'iteration',
        'iteration': i
    });
    element.on('click', function() {
        showI(element);
    });
    element.appendTo('body');
}

相对：

var element;
for (var i = 0; i < 50; i++) {
    (function() {
        var j = i;
        element = $('<div />', {
            'class': 'iteration'
        });
        element.on('click', function() {
            var iVal = j;
            var iValx99 = iVal * 99;
            var iValx999 = iVal * 999;
            alert(iVal + ' // ' + iValx99 + ' // ' + iValx999);
        });
        element.appendTo('body');
    })();
}

jsperf 基准测试示例：

http://jsperf.com/function-click-on-every-element-vs-calling-a-function/2

4

2 回答 2

4

好吧，无论如何，您每次都定义一个新函数，从而放弃了使用静态函数所带来的性能收益。

他可能的意思是使用这个：

element.on('click', showI ); //Just passing an already created function is cheaper than creating a new function object everytime

你甚至不需要绑定它 50 次：

$("body").on("click", ".iteration", showI );

并修改showI：

function showI(e) {
    var iVal = $(this).attr('iteration');
    var iValx99 = iVal * 99;
    var iValx999 = iVal * 999;
    alert(iVal + ' // ' + iValx99 + ' // ' + iValx999);
}

这在修改后的 jsperf http://jsperf.com/function-click-on-every-element-vs-calling-a-function/3中要快得多

jsfiddle：http: //jsfiddle.net/RgU5z/

于 2012-07-15T11:47:25.727 回答
1

如果在循环外声明函数，则只需声明一次。理论上这样会更有效。但是现在在循环中，您在每次迭代中声明一个匿名函数。这不是必需的，您可以使用对函数的引用element.on('click', showI)：并将元素引用showI为this（或$(this)，所以var iVal = $(this).attr('iteration');）。

于 2012-07-15T11:50:21.950 回答