Accelerate page rendering time to kill Dom Level 0 Event

Nowadays, web applications are becoming more and more complex and need to respond to a variety of user-triggered events. Therefore, it is inevitable to add event listening functions to dom elements on our html pages.

We know that there are three methods to bind event listening functions to dom elements:
1: Page html:
Copy codeThe Code is as follows:
<Button onclick = "test ();"> </button>

2: Page html:
Copy codeThe Code is as follows:
<Button id = "btn"> </button>

Javascript:
Copy codeThe Code is as follows:
Document. getElementById ("btn"). onclick = test;

3: Page html:
Copy codeThe Code is as follows:
<Button id = "btn"> </button>

Javascript:
Copy codeThe Code is as follows:
Document. getElementById ("btn"). atachEvent ("onclick", test); // ie

We understand the functional effects and differences of these three methods. We will not repeat them here, but these three methods are used to speed up page rendering and consume resources, but it is quite different.

The html code behind the body is a demo page. You can open it in the IE browser and comment out different code segments to view the page running effect.
We can see that the efficiency of the first method is the lowest. As page nodes increase, the page rendering time increases sharply and runs in ie7, which is about 670 ms;
The second method is obviously better. In ie7, it is about 250 ms.
The third method is the fastest method, which is also the standard method recommended for web Front-end development. In ie7, it is about 188 ms;
Then we removed the event binding logic and found that only the dom elements were rendered, and the time for events not bound was only 125 ms. It can be seen that the event binding time consumption was large, especially the first method, Dom Level 0 Event, is the most time-consuming.

In addition, when running code sections, you may wish to open the task manager, find the corresponding process in the browser, and view the cpu consumption and memory usage during code running.
We can see that Dom Level 0 Event significantly increases cpu consumption.

Memory Consumption Analysis:
Open the browser again. The memory usage on the blank page is about 37 MB, and the virtual memory is 28 MB. After page rendering:
1 memory use 54 M, virtual memory 41 M
2 memory usage 44 M, virtual memory 31 M
3 memory usage 44 M, virtual memory 31 M
We can see that Dom Level 0 Event consumes much more memory than other methods.
Why does Dom Level 0 Event consume system resources? The consumption of cpu and memory far exceeds other methods. Let's make a simple analysis.

For ease of analysis, modify our code <button onclick = "debugger; test ();"> </button> and run the page, in the script debugger of ie, we can find the stack call item. We can see that there is an anonymos function. Where does this function come from. when the browser binds the Dom Level 0 Event, an anonymous function containing our code is automatically generated and bound to the Event. similar to the following method:
Copy codeThe Code is as follows:
Document. getElementById ("btn"). onclick = function (event ){
Test ();
};

The IE browser does not have enough intelligence to distinguish anonymous functions with many internal functions completely consistent and merge their references. As dom events become increasingly bound, the number of anonymous functions is also increasing. it is difficult to understand why so many system resources are consumed to declare a large number of events to process anonymous functions.

With the increase of dom elements, the resource consumption will become more and more serious. in addition, we can try to refresh the page and find that as the number of refresh times increases, the page runs slowly, the cpu consumption increases, and a small amount of memory increases. it can be seen that Dom Level 0 Event may cause a small amount of memory leakage. as for the extended time and cpu consumption, it is estimated that the browser is busy releasing the resources occupied by many anonymous functions.

Further exploration, because IE browser is based on the bubble event model, the sub-element event will bubble to the parent element, so the ultimate optimization is to remove the event binding of many sub-elements, the event is bound to the parent element. In the demo after the body, you can see that not only the cpu, but the memory consumption is the lowest, time is also the same as rendering a clean html page.

Therefore, when binding page events, we should avoid Dom Level 0 events as much as possible, and increase events as much as possible (of course, we should also consider the flexibility of Event processing ).
Demo:
Copy codeThe Code is as follows:
<BODY>
<Ul id = "list"> </ul>
<Script language = "JavaScript">
<! --
Var $ = function (id ){
Return document. getElementById (id)
};
Function test (){
Alert (1)
}
Var ul = $ ("list ");
Var count = 5000;
// Ie7
// -->
</SCRIPT>
<Script>
Var d = new Date ()
Var str = [];
For (var I = 0; I <count; I ++ ){
Str. push ('<li onclick = "test ();">' + I + '</li> ')
}
Ul. innerHTML = str. join ("");
Alert (new Date-d );
// 670 increase the refresh time by 85
</Script>
<Script language = "JavaScript">
<! --
/* Var d = new Date ()
Var str = [];
For (var I = 0; I <count; I ++ ){
Str. push ('<li>' + I + '</li> ')
}
Ul. innerHTML = str. join ("");
Alert (new Date-d );*/
// 125
// -->
</SCRIPT>
<Script language = "JavaScript">
<! --
/* Var d = new Date ()
Var str = [];
For (var I = 0; I <count; I ++ ){
Str. push ('<li>' + I + '</li> ')
}
Ul. innerHTML = str. join ("");
Var li = document. getElementsByTagName ("li ");
Var l = li. length;
For (var I = 0; I <l; I ++ ){
Li [I]. onclick = test;
}
Li = null;
Alert (new Date-d );*/
// 250
// -->
</SCRIPT>
<Script language = "JavaScript">
<! --
/* Var d = new Date ()
Var str = [];
For (var I = 0; I <count; I ++ ){
Str. push ('<li>' + I + '</li> ')
}
Ul. innerHTML = str. join ("");
Var li = document. getElementsByTagName ("li ");
Var l = li. length;
For (var I = 0; I <l; I ++ ){
Li [I]. attachEvent ("onclick", test );
}
Li = null;
Alert (new Date-d );*/
// 188
// -->
</SCRIPT>
<Script language = "JavaScript">
<! --
/* Var d = new Date ()
Var str = [];
For (var I = 0; I <count; I ++ ){
Str. push ('<li>' + I + '</li> ')
}
Ul. innerHTML = str. join ("");
Ul. attachEvent ("onclick", test );
Alert (new Date-d );*/
// 125
// -->
</SCRIPT>
</BODY>