ウィンドウのスクロールを処理する方法

Question

いくつかのクラスのN個のインスタンスがあるとしましょう。
各インスタンスは、ウィンドウのスクロールによる計算を行う必要があります。
それを行うには、2つの方法があります。

1）各インスタンスは、独自のscrollのハンドラがあります。すべてのインスタンスで実行さ

var N = 100, 
    i; 

var FirstWay = function() { 
    this.doSomeCalculations = function() { 
     // some calculations here 
    }; 

    window.addEventListener('scroll', this.doSomeCalculations); 
}; 

for (i = 0; i < N; i++) { 
    new FirstWay(); 
} 

2）シングルスクロールハンドラ：

var N = 100, 
    i, 
    instances = []; 

var SecondWay = function() { 
    this.doSomeCalculations = function() { 
     // some calculations here 
    }; 
}; 

var doCommonCalculations = function() { 
    var i; 

    for (i = 0; i < N; i++) { 
     instances[ i ].doSomeCalculations(); 
    } 
}; 

for (i = 0; i < N; i++) { 
    instances.push(new SecondWay()); 
} 

window.addEventListener('scroll', doCommonCalculations); 

をそうし、私のこの方法のどちらがパフォーマンスの面で優れているかという疑問がありますか？

Answer 1

この種のルールは簡単です：簡単なコードを書いてください。簡単なコードはうまくいきますか？いいです、あなたは完了です。いいえ？なぜそうでないのかを診断し、その問題に対処してください。たとえば、の場合はの場合は問題になります。

いずれにしても問題ありません。いずれかの方法でハンドラがリストに表示されます（ブラウザのイベント処理のリスト、またはrown list）。しかし、推測しないで、（必要な場合）を測定してください。

ハンドラが行う必要がある計算が非常に複雑で時間がかかる場合は、計算が共通していたので、2番目の方法の複雑さの理由があります。その結果を再利用する。

Answer 2

最初の例では、単一のインスタンスごとにイベントリスナーを登録しています。
このイベントがトリガーされると、すべての単一インスタンスがいくつかの関数を呼び出します。

2番目の例では、1つのイベントリスナーを登録しています。
このイベントがトリガーされると、すべての単一インスタンスがいくつかの関数を呼び出します。

もっと速いのは何ですか？

1. 10のイベントハンドラ10回いくつかの関数を呼び出す
2. 1イベントハンドラいくつかの機能を呼び出しますか？

私が知る限り、2はより速いです。

しかし、もう一度、違いはごくわずかです。数百万のイベントハンドラを文字通り登録していない限り、その違いが測定可能であることは疑いの余地があります。