2

各ページに多くのjQueryイベントハンドラーがあり、すべて1つの大きな.jsファイルに含まれているサイトがあります。

つまり、どのページでも、イベントハンドラーの大部分は、存在せず、まったく使用されないHTML用です。

これは私のパフォーマンスに影響を与えますか？

編集：例として、ほとんどのイベントハンドラーは次のように実行されます。

$(".page").on("click", ".notes .add", function(){ ... });

新しい要素で機能するため.on()、常に処理能力を浪費するのでしょうか、それともajax呼び出し後にDOMが変更された場合にのみ有効になるのでしょうか。それで、私の質問をさらに明確にするために、私はそれを2つの部分に分解する必要があると思います。

  1. パフォーマンスが低下した場合、それはいつ発生しますか？（常に、どのイベントでも、DOM変更のみ、ロードのみ）。
  2. 音は心配するのに十分ですか？これを測定するにはどうすればよいですか？そのようなリスナーが1000人いる場合、dingは秒、ミリ秒、マイクロ秒で測定されますか？ページを読み込んで「どのように感じるか」を確認できますが、開始する前に、すべてが間違っているかどうかを確認したいと思います。
4

2 に答える 2

5

マークアップに大きく依存しますが、一般的に、不要なイベントハンドラーが使用されていない場合は削除することをお勧めします。

jQueryイベントは、Sizzle選択エンジンを使用して要素にアタッチされます。つまり、への呼び出しは$('a').click()、リンクを検索するためにDOM全体をトラバースする必要があります。要素が存在しないため、イベントはバインドされませんが、jQueryがターゲット要素を検索する必要がなくなるわけではありません。jQueryの作業負荷を軽減する1つの方法は、必要なイベントをバインドする前に、既知の要素（フォームタグなど）の存在をテストすることです。

if ($('form').size() > 0) { 
   // bind events for form here
}

イベントが、、で永続化される場合、またはイベントがまだ作成されていない要素を含むすべての要素にバインドするように設計されているため、これらがより多くのリソースを消費するため、さらに悪化.on()し.delegate()ます.live()。

于 2012-08-07T00:49:01.460 に答える
1

言うまでもなく、実際に必要なJavaScriptのみを含める必要があります。必要のないコードは処理能力を浪費しているだけですが、パフォーマンスに影響を与えるかどうかは、マークアップや他のコードなどに依存します。

パフォーマンスを気にする代わりに、保守性を気にします。サイトのすべてのページのすべてのコードを含む大きなJavaScriptファイルを1つだけにしたいですか？やがて散らかってしまいます。

について：$(".page").on("click", ".notes .add", function(){ ... });。それは本当に依存します。イベント委任の良い点は、複数の要素を管理するために1つのイベントハンドラーのみをバインドすることです。

ここでは、イベントハンドラーをにのみバインドし.pageます。ただし、ハンドラーは、の子孫から発生するクリックイベントを.page調べて、要素がに一致するかどうかを確認します.notes .add。要素がない場合.notes .add、これは単に不要な計算であることは明らかです。

ただし、代わりに.page要素が存在しない場合は、イベントハンドラーもバインドされません。これは問題ありません。jQueryは要素を見つけようとし、.page失敗します。セレクターの複雑さによっては、これが実際に影響を与える可能性があります（ただし、クラス名は複雑ではありません）。

于 2012-08-07T09:34:51.457 に答える