jquery unbinding eventsスピードの増加

Question

私は大量のスライドショーを作成しています。これは、多くのイベントトリガーを使い始めています。また、約半数がlivequeryプラグインを使用しています。

これらのイベントをスライド間でアンロードすると、アクティブなスライドだけでイベントがバインドされるため、速度が向上しますか？ ？ http://dev.jquery.com/attachment/ticket/2698/unload.js

アンバインドlivequeryイベントなども：

またlivequeryプラグイン、その後大幅に高速ネイティブlivequeryである（それは確かに少ない機能です原因）

はまた、このような何かをしませんか？

イベントリスナーをアンロード/ロードするのにどれくらいの時間がかかっているか、実行している間に実際に何回食べているのかを知る必要があります。ライブイベントに関する情報もすばらしいでしょう。

Answer 1

「ネイティブliveQuery」とは、live()を意味する場合は、「live()」が「liveQuery()」よりもはるかに高速です。後者はsetIntervalを使用して、文書ツリー全体に新しい要素を問い合わせます（前者はevent delegationです）。

イベント委任がハンズダウンに勝ちます。簡単に言えば、live()と呼んでいるセレクタの数にかかわらず、live()は、documentのハンドブックで、の1つのイベントタイプが登録されています（たとえば、click）。

あなたの他の質問については、各スライドの要素にバインドしていて、バインド解除とバインディングが実行可能であるかどうかを知りたいのですか？私はWRTのメモリを言うだろう、はい。 WRT CPUサイクル、いいえ。

明確にするには、liveQuery()アプローチでCPUがスリープ状態にならないようにします。

Answer 2

私は実際のコードを提供するための詳細が必要ですが、あなたはEvent Delegationに見たいと思うかもしれません：

イベントの代表団は、その上で起こったイベントをリッスンする親オブジェクト上の単一のイベントリスナーの使用を意味します子供（または深い子孫）。イベントの委任により、開発者は非常に特定のターゲット上で発生するイベントに反応しながら、イベントリスナーのアプリケーションを疎にすることができます。これは、何百ものイベントリスナーを作成することでパフォーマンスが急速に低下する、イベントリッチなWebプロジェクトで高いパフォーマンスを維持するための重要な戦略であることが証明されています。

迅速な、基本的な例：

<div id="container"> 
    <img src="happy.jpg"> 
    <img src="sad.jpg"> 
    <img src="laugh.jpg"> 
    <img src="boring.jpg"> 
</div> 

しかし、その代わりに4枚の画像を、あなたはあなたがしたい100、または200を持っている：

は、あなたがこのようなイメージを持つDIVを持っていると言いますクリックイベントをイメージにバインドして、ユーザーがクリックしたときにXアクションが実行されるようにします。ほとんどの人々の最初のコードは次のようになります。

$('#container img').click(function() { 
    performAction(this); 
}); 

これはあなたのページのパフォーマンスを行き詰まらするイベントハンドラのcraploadをバインドしようとしています。イベント委任を使用すると、このような何かを行うことができます。

​​

これが唯一の実際のコンテナに1つのイベントをバインドします、あなたは、イベントのtargetプロパティを使用して、クリックされたかを把握し、それに応じて委任することができます。これは、しかし、まだ痛みの一種であり、あなたは実際にjQueryのlive機能を使用して、すべてこれを行うことなく、この大幅な性能向上を得ることができます。このことができます

$('#container img').live('click', function() { 
    performAction(this); 
}); 

希望を。

Answer 3

これは価値があります。私たちはこの問題についていくつかのテストを行ったばかりです。私たちは複数のdivを含むdivを持つページを作成しました。各divにはonclickハンドラにidを示す警告ダイアログが表示される必要がありました。

DOM Level 0のイベント登録を使用し、それぞれのhtmlのイベントハンドラをonclick = "_ do_click（this）;"で直接定義しました。それ以外のケースでは、DOMレベル2イベントの伝播を使用し、含まれるdivで単一のイベントハンドラを定義しました。

私たちが見つけたのは、含まれていたdivが100,000で、FireFoxの読み込み時間の差はごくわずかでした。それは長い時間がかかりました。 Safariでは、DOMレベル0はDOMレベル2から2倍の時間がかかりましたが、いずれのFireFoxの場合よりも4倍速いことがわかりました。

はい、パフォーマンスは向上しますが、実際には顕著なペナルティを作成する必要があるようです。