Read JavaScript High performance programming key notes _javascript Tips

1th

Efficient concise                     //Low Energy
children        //childnodes
childelementcount            //childnodes.length
FIRSTELEMENTC Hild              //firstchild
lasteelmentchild              //lastchild
nextelementsibling
//nextsibling Previouselementsibling       //previoussibling

2nd: The efficient application of selectors

<div id= "Footer_bottom" >
<a href= "/aboutus.aspx" > Cloud-dwelling Community </a><a href= "/contactus.aspx" > Contact us </a><a href= "/about/ad.aspx" > Advertising service </a><a href= "/about/job.aspx" > Talent Service </a>© 2006-2016 <a href= "http://www.jb51.net/" > Cloud-dwelling community </a>
</div>

var aarr1= document.queryselectorall ("#footer_bottom a");/concise efficient
var aArr2 = Docuement.getelementbyid ("Footer_ Bottom "). getElementsByTagName (" a ")//complex inefficient

//return 
<a href="/aboutus.aspx "> Cloud-
dwelling community </a> <a href= "/contactus.aspx" > Contact us </a> <a
href= "/about/ad.aspx" > Advertising service </a>,
<a href = "/about/job.aspx" > Talent service </a>

//Select the first child node
var a = Document.queryselector ("#footer_bottom a");
return <a href= "/aboutus.aspx" > Cloud Habitat </a>

//Select multiple nodes
var divs = Document.queryselectorall (" Div.footer,div.main,div.header ");

Note: Most browsers support the above properties, ie6,7,8 only supports children properties

Reduced DOM rendering and typesetting (three ways)

1. The elements to be processed are hidden, processed, and finally displayed

2. How to create a file fragment (recommended) document.createdocumentfragment ();

3. Clone a copy of the element to be processed, then manipulate the copy, and finally replace the copy with the original

The following is a supplement to the small series of cloud-dwelling communities

Storing the objects that are looping

Before use:

var str = "Nanananana";
for (var n = 0; n < str.length; n++) {}

After use:

var str = "Nanananana",
strlgth = str.length;
for (var n = 0; n < strlgth; n++) {}

The cycle of the performance of the consumption is very large, the cycle of the object storage, reduce each cycle to do the object calculation.

Minimize reflow and redraw

Before use:

var coored = document.getElementById ("Ctghoteltab");
document.getElementById ("Ctghoteltab"). Style.top = Coored.offsettop + + "px";

After use:

var coored = document.getElementById ("Ctghoteltab"),
offettop = Coored.offsettop +;
document.getElementById ("Ctghoteltab"). Style.top = offettop + "px";