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

ループの外で関数を宣言する場合は、一度だけ宣言する必要があります。理論的には、その方が効率的です。しかし、ループ内では、各反復内で無名関数を宣言します。これは必須ではありません。関数への参照を使用して、 as (or , so )element.on('click', showI)内の要素を参照できます。showIthis$(this)var iVal = $(this).attr('iteration');

于 2012-07-15T11:50:21.950 に答える