Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of JavaScript memory and performance problems. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

What is JavaScript memory and performance

Because event handlers can interact with each other in modern web applications, many developers mistakenly use them a lot in the page. In JavaScript, the number of event handlers in the page is directly related to the overall performance of the page. There are many reasons, for example, every function in ① is an object, which takes up memory space. The more objects, the worse the performance; the number of times ② needs to access the DOM for a specified event handler will first cause a delay in the interaction of the entire page.

Second, talk about the performance of innerHTML? 1. Use the negative textbook for (let value of values) of innerHTML {ul [XSS _ clean] + ='${value}';}

This code is inefficient because the innerHTML is set for each iteration, and not only that, the innerHTML is read first for each loop, which means that the innerHTML is accessed twice for each loop.

2. How to solve let itemsHtml = ""; for (let value of values) {itemsHtml + ='${value}';} ul [XSS _ clean] = itemsHtml

After this modification, the efficiency is much higher, and the innerHTML will be assigned only once, and the following code can also be done:

Ul [XSS _ clean] = values.map (value = >'${value}') .join ('')

Third, how to solve the problem of too many similar buttons?

The solution to too many event handlers is to use event delegates. Event delegates take advantage of event bubbling and can use only one event handler to manage one type of event. For example, the click event bubbles to document. This means that you can specify an onclick event handler for the entire page, rather than a separate event handler for each clickable element.

Bidong Yunyun Medusa

There are three list items that should be performed when clicked, usually by specifying three event handlers:

Let item1 = document.getElementById ("girl1"); let item2 = document.getElementById ("girl2"); let item3 = document.getElementById ("girl3"); item1.addEventListener ("click", (event) = > {console.log ("I am Biebitong!") ) item2.addEventListener ("click", (event) = > {console.log ("I am Yunyun!") ) item3.addEventListener ("click", (event) = > {console.log ("I'm Medusa!") ;})

There is too much of the same code, the code is too ugly.

Using event delegates, you can solve ugliness by adding an event handler to a common ancestor node with many elements!

Let list = document.getElementById ("myGirls"); list.addEventListener ("click", (event) = > {let target = event.target; switch (target.id) {case "girl1": console.log ("I am Biebitong!") ; break; case "girl2": console.log ("I'm Yunyun!") Break; case "girl3": console.log ("I'm Medusa!") ; break;}}) what are the advantages of event delegation?

The document object is available at any time, and you can add an event handler to it at any time (without waiting for DOMContentLoaded or load events) to handle all certain types of events on the page. This means that as long as the page renders clickable elements, it can work without delay.

Save the events spent on setting up the page event program.

Reduce the amount of memory required for the entire page and improve overall performance.

Delete event handlers

Once the event handler is assigned to the element, a connection is established between the browser code and the JavaScript code responsible for the page interaction. The more resumes of this contact, the worse the performance of the page. In addition to restricting this connection through event delegates, unused event handlers should be deleted in a timely manner. The poor performance of many web applications is caused by useless event handlers staying in memory.

There are two reasons for this problem:

1. Delete elements with event handlers

For example, delete a node through the DOM method removeChild () or replaceChild (). The most common is to use innerHTML to replace a part of the page as a whole. At this point, if there is an event handler on the element deleted by innerHTML, it will not be cleaned up normally by the garbage collector.

So, if you know that an element will be deleted, you should manually delete its event handler, such as btn.onclick = null;// delete event handler, event delegate can also help solve this problem, if you know that an element will be replaced by innerHTML, do not add event handlers to the element, add it to a higher-level node.

2. Page unloading will also lead to the problem of residual references in memory.

If event handlers are not cleaned up after the page is unloaded, they will still remain in memory. After that, each time the browser loads and unloads the page (for example, by forward, backward, or refresh), the number of residual objects in memory increases because the event handler is not recycled.

In general, it is best to delete all event handlers in onunload event handlers before the page is unloaded. This also shows the advantages of event delegates, because there are few event handlers, so it's easy to remember which ones to delete.

6. How to solve the problem of endless cycle caused by dynamically adding p in the loop? The expression let ps = document.getElementsByTagName ("p"); for (let I = 0 teri)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.