jQueryイベントハンドラを登録したい要素数が多い場合はdelegateでパフォーマンスを向上させる

イベントハンドラの登録は重い処理

1
2
3
4
5
6
7
8
9
10
11
12
13

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    ・・・省略・・・
    <li>100</li>
</ul>

<script>
$li.on('click', function(e) {
    console.log('bind');
});
</script>

上記のliすべてにイベントハンドラを登録しようとすると性能がかなり落ちます。 元々イベントハンドラの登録自体が重い処理の為、その重い処理を大量の要素に行うと大きな影響を与えます。

delegate(委譲)で性能をあげる

jQueryのonメソッドは、第2引数にイベントを発生させる要素をフィルタリングするセレクタを指定することで、親要素にハンドリングを委譲することができます。 今回の場合、liで発生したイベントを親要素であるulがハンドリングをします。

イベントハンドラの登録数を減らすことで性能の向上が期待できます。

1
2
3

$('ul').on('click', 'li', function(e) {
    console.log('delegate');
});

jsPerfでの性能テスト結果

jsPerfでbindとdelegateの性能テスト結果が以下になります。

※テスト環境: Chrome 44.0.2403.157 on Mac OS X 10.9.5

Ops/sec
bind 5,962
delegate 383,790

要素数が多い場合、delegeteの方が約64倍性能が高いことが分かります。テストの詳細はjquey delegate peformance から確認できます。

参考

Comments