JavaScript パフォーマンス最適化のためのイベント委任例の詳細な説明

この記事では、例を通じて JavaScript パフォーマンス最適化のイベント委任を分析します。参考までに皆さんと共有してください。詳細は次のとおりです:

以下の各 LI のクリック イベントをバインドします

Go somewhereDo somethingSay hi

1. 従来の書き方

var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3=document.getElementById("sayHi");
item1.onclick = function(){
  console.log('goSomewhere');
}
item2.onclick = function(){
  console.log('doSomething');
}
item3.onclick = function(){
  alert("hello");
}

JavaScript では、ページに追加されるイベント ハンドラーの数は、ページの全体的な実行パフォーマンスに直接関係します。イベントが増えるほど、パフォーマンスは低下します。パフォーマンス。

理由は次のとおりです。

1. すべての関数はオブジェクトであり、メモリ内のオブジェクトが多くなるほど、パフォーマンスが低下します。
2. すべてのイベント ハンドラーを事前に指定する必要があるため、DOM アクセスの数が発生し、ページ全体のインタラクティブな準備時間が遅延します。

2. イベント委任

「イベント ハンドラーが多すぎる」問題の解決策はイベント委任です。

イベント委任は、イベント バブリングを使用して、イベント ハンドラーを 1 つだけ指定することで、特定の種類のすべてのイベントを管理します。たとえば、クリック イベントはドキュメント レベルまでバブルアップされます。つまり、クリック可能な要素ごとにイベント ハンドラーを追加することなく、ページ全体に対して onclick イベント ハンドラーを指定できます。

イベント委任方法:

var list=document.getElementById("myLinks");
list.onclick = function(e){
  var target = e.target;  
  switch(target.id){
   case "goSomewhere":
    console.log('goSomewhere');
    break; 
   case "doSomething":
    console.log('doSomething');
    break; 
   case "sayHi":
    alert("hello");
    break; 
  }
}

3. イベント委任を使用する利点:

1) ドキュメント オブジェクトにはすぐにアクセスでき、ページ ライフ サイクルのどの時点でも (DOMContentLoaded や読み込みイベントを待たずに) イベント ハンドラーをドキュメント オブジェクトに追加できます。つまり、クリック可能な要素がページ上にレンダリングされるとすぐに機能します。

2) ページ内でイベント ハンドラーを設定するのに必要な時間が短縮されます。イベント ハンドラーを 1 つだけ追加すると、必要な DOM 参照が減り、かかる時間が短縮されます。

3) ページ全体が占めるメモリ領域が少なくなり、全体的なパフォーマンスが向上します。

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

【おすすめ関連チュートリアル】

1. JavaScript ビデオチュートリアル
2. JavaScript オンラインマニュアル
3.ブートストラップ チュートリアル