JS code optimization

Reference: http://www.php100.com/html/webkaifa/javascript/2012/0619/10568.html

Http://www.chinaz.com/web/2011/1130/223585.shtml

Http://www.jb51.net/article/29718.htm

1 Put the unwanted JS at the end of the body when loading

2 Merging multiple JS codes

3 Code Compression

4 Replacing switch use cases with arrays

Copy CodeThe code is as follows:
var casecontent = ";//condition judgment post-processing content
var casevalue = 5;//Condition judgment value
Switch (casevalue) {
Case 0:
Casecontent = "shoes";
Break
Case 1:
Casecontent = "trousers";
Break
Case 2:
Casecontent = "Coat";
Break
... ...
Case 5:
Casecontent = "Hat";
Break
Default:
Casecontent = "casually";
Break
}

Array Use Cases

Copy CodeThe code is as follows:
var casecontent = ";//condition judgment post-processing content
var casevalue = 5;//Condition judgment value
var Casecontentarr = ["Shoes", "trousers", "coats" ..., "hats"];
Casecontent = Casecontentarr[casevalue]? Casecontentarr[casevalue]: "Casually";

pros and cons analysis
Arrays are simple and efficient, but less readable than switch use cases.

String splicing in our development will often encounter, so I put it in the first place, we tend to use the "+ =" way to splice strings, in fact, this way of splicing efficiency is very low, we can use a clever way to achieve the concatenation of strings, that is, the use of array join method.

<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 ("Spents:" + (End-start) + "milliseconds");
}
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 ("Spents:" + (End-start) + "milliseconds");
}

Let's take a look at what's happening in different browsers.

We will find that in the IE6 under the difference is quite obvious, in fact, this situation in the high version of IE is also very obvious, but there is no big difference in Firefox, the second is the relative efficiency of the lower point, but only the difference of about 2ms, and Chrome is similar to Firefox. Also here by the way, when we add elements to the array, many people like to use the array of native method push, in fact, directly with Arr[i] or arr[arr.length] way to faster, probably in 10,000 cycles of the situation IE browser will have more than 10 milliseconds difference.

2. For loop

The For loop is a situation we often encounter, let's take a look at the following example:

<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 ("Spents:" + (End-start) + "milliseconds");
}
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 ("Spents:" + (End-start) + "milliseconds");
}

As can be seen from the above table, Under IE6.0, the difference is very obvious, and in Firefox and Chrome under almost no difference, the reason is in IE6.0 this situation, mainly because the for loop in the execution, the first case will calculate the length of each time, and the second case is the beginning of the time to calculate the length, and save it in a variable, It is more efficient to perform, so when we use the For loop, especially when we need to calculate the length, we should start saving it in a variable. But not as long as the length will appear so obvious difference, if we just manipulate an array, get the length of an array, then actually the two ways of writing are similar, we look at the following example:

<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 ("Spents:" + (End-start) + "milliseconds");
}
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 ("Spents:" + (End-start) + "milliseconds");
}

As can be seen from the above table, if it is only an array, we see actually two kinds of writing are similar, in fact, if we put the cycle up to 100,000 times, it is only a few milliseconds difference, so in the case of the array, I think the same. For the optimization of the For loop, there are a lot of points, some people think that with-=1, or from a large to small cycle, and so on, I think is completely unnecessary, these optimizations are often not shown at all, in other words, just the computer level of small changes, But what brought us is that the readability of the code is greatly reduced, so it is not worth the candle.

JS code optimization