Js optimization works for IE6.0 (detailed)

Js optimization works for IE6.0, which summarizes the following points:

I. String concatenation: concatenate strings with Arrays
Copy codeThe Code is as follows:
Function func2 (){
Var start = new Date (). getTime ();
Var array = [];
For (var I = 0; I <10000; I ++ ){
Array [I] = "<input type = 'button 'value = 'A'> ";
}

2. for Loop: Calculate the length and call it directly.
Copy codeThe Code is as follows:
Function func2 (){
Var divs = document. getElementsByTagName ("div ");
Var start = new Date (). getTime ();
For (var I = 0, len = divs. length; I <len; I ++ ){
// "High Efficiency"
}

3. Reduce page re-painting: You can splice the page with a middle school and then assign a value to the page.
Copy codeThe Code is as follows:
Function func2 (){
Var obj = document. getElementById ("demo ");
Var start = new Date (). getTime ();
Var arr = [];
For (var I = 0; I <100; I ++ ){
Arr [I] = str + I;
}
Obj. innerHTML = arr. join ("");

4. Reduce the number of searches on the scope chain: if multiple page values are obtained, a document object is defined and the object is called.
Copy codeThe Code is as follows:
Var doc = document;
For (var I = 0; I <10000; I ++ ){
Var but1 = doc. getElementById ("but1 ");
Var but2 = doc. getElementById ("but2 ");
Var inputs = doc. getElementsByTagName ("input ");
}
}

5. Avoid Double interpretation: Do not call functions or methods repeatedly.

1. String concatenation

String concatenation is often encountered in our development, so I put it in the first place. We are often used to directly concatenate strings using the + = method, in fact, this splicing method is very inefficient. We can use a clever method to concatenate strings, that is, the join method of arrays.
Copy codeThe Code is as follows:
<Div class = "one" id = "one"> </div>
<Input type = "button" value = "Low Efficiency" onclick = "func1 ()"/>
<Input type = "button" value = "High Efficiency" onclick = "func2 ()"/>

// Low Efficiency
Function func1 (){
Var start = new Date (). getTime ();
Var template = "";
For (var I = 0; I <10000; I ++ ){
Template + = "<input type = 'button 'value = 'A'> ";
}
Var end = new Date (). getTime ();
Document. getElementById ("one"). innerHTML = template;
Alert ("time used:" + (end-start) + "millisecond ");
}
// High Efficiency
Function func2 (){
Var start = new Date (). getTime ();
Var array = [];
For (var I = 0; I <10000; I ++ ){
Array [I] = "<input type = 'button 'value = 'A'> ";
}
Var end = new Date (). getTime ();
Document. getElementById ("one"). innerHTML = array. join ("");
Alert ("time used:" + (end-start) + "millisecond ");
}
 
Let's see how it works in different browsers.

We will find that the difference in IE6 is quite obvious. In fact, this situation is also evident in the higher version of IE, but there is not much difference in Firefox, on the contrary, the relative efficiency of the second type is lower, but the difference is only about 2 ms, and Chrome is similar to Firefox. In addition, by the way, when we add elements to an array, many people prefer to use the native method of the array to push. In fact, the arr [I] Or arr [arr. length] is faster. In the case of 10000 loops, the difference may be several dozen milliseconds in IE.

2. for Loop

For Loop is a common situation. Let's take a look at the following example:
Copy codeThe Code is as follows:
<Input type = "button" value = "Low Efficiency" onclick = "func1 ()"/>
<Input type = "button" value = "High Efficiency" onclick = "func2 ()"/>
Var arr = [];
For (var I = 0; I <10000; I ++ ){
Arr [I] = "<div>" + I + "</div> ";
}
Document. body. innerHTML + = arr. join ("");

// Low Efficiency
Function func1 (){
Var divs = document. getElementsByTagName ("div ");
Var start = new Date (). getTime ();
For (var I = 0; I <divs. length; I ++ ){
// "Low Efficiency"
}
Var end = new Date (). getTime ();
Alert ("time used:" + (end-start) + "millisecond ");
}
// High Efficiency
Function func2 (){
Var divs = document. getElementsByTagName ("div ");
Var start = new Date (). getTime ();
For (var I = 0, len = divs. length; I <len; I ++ ){
// "High Efficiency"
}
Var end = new Date (). getTime ();
Alert ("time used:" + (end-start) + "millisecond ");
}

From the table above, we can see that in IE6.0, the difference is very obvious, and there is almost no difference in Firefox and Chrome. This is the case in IE6.0, this is mainly because the for loop is being executed. In the first case, the length is calculated every time, while in the second case, the length is calculated at the beginning and saved to a variable, therefore, the execution efficiency is high, so when we use the for loop, especially when we need to calculate the length, we should start to save it to a variable. But not as long as we get the length, there will be such a significant difference. If we only operate on an array and get the length of an array, then the two writing methods are similar, let's look at the following example:
Copy codeThe Code is as follows:
<Input type = "button" value = "Low Efficiency" onclick = "func1 ()"/>
<Input type = "button" value = "High Efficiency" onclick = "func2 ()"/>
Var arr2 = [];
For (var I = 0; I <10000; I ++ ){
Arr2 [I] = "<div>" + I + "</div> ";
}
// Low Efficiency
Function func1 (){
Var start = new Date (). getTime ();
For (var I = 0; I <arr2.length; I ++ ){
// "Low Efficiency"
}
Var end = new Date (). getTime ();
Alert ("time used:" + (end-start) + "millisecond ");
}
// High Efficiency
Function func2 (){
Var start = new Date (). getTime ();
For (var I = 0, len = arr2.length; I <len; I ++ ){
// "High Efficiency"
}
Var end = new Date (). getTime ();
Alert ("time used:" + (end-start) + "millisecond ");
}

From the table above, we can see that if it is just an array, we can see that the two writing methods are similar. In fact, if we increase the loop to 100000 times, it will only be a few milliseconds, so in the case of arrays, I think they are all the same. For optimization of the for loop, some people also put forward many points. Some people think that it is completely unnecessary to use a-= 1 or a loop from large to small, these optimizations are often not shown at all in actual situations. In other words, they are only minor changes at the computer level, but they bring us a significant reduction in the readability of the Code, which is worth the candle.

3. Reduce page re-painting

Although the essence of page re-painting is not the optimization of JS itself, it is often caused by JS, and the re-painting often seriously affects the page performance, so it is necessary to take it out, let's look at the following example:
Copy codeThe Code is as follows:
<Div id = "demo"> </div>
<Input type = "button" value = "Low Efficiency" onclick = "func1 ()"/>
<Input type = "button" value = "High Efficiency" onclick = "func2 ()"/>
Var str = "<div> This is a test string </div> <div> this is a test string </div> <div> This is a test string </div> <div> This is a test string </div> <div> This is a test string string </div> <div> This is a test string </div> ";
// Low Efficiency
Function func1 (){
Var obj = document. getElementById ("demo ");
Var start = new Date (). getTime ();
For (var I = 0; I <100; I ++ ){
Obj. innerHTML + = str + I;
}
Var end = new Date (). getTime ();
Alert ("time used" + (end-start) + "millisecond ");
}
// High Efficiency
Function func2 (){
Var obj = document. getElementById ("demo ");
Var start = new Date (). getTime ();
Var arr = [];
For (var I = 0; I <100; I ++ ){
Arr [I] = str + I;
}
Obj. innerHTML = arr. join ("");
Var end = new Date (). getTime ();
Alert ("time used" + (end-start) + "millisecond ");
}

In this example, I only used 100 cycles, because if I used 10000 loops, the browser basically got stuck, but even for 100 loops, let's take a look at the following execution results.

What we can see is that this is an amazing result, with only 100 loops. No matter what browser, there is such a big difference. In addition, we also found that, here, the execution efficiency of IE6 is much better than that of Firefox. It can be seen that Firefox has not made some optimizations in page re-painting. Note that page re-painting is not only affected by innerHTML. If you change the style and position of an element, page re-painting is triggered. Therefore, you must pay attention to this.

4. Reduce the number of searches on the scope chain

We know that when JavaScript code is executed, if you need to access a variable or function, it needs to traverse the scope chain of the current execution environment, traversal is a back traversal from the front-end level of the scope chain until the global execution environment, so there is often a situation here, that is, if we need to frequently access variable objects in the global environment, we must traverse the current scope chain at a level every time. This is obviously time-consuming, let's look at the following example:
Copy codeThe Code is as follows:
<Div id = "demo"> </div>
<Input id = "but1" type = "button" onclick = "func1 ()" value = "Low Efficiency"/>
<Input id = "but2" type = "button" onclick = "func2 ()" value = "High Efficiency"/>

Function func1 (){
Var start = new Date (). getTime ();
For (var I = 0; I <10000; I ++ ){
Var but1 = document. getElementById ("but1 ");
Var but2 = document. getElementById ("but2 ");
Var inputs = document. getElementsByTagName ("input ");
Var divs = document. getElementsByTagName ("div ");
Var but1 = document. getElementById ("but1 ");
Var but2 = document. getElementById ("but2 ");
Var inputs = document. getElementsByTagName ("input ");
Var divs = document. getElementsByTagName ("div ");
Var but1 = document. getElementById ("but1 ");
Var but2 = document. getElementById ("but2 ");
Var inputs = document. getElementsByTagName ("input ");
Var divs = document. getElementsByTagName ("div ");
Var but1 = document. getElementById ("but1 ");
Var but2 = document. getElementById ("but2 ");
Var inputs = document. getElementsByTagName ("input ");
Var divs = document. getElementsByTagName ("div ");
Var but1 = document. getElementById ("but1 ");
Var but2 = document. getElementById ("but2 ");
Var inputs = document. getElementsByTagName ("input ");
Var divs = document. getElementsByTagName ("div ");
Var but1 = document. getElementById ("but1 ");
Var but2 = document. getElementById ("but2 ");
Var inputs = document. getElementsByTagName ("input ");
Var divs = document. getElementsByTagName ("div ");
}
Var end = new Date (). getTime ();
Alert ("time used" + (end-start) + "millisecond ");
}
Function func2 (){
Var start = new Date (). getTime ();
Var doc = document;
For (var I = 0; I <10000; I ++ ){
Var but1 = doc. getElementById ("but1 ");
Var but2 = doc. getElementById ("but2 ");
Var inputs = doc. getElementsByTagName ("input ");
Var divs = doc. getElementsByTagName ("div ");
Var but1 = doc. getElementById ("but1 ");
Var but2 = doc. getElementById ("but2 ");
Var inputs = doc. getElementsByTagName ("input ");
Var divs = doc. getElementsByTagName ("div ");
Var but1 = doc. getElementById ("but1 ");
Var but2 = doc. getElementById ("but2 ");
Var inputs = doc. getElementsByTagName ("input ");
Var divs = doc. getElementsByTagName ("div ");
Var but1 = doc. getElementById ("but1 ");
Var but2 = doc. getElementById ("but2 ");
Var inputs = doc. getElementsByTagName ("input ");
Var divs = doc. getElementsByTagName ("div ");
Var but1 = doc. getElementById ("but1 ");
Var but2 = doc. getElementById ("but2 ");
Var inputs = doc. getElementsByTagName ("input ");
Var divs = doc. getElementsByTagName ("div ");
Var but1 = doc. getElementById ("but1 ");
Var but2 = doc. getElementById ("but2 ");
Var inputs = doc. getElementsByTagName ("input ");
Var divs = doc. getElementsByTagName ("div ");
}
Var end = new Date (). getTime ();
Alert ("time used" + (end-start) + "millisecond ");
}

In the code above, the second case is to put the global object variable into the function, save it, And then directly access this variable. The first case is to traverse the scope chain every time, until the global environment, we can see that the second situation actually only traverses once, but the first case is that it traverses every time, so let's look at the execution result:

From the table above, we can see that the difference in IE6 is very obvious, and this difference will be very obvious in the case of multi-level scope chain and multiple global variables.

5. Avoid Double Interpretation

We often encounter situations of double interpretation. Sometimes we don't take this situation into account and it will affect the efficiency, we usually encounter this problem when using eval, new Function, and setTimeout. Let's look at the example below:
Copy codeThe Code is as follows:
<Div id = "demo"> </div>
<Input id = "but1" type = "button" onclick = "func1 ()" value = "Low Efficiency"/>
<Input id = "but2" type = "button" onclick = "func2 ()" value = "High Efficiency"/>
Var sum, num1 = 1, num2 = 2;
Function func1 (){
Var start = new Date (). getTime ();
For (var I = 0; I <10000; I ++ ){
Var func = new Function ("sum + = num1; num1 + = num2; num2 ++ ;");
Func ();
}
Var end = new Date (). getTime ();
Alert ("time used" + (end-start) + "millisecond ");
}

Function func2 (){
Var start = new Date (). getTime ();
For (var I = 0; I <10000; I ++ ){
Sum + = num1;
Num1 + = num2;
Num2 ++;
}
Var end = new Date (). getTime ();
Alert ("time used" + (end-start) + "millisecond ");
}

In the first case, we use the new Function for dual interpretation. In the second case, we avoid double interpretation. Let's look at the performance in different browsers:

As you can see, in all browsers, double interpretations are quite open, so avoid double interpretations as much as possible.

Thanks to "SeaSunK" for correcting the error in the fourth test report. It has been modified. As for the last-mentioned func1 initialization, there was no comparability, so I changed eval and found that there was still an impact in IE6.0, and in Firefox, using eval has a greater impact on efficiency. In Firefox, it takes more than 10 seconds for 10000 loops, so I have changed all loops to 1000. View the code and report.
Copy codeThe Code is as follows:
Var sum, num1 = 1, num2 = 2;
Function func1 (){
Var start = new Date (). getTime ();
For (var I = 0; I <1000; I ++ ){
Eval ("sum + = num1; num1 + = num2; num2 ++ ;");
}
Var end = new Date (). getTime ();
Alert ("time used" + (end-start) + "millisecond ");
}
Function func2 (){
Var start = new Date (). getTime ();
For (var I = 0; I <1000; I ++ ){
Sum + = num1;
Num1 + = num2;
Num2 ++;
}
Var end = new Date (). getTime ();
Alert ("time used" + (end-start) + "millisecond ");
}