15

私は現在次のコードを持っています：

$('#loginLink, #registerLink').click(function () {
        dialog(this);
        return false;
    });

$('#detailData')
    .on('click', '.modalDeleteLink, .modalEditLink', function () {
        dialog(this);
        return false;
    })

#loginLinkと#registerLinkの1つだけがありますが、クラス.modalDeleteLinkと.modalEditLinkを持つ要素は最大100個になる可能性があります。

これらの要素をすべて変更して、クラスが.dialogLinkになるようにし、次のコードを使用することを考えていました。

$("body").on("click", ".dialogLink", function(){
   dialog(this);
   return false;
});

このコードは保守がはるかに簡単です。しかし、これをボディに取り付けることでパフォーマンス上の不利な点はありますか？

4

2 に答える 2

7

何百ものハンドラーや非常に大きなドキュメントがない限り、パフォーマンスについて心配する必要はありません。

ドキュメントからの抜粋：

ほとんどの場合、クリックなどのイベントはまれにしか発生せず、パフォーマンスは重要な問題ではありません。ただし、mousemoveやscrollなどの高頻度のイベントは、1秒間に数十回発生する可能性があるため、そのような場合は、イベントを慎重に使用することがより重要になります。ハンドラー自体で実行される作業量を減らすか、ハンドラーが再計算するのではなくハンドラーに必要な情報をキャッシュするか、setTimeoutを使用して実際のページ更新の数をレート制限することにより、パフォーマンスを向上させることができます。

ドキュメントツリーの最上位近くに多くの委任されたイベントハンドラーをアタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQueryは、そのタイプのすべてのアタッチされたイベントのすべてのセレクターを、イベントターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、ターゲット要素にできるだけ近いドキュメントの場所に委任されたイベントを添付します。大きなドキュメントの委任されたイベントにdocumentまたはdocument.bodyを過度に使用することは避けてください。

于 2012-09-03T16:26:07.050 に答える
4

jQueryでは、DOMの.on（）を上に配置するほど、速度が遅くなります。これは、jQueryが、選択したタイプのすべてのアタッチされたイベントのすべてのセレクターをターゲットからドキュメントレベルまで比較する必要があるためです。

.on（）については、jQueryのドキュメントページを参照してください。

ドキュメントツリーの最上位近くに多くの委任されたイベントハンドラーをアタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQueryは、そのタイプのすべてのアタッチされたイベントのすべてのセレクターを、イベントターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、ターゲット要素にできるだけ近いドキュメントの場所に委任されたイベントを添付します。大きなドキュメントの委任されたイベントにdocumentまたはdocument.bodyを過度に使用することは避けてください。

そうは言っても、クリックイベントでは、スクロールやマウスの移動イベントとは異なり、（ユーザーのクリックでのみ）発生する頻度が低いため、パフォーマンスの違いは無視できる可能性があります。

于 2012-09-03T16:32:45.567 に答える