JavaScript イベントがメモリとパフォーマンスに与える影響の詳細な紹介

イベント ハンドラーは最新の Web ページに強力なインタラクティブ機能を追加できますが、多数のイベント ハンドラーを無差別に追加するのは絶対に愚かです。

分析してみましょう: イベント ハンドラーは本質的にはメモリに保存される関数とオブジェクトであり、多数のイベント ハンドラーを設定するとメモリ内のオブジェクトの数が増加し、Web プログラムのパフォーマンスが低下します。ますます悪化しており、ユーザーエクスペリエンスは非常に悪いです。

イベント ハンドラーをより有効に活用するために、パフォーマンスを向上させるために Event Delegate が登場しました。

イベント委任

イベント委任: 複数の子ノード上の同じイベントの処理関数を親ノードにバインドし、子ノードから湧き出てくるイベントを親ノードで均一に処理するこの手法はイベント委任と呼ばれます。 。

追加: イベントの委任は親ノードと子ノードに限定されません。たとえば、ページ ドキュメントのさまざまな位置に多くのボタンがあり、それらはすべてクリック イベントにバインドされており、イベント委任を使用してこれらのイベントを body 要素にバインドして処理することもできます。一般的にはほとんど使用されません）。

以下は、イベント委任の利点を段階的に説明する例です:

<ul id="parent-list">
    <li id="list-1">List 1</li>
    <li id="list-2">List 2</li>
    <li id="list-3">List 3</li>
    <li id="list-4">List 4</li>
    <li id="list-5">List 5</li>
</ul>

上記のコードを仮定すると、次の要件があります: 上記のリスト (ul) のどのサブリスト (li) がクリックされても、ボックスがポップアップして、クリックしたサブリストが表示されます。

要求は難しくありませんね？要件を念頭に置いて、次の 2 つのメソッドを作成します。 1. click イベントを各 li サブ要素にバインドし、イベントを使用します。委任、クリック イベントを ul 親要素にバインドし、ハンドラー関数を設定します

// 方法一
var list1 = document.getElementById("list-1");
list1.addEventListener("click",function(){
  alert(this.firstChild.nodeValue);
},false);
var list2 = document.getElementById("list-2");
list2.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list3 = document.getElementById("list-3");
list3.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list4 = document.getElementById("list-4");
list4.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list5 = document.getElementById("list-5");
list5.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);

// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
  var target = event.target;
  if(target.nodeName.toLowerCase() === "li"){
    alert(target.firstChild.nodeValue);
  }
},false);

上記のコードを見て、方法 2 の利点をいくつか書き留めます: 1. DOM アクセス数を減らし、パフォーマンスを向上させる; 2. 子要素のイベント ハンドラーを親要素にバインドし、メモリ使用量を削減します。 3. イベント ハンドラーへの参照を削除するなど、イベント ハンドラーをより適切に管理できます。各サブ要素の値は異なります。上記のメソッド 2 を次のように書き換えることもできます。

// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
  var target = event.target;
  if(target.nodeName.toLowerCase() === "li"){
    switch(target.id){
      case "list-1":
        alert("学的越多，越觉得自己无知！");
        break;
      case "list-2":
        alert("爱是一种艺术！");
        break;
      case "list-3":
        target.innerHTML = "呵呵，我改了啊！";
        break;
      case "list-4":
        target.style.background = "#aaa";
        break;
      case "list-5":
        target.style.color = "red";
        target.style.fontSize = "2em";
        break;
      default:
        break;
    }
  }
},false);

イベントの委任はイベント バブリング メカニズムに依存しているため、すべてのイベントをイベント委任できるわけではありません。

イベント委任に最も適したイベントには、クリック、マウスダウン、マウスアップ、キーダウン、キーアップ、キープレスが含まれます。

イベント委任はイベント バインディングの非常に良いアイデアであるため、上記の例に固​​執せず、学習して使用する必要があります。 ^_^

イベント ハンドラーの削除

イベント ハンドラーはメモリ内に存在すると前述しましたが、イベント ハンドラーが要素に割り当てられるたびに、実行中のブラウザ コードはページの操作をサポートする JavaScript コードと対話し、接続が確立されます。

。このような接続が多いほど、ページの実行は遅くなります。前述の

イベント委任は、確立される接続の数

を制限するために使用されます。

また、使用後に使用されなくなったメモリ内のイベント ハンドラーも、解放されないと Web アプリケーションのメモリとパフォーマンスに影響を与えます。

<button id="button">提交</button>
var button = document.getElementById("button");
button.onclick = function(){
  // 提交某个表单的操作代码

  button.onclick = null; // 移除事件处理程序
  event.target.firstChild.nodeValue = "提交中。。。";
};

一般原則は次のとおりです: 使用されなくなったイベント ハンドラーを削除し、メモリを解放します。

上記は、JavaScript イベントがメモリとパフォーマンスに及ぼす影響について詳しく説明したもので、さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。