Speed ​​up page rendering time and kill Dom Level 0 Event_javascript techniques

Today's web applications are becoming more and more complex and need to respond to various user-triggered events. Therefore, it is inevitable to add event listening functions to the DOM elements on our HTML pages.

We know There are three ways to bind event listening functions to DOM elements:
1: Page html:

Copy code Code As follows:

2: Page html:

Copy code The code is as follows:

Javascript:

Copy code The code is as follows:

document.getElementById(" btn").onclick = test;

3: Page html:

Copy code The code is as follows :

Javascript:

Copy code The code is as follows:

document.getElementById(“btn”).atachEvent(“onclick”,test); //ie

Everyone knows the functional effects and differences of these three methods, so I won’t go into details here. However, these three methods have very different effects on page rendering speed and resource consumption.

The html code behind the text is a demo page. You can open it with IE browser and check the running effect of the page by annotating different code segments.
You can see that the first method is the least efficient. , with the increase of page nodes, the page rendering time increases sharply. When running under IE7, it is about 670ms;
The second method is obviously better, and under IE7, it is about 250ms
The third method is the best. The fastest method is also the recommended standard writing method for web front-end development. Under IE7, it is about 188ms;
Then we remove the logic of event binding and find that the time for only rendering DOM elements without binding events is only 125ms, and the visible events The time consumption of binding is still very large, especially the first method, which is Dom Level 0 Event, is the most time-consuming.

In addition, when you run each piece of code, you might as well open the task manager, Find the process corresponding to the browser and check the CPU consumption and memory usage when the code is running.
We can see that the Dom Level 0 Event consumes significantly more CPU.

Memory consumption analysis :
Reopen the browser, the memory usage of the blank page is about 37M, the virtual memory is 28M, after the page is rendered:
1 The memory usage is 54M, the virtual memory is 41M
2 The memory usage is 44M, the virtual memory is 31M
3 The memory usage is 44M, the virtual memory is 31M
It can be seen that the memory consumption of Dom Level 0 Event is far beyond other methods.
Why is Dom Level 0 Event like this? What about consuming system resources? The consumption of CPU and memory far exceeds other methods. Let’s do a simple analysis.

In order to facilitate analysis, we might as well modify our code Copy code The code is as follows:

document.getElementById(“btn”).onclick = function(event){
test ();
} ;

The IE browser is not smart enough to distinguish many anonymous functions with exactly the same internal functions and merge their references. Therefore, as more and more DOM events are bound, the number of anonymous functions also increases. More and more. Because there are a large number of anonymous event processing functions to be declared, it is not difficult to understand why so many system resources are consumed.

As the number of DOM elements increases, this resource consumption will increase It is getting more and more serious. And we can try to refresh the page and find that as the number of refreshes increases, the page runs slower and slower, the CPU consumption increases, and the memory will also increase slightly. It can be seen that Dom Level 0 Event It will also cause a small amount of memory leaks. As for the extension of time and the accumulation of CPU consumption, it is speculated that the browser is busy releasing the resources occupied by many anonymous functions.

Go further, Since IE browser is based on the bubbling event model, the events of the child elements will bubble up to the parent element, so a more extreme optimization is to remove the event binding of many child elements and bind the event to the parent element. In the text In the later demo, there are also attempts in this regard. It can be seen that not only the CPU and memory consumption are the lowest, but also the time is the same as rendering a clean html page.

So we need to do this in page event binding. Try to avoid Dom Level 0 Events, and increase the events as much as possible. (Of course, the flexibility of event processing must also be considered).
demo:

Copy code The code is as follows:

<script> <br>var d = new Date() <br>var str = [] ; <br>for(var i = 0;i<count;i ){ <BR>str.push('<li onclick="test();">' i '</li>') <br>} <br>ul.innerHTML = str.join(""); <br>alert(new Date - d); <br>//670 The time increases by 85 when refreshing <br></script>