JavaScript JavaScript Intensive Tutorial--dom programming performance Optimizations

This article is the official HTML5 training course for h5edu institutions, mainly introduces: JavaScript intensive tutorial--dom programming performance Optimization

Access and modification of DOM
There is a cost to accessing the DOM element-modifying the element side is more expensive because he causes the browser to recalculate the page's geometric changes.
Of course, the worst-case scenario is accessing or modifying elements in a loop, especially the geometry of HTML elements.
To give you a quantitative understanding of the performance problems that DOM programming brings, consider the following simple example:

function Innerhtmlloop () {for (var count = 0;count<15000;count++) {document.getElementById (' here '). innerhtml+= ' a ';    }}

This function loops through the contents of the page element. The problem with this code is that each time the loop is iterated, the element is accessed two times: Read the innerHTML property value one time, and rewrite it another time.
In a more efficient way, store the modified content in a local variable and write it once at the end of the loop:

function InnerHTMLLoop2 () {var content = '; for (var count = 0;count<15000;count++) {count + = ' a '; document.getElementById (' here '). innerhtml+=content;    }}

In all browsers, the modified version runs faster. 155 times times faster with INNERHTMLLOOP2 than with Innerhtmlloop ()
So use JavaScript as much as possible, and call document less. Significantly improve performance and speed.

Click to enter JS Intensive tutorial: http://www.h5edu.cn/htm/step/h5edu_44.html

JavaScript JavaScript Intensive Tutorial--dom programming performance Optimizations