Detaillierte Einführung in die Auswirkungen von JavaScript-Ereignissen auf Speicher und Leistung

Obwohl Event-Handler modernen Webseiten starke interaktive Funktionen hinzufügen können, ist es absolut dumm, wahllos eine große Anzahl von Event-Handlern hinzuzufügen.

Lassen Sie es uns analysieren: Der Ereignishandler ist im Wesentlichen eine Funktion und ein Objekt, das im Speicher gespeichert wird. Durch das Festlegen einer großen Anzahl von Ereignishandlern wird die Anzahl der Objekte im Web erhöht wird immer schlimmer und die Benutzererfahrung wird sehr schlecht sein.

Um Event-Handler besser nutzen zu können, schien die Ereignisdelegation die Leistung zu verbessern.

Ereignisdelegation

Ereignisdelegation: Binden Sie die Verarbeitungsfunktionen desselben Ereignisses auf mehreren untergeordneten Knoten an seinen übergeordneten Knoten, auf dem übergeordneten Knoten. Ereignisse, die von untergeordneten Knoten aufsteigen werden einheitlich verarbeitet. Diese Technologie wird als Ereignisdelegation bezeichnet.

Zusätzlich: Die Ereignisdelegierung ist nicht auf übergeordnete und untergeordnete Knoten beschränkt. Sie können auch so spielen. Beispielsweise gibt es viele Schaltflächen an verschiedenen Positionen im Seitendokument, die alle an Klickereignisse gebunden sind. Mithilfe der Ereignisdelegation können wir diese Ereignisse an das Körperelement binden und sie dann verarbeiten im Allgemeinen selten verwendet).

Das Folgende ist ein Beispiel, um die Vorteile der Ereignisdelegierung schrittweise zu veranschaulichen:

<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>

Unter der Annahme des obigen Codes haben wir jetzt eine Anforderung: Egal welches untergeordnete Element der Liste ( ul) auf die Liste (li) geklickt wird, wird ein Feld angezeigt, das anzeigt, auf welche Unterliste wir geklickt haben.

Die Nachfrage ist doch nicht schwer, oder? Unter Berücksichtigung der Anforderungen ist es an der Zeit, js-Code zu schreiben: 1. Binden Sie das Click-Ereignis an jedes li-Unterelement und legen Sie dann die Handler-Funktion fest 🎜> 2. Binden Sie das Klickereignis mithilfe der Ereignisdelegation an das übergeordnete Element ul und legen Sie dann die Handlerfunktion fest.

// 方法一
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);

Wenn ich mir den obigen Code ansehe, werde ich einige aufschreiben Vorteile der zweiten Methode: 1. Reduziert die Anzahl der Zugriffe auf das DOM und verbessert die Leistung. 2. Bindet die Ereignishandler von untergeordneten Elementen einheitlich an ihre übergeordneten Elemente. 3. Kann Ereignishandler, z. B. das Verschieben, besser verwalten Zusätzlich zum Verweis auf einen Event-Handler

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

Hinweis:

Wenn die Anforderungen für jedes Unterelement unterschiedlich sind, können wir die obige Methode 2 auch wie folgt umschreiben:

// 方法二
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);

Da die Ereignisdelegierung auf dem Ereignis-Bubbling-Mechanismus beruht, können nicht alle Ereignisse delegiert werden.

Zu den Ereignissen, die sich am besten für die Ereignisdelegation eignen, gehören: Klicken, Mousedown, Mouseup, Keydown, Keyup und Tastendruck.

Die Ereignisdelegation ist nur eine sehr gute Idee der Ereignisbindung. Sie sollten sich also nicht an das obige Beispiel halten, sondern es lernen und anwenden! ^_^

Ereignishandler entfernen

Wir haben zuvor gesagt, dass Ereignishandler im Speicher vorhanden sind.

Immer wenn ein Ereignishandler einem Element zugewiesen wird, wird eine Verbindung zwischen dem Browser hergestellt Code und der JavaScript-Code, der die Seiteninteraktion unterstützt

. Je mehr solcher Verbindungen vorhanden sind, desto langsamer wird die Seitenausführung. Die zuvor erwähnte -Ereignisdelegierung wird verwendet, um die Anzahl der hergestellten Verbindungen zu begrenzen . Außerdem wirken sich die Ereignishandler im Speicher, die nach der Verwendung nicht mehr verwendet werden, auch auf den Speicher und die Leistung der Webanwendung aus, wenn sie nicht freigegeben werden.

Das allgemeine Prinzip lautet:

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

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

Entfernen Sie die Event-Handler, die nicht mehr verwendet werden, und geben Sie Speicher frei!

Das Obige ist eine detaillierte Einführung in die Auswirkungen von JavaScript-Ereignissen auf Speicher und Leistung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php). cn)!