Read the key notes on high-performance programming in Javascript

First point

//Efficient and simple //Low energy consumptionchildren        //childNodes
childElementCount            //
firstElementChild              //firstChild
lastEelmentChild              //lastChild
nextElementSibling           //nextSibling
previousElementSibling       //previousSibling

The second point: efficient application of selectors

&lt;div &gt;
&lt;a href="/"&gt;I&lt;/a&gt;&lt;a href="/"&gt;联系I们&lt;/a&gt;&lt;a href="/about/"&gt;Advertising Services&lt;/a&gt;&lt;a href="/about/"&gt;Talent Service&lt;/a&gt;&amp;copy;2006-2016 &lt;a href="https:///">I</a>&lt;/div&gt;

var aArr1= ("#footer_bottom a");//Simple and efficientvar aArr2 = ("footer_bottom").getElementsByTagName("a");//Inefficient
//return 
&lt;a href="/"&gt;I&lt;/a&gt;,
&lt;a href="/"&gt;联系I们&lt;/a&gt;,
&lt;a href="/about/"&gt;Advertising Services&lt;/a&gt;,
&lt;a href="/about/"&gt;Talent Service&lt;/a&gt;,

//Select the first child nodevar a = ("#footer_bottom a");
//return <a href="/">I</a>
//Select multiple nodesvar divs = (",,");

Note: Most browsers support the above attributes, IE6, 7, 8 only support children attributes

Reduce DOM re-rendering and typography (three ways)

1. First hide the element to be processed, then process it, and finally display it

2. How to create file fragments (recommended) ();

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

Below is my editor's addition

Store looped objects

Before use:

var str = "nanananana";
for (var n = 0; n < ; n++) {}

After use:

　var str = "nanananana",
strLgth = ;
for (var n = 0; n < strLgth ; n++) {}

Loops consume a lot of performance, storing the loop objects, reducing the need to calculate the object in each loop.

Minimize Reduced Reflow and Repaint

Before use:

var coored = ("ctgHotelTab");
("ctgHotelTab"). =  + 35 + "px";

After use:

var coored = ("ctgHotelTab"),
offetTop =  + 35;
("ctgHotelTab"). = offetTop + "px";