Now that Web apps are getting more complex and need to respond to a variety of user-triggered events, it's also inevitable that you need to add event listeners to the DOM elements on our HTML pages.
We know that there are 3 ways to bind event listeners to DOM elements:
1: Page HTML:
Copy Code code as follows:
<button onclick= "Test ();" ></button>
2: Page HTML:
Copy Code code as follows:
<button id= "BTN" ></button>
Javascript:
Copy Code code as follows:
document.getElementById ("btn"). onclick = test;
3: Page HTML:
Copy Code code as follows:
<button id= "BTN" ></button>
Javascript:
Copy Code code as follows:
document.getElementById ("Btn"). Atachevent ("onclick", test); Ie
The functional effects of these 3 methods and differences, we all know, here is not to repeat, but these 3 methods, the speed of the page rendering, the consumption of resources, but there is a big difference.
The text behind the HTML code is a demo page, you can use IE browser to open, through the annotation of different sections of code, to see the effect of the page run.
You can see the first way the efficiency is the lowest, with the increase in page nodes, page rendering time increased dramatically, under the IE7 run, about 670ms;
The second way is obviously better, under the IE7, about 250ms.
And the third way is the fastest way, is also the Web front-end development recommended standard writing, under the IE7, about 188ms;
Then we remove the logic of the event bindings and find that only the DOM elements are rendered, the time of the unbound event is only 125ms, and the time consuming of the visible event bindings is significant, especially the first way, the DOM level 0 event, which is the most time-consuming.
In addition, when you run each section of code, you might as well open Task Manager, find the browser's corresponding process, see the code running CPU consumption and memory usage.
We can see that the Dom level 0 Event, the CPU consumption is significantly higher.
analysis of Memory consumption:
Reopen the browser, blank page memory footprint is about 37M, virtual memory is 28M, after page rendering:
1 memory using 54M, virtual memory 41M
2 memory using 44M, virtual memory 31M
3 memory using 44M, virtual memory 31M
It is visible that the DOM level 0 event consumes more memory than it does in other ways.
Why does the DOM level 0 event consume system resources so much? The CPU and memory consumption goes far beyond the rest of the way. Let's do a simple analysis.
For ease of analysis, we might as well modify our code <button onclick= "Debugger;test ();" ></button>, and then run the page, in IE's Script Debugger we find the stack call this item, we can see that there is a anonymos function, this function is from where. The original browser in the DOM Level 0 when the event is bound, it automatically generates an anonymous function that contains our code, and then binds the anonymous function to the event. Similar to the following:
Copy Code code as follows:
document.getElementById ("btn"). onclick = function (event) {
Test ();
} ;
and Internet Explorer is not smart enough, the number of anonymous functions is increasing as DOM events are bound more and more by distinguishing between many anonymous functions that are completely consistent within the functions and merging their references. Because it's not hard to say that a large number of events handles anonymous functions, Why is it consuming so much system resources?
As the number of DOM elements increases, the resource consumption becomes more and more serious. And we can try to refresh the page, we find that as the refresh times increase, the page runs more and more slowly, CPU consumption is more and more, memory will also have a small increase. Visible, Dom level 0 Event It also brings a small amount of memory leaks. As for the extension of time, CPU consumption is gathered, presumably because the browser is busy releasing a large number of anonymous functions, the consequences of the resources occupied.
Further further, because IE browsers are based on bubbling event models, child elements of the event will bubble to the parent element, so the more extreme optimization is to remove many child elements of the event binding, and the event binding to the parent element, in the body after the demo, there are also attempts to see not only the CPU, Memory consumption is minimal and time is the same as rendering clean HTML pages.
So in page event bindings, try to avoid DOM level 0 event, and increase the event as much as possible. (Consider, of course, the flexibility of event handling).
Demo
Copy Code code 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 refresh time increase 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>
