Detailed introduction to the impact of JavaScript events on memory and performance

Although event handlers can add strong interactive capabilities to modern Web pages, it is absolutely foolish to add a large number of event handlers indiscriminately.

Let’s analyze it: Event handlers are essentially a function and an object, stored in memory. Setting a large number of event handlers will increase the number of objects in the memory. Web The performance of the program will become worse and worse, and the user experience will be very bad.

In order to make better use of event handlers, Event delegation appeared to improve performance.

Event delegation

Event delegation: Bind the processing functions of the same event on several child nodes to its parent node, on the parent node Events bubbling up from child nodes are uniformly processed. This technology is called event delegation.

To add: event delegation is not limited to parent nodes and child nodes. You can also play like this. For example, there are many buttons in different positions in the page document, all of which are bound to click events. Using event delegation, we can bind these events to the body element and then process them (although generally Rarely used).

The following is an example to gradually illustrate the advantages of event delegation:

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

Assuming the above code, we now have a requirement: no matter which sublist of the above list (ul) is clicked ( li), a box will pop up to show which sublist we clicked.

The demand is not difficult, right? With the requirements in mind, it’s time to write js code. Now there are two methods in front of you: 1. Bind the click event to each li sub-element, and then set the handler function; 2. Use event delegation to bind the click event to the ul parent element, and then set the processing function

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

Looking at the above code, I will write down a few advantages of the second method: 1. Reduced access The number of times in the DOM improves performance; 2. Unified binding of event handlers of child elements to their parent elements reduces memory usage; 3. Event handlers can be better managed, such as removing responses to a certain event Handler reference

Note:If the requirements for each sub-element are different, we can also rewrite the above method 2 like this:

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

Because Event delegation relies on the event bubbling mechanism, so not all events can be delegated.

The events most suitable for event delegation include: click, mousedown, mouseup, keydown, keyup and keypress.

Event delegation is just a very good idea of ​​event binding, so you should not stick to the above examples, you should learn and use them! ^_^

Remove event handlers

We said earlier that event handlers exist in memory, Whenever an event handler is assigned to an element, the running A connection is established between the browser code and the JavaScript code that supports page interaction. The more such connections there are, the slower the page execution will be. The event delegation mentioned earlier is used to limit the number of connections established .

Also, those event handlers in memory that are no longer used after use will also affect the memory and performance of the Web application if they are not released.

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

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

The general principle is: Remove those event handlers that are no longer used and release memory!

The above is a detailed introduction to the impact of JavaScript events on memory and performance. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!