Optimize innerHTML operations (improve code execution efficiency)

Optimize innerHTML operations (improve code execution efficiency)_javascript skills

WBOY

Release： 2016-05-16 18:03:23

Original

1380 people have browsed it

Example: The effect we want to achieve is that when the user clicks the mouse, some new data will be appended to the old data.
If using standard DOM, the complete code is as follows:

Copy code The code is as follows:

test

< ;p>data

Note: Once If the structure is more complex, standard DOM requires lengthy code to be written.
If innerHTML is used, part of the code is as follows:

Copy code The code is as follows:

 
 <script> <br>document.onmousedown = function() { <br>var html = ""; <br>for (var i = 0; i < 10; i ) { <BR>html = "< p>" Math.random() "<p>"; <br>} <br>document.getElementsByTagName('div')[0].innerHTML = html; <br>}; <br></script&gt ; <br>
</div> <br>Note: innerHTML does not have appendChild in the standard DOM, so the "=" method is used, which is inefficient. <br>We can use innerHTML and standard DOM in combination, so that we can get the advantages of both. Part of the code is as follows: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="96042" class="copybut" id="copybut96042" onclick="doCopy('code96042')"><u>Copy code</u></a></span> The code is as follows: </div>
<div class="codebody" id="code96042"> <br><script> <br>document.onmousedown = function() { <br>var html = ""; <br>for (var i = 0; i < 10; i ) { <br>html = "<p>" Math.random() "<p>"; <br>} <br>var temp = document.createElement("div"); <br> temp.innerHTML = html; <br>while (temp.firstChild) { <br>document.getElementsByTagName('div')[0].appendChild(temp.firstChild); <br>} <br>}; <br> </script> 

Note: Create an element, then inject innerHTML, and then use standard DOM operations on the element.
It’s not over yet, Asynchronous innerHTML gives a more powerful solution, part of the code is as follows:

Copy code Code As follows:

 
<script> <br>document.onmousedown = function() { <br>var html = ""; <br>for (var i = 0; i < 10; i ) { <br>html = "<p>" Math.random() "<p>"; <br>} <br>var temp = document.createElement('div'); <br>temp. innerHTML = html; <br>var frag = document.createDocumentFragment(); <br>(function() { <br>if (temp.firstChild) { <br>frag.appendChild(temp.firstChild); <br>setTimeout (arguments.callee, 0); <br>} else { <br>document.getElementsByTagName('div')[0].appendChild(frag); <br>} <br>})(); <br>} ; <br></script> 

Note: Use setTimeout to prevent browser clogging, and use DocumentFragment to reduce the number of renderings.
Another: The code can be faster when splicing strings. For details, see: Fastest way to build an HTML string.