2016-03-26 6 views
3

私は非常に動的なWebアプリケーションを持っています。要素は常に作成され、破棄されます。

クリックや他のイベントが滞在させるために、私は、この例のように、$(文書)にこれらのイベントのすべてを添付しています:私が言ったように、

$(document).on('click', '.tabs li a', function(event) { 

}); 

ほとんどすべてのこれらのイベントのがされています$(document)に添付されています..それには何か欠点がありますか?これらのイベントハンドラはどこに保存されていますか?私のアプリケーションは遅くなりますか?

答えて

1

いいえ - これはjQueryのパフォーマンスに悪影響を及ぼします。すべての委任されたイベントハンドラをドキュメントオブジェクトにバインドしないでください。これはおそらくあなたが作成できる最悪のパフォーマンスのシナリオです。 jQueryのでイベントパフォーマンスセクションhereで述べたように パフォーマンスが低下する可能性がdocumentに多くの委任イベントハンドラをアタッチ

をdocumentation-。イベントが発生するたびに、jQueryは、そのタイプのすべてのアタッチされたイベントのすべての セレクタを、イベントターゲットからドキュメントの最上部までの パスのすべての要素と比較する必要があります。最適な のパフォーマンスを得るには、ドキュメントの場所に委任されたイベントを、可能な限りターゲット要素に近い として接続します。

大きいドキュメントで委任されたイベントに対してdocumentまたはdocument.bodyを過剰に使用しないでください。デリゲートされたイベント処理の場合、ダイナミックでない最も近い親にそれらをバインドするほうが効率的です。

問題の詳細な説明はthis answerにあります。

希望すると便利です。

+0

オブジェクトに委任されたイベントハンドラの量を確認するにはどうすればよいですか? – raphadko

0

tl; drバインディングリスナーはメモリを割り当てます。ドキュメントに常にバインドされている多くのリスナーでこれを行うと、ドキュメントがアンロードされるまで、これらのリスナーのいずれもオフになりません(つまり、ページのリフレッシュ、古いスクールのhtmlのような別のドキュメントの読み込み)。最終的にSPAでメモリリークやブラウザクラッシュが発生する

関連する問題