Improve your DHTML performance change some habits

xiaoxiao2021-03-06 71

Source: msdn [English Original] msdn.microsoft.com/library/en-us/dnwebgen/html/dhtmlperf.asp?frame=true ["中文 = ["] www.microsoft.com/chna/msdn/msdnonline/features /DHTMLPERF.ASP1. Try to use the same script function to change the HTML content. If there are multiple events triggered, try only to change the same place. 2. Try to focus on the content. If you don't have the content of HTML, try to use InnerText instead of innerhtmlslow: divupdate.innerhtml = ""; for (var i = 0; i <100; i ) {divupdate.innerhtml = " this is a slow Method ! ";} fast: var str =" "; for (var i = 0; i <100; i ) {str =" this is faster Because IT Uses A String! "} divupdate.innerhtml = str; 3. Try to use Innertext instead of DOM when updating text content

Slow:

Var node; for (var i = 0; i <100; i ) {node = document.createElement ("span"); Node.createTextNode ("Using CreateTextNode ()); DivuPdate.Appendchild (Node }

FAST:

Var node; for (var i = 0; i <100; i ) {node = document.createElement ("span"); node.innertext = "using innerText Property"; DivUpdate.Appendchild (node);}

4. Try to use CreateElement and InsertAdjacentelement methods, not InsertJacenthtml

Slow:

For (var i = 0; i <100; i ) {divupdate.insertadjacenthtml ("beforeend", " uses insertjacenthtml () ");}

FAST:

Var node; for (var i = 0; i <100; i ) {node = document.createElement ("span"); node.innertext = "Uses insertjacentelement ()"; DivUpdate.insertAdjacentelement ("beforeend", node); }

5. With the huge case, try to use InnerHTML to add items.

Slow:

Var Opt; divupdate.innerhtml = ""; for (var i = 0; i <1000; i ) {str = "

FASTER:

Var arr = new array (1000); for (var i = 0; i <1000; i ) {arr [i] = "