js代码优化

引用：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 将加载时不需要的js放在body结尾

2 将多个js代码合并

3 代码压缩

4 将switch用例换成数组

复制代码 代码如下:

var caseContent = '';//条件判断后处理内容
var caseValue = 5 ;//条件判断值
switch(caseValue){
case 0:
caseContent = "鞋子";
break;
case 1:
caseContent = "裤子";
break;
case 2:
caseContent = "外套";
break;
... ...
case 5:
caseContent = "帽子";
break;
default :
caseContent = "随便";
break;
}

数组用例

复制代码 代码如下:

var caseContent = '';//条件判断后处理内容
var caseValue = 5 ;//条件判断值
var caseContentArr = ["鞋子","裤子","外套"... ...,"帽子"];
caseContent = caseContentArr[caseValue] ? caseContentArr[caseValue]:"随便";

优缺点分析
数组方式代码简洁、效率高，但可读性不如switch用例。

字符串的拼接在我们开发中会经常遇到，所以我把其放在首位，我们往往习惯的直接用+=的方式来拼接字符串，其实这种拼接的方式效率非常的低，我们可以用一种巧妙的方法来实现字符串的拼接，那就是利用数组的join方法。

<div class="one" id="one"></div>
<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />

//效率低的
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("用时:" + (end - start) + "毫秒");
}
//效率高的
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("用时:" + (end - start) + "毫秒");
}

 

　　我们看看其在不同浏览器下执行的情况

　　我们会发现，在IE6下其差别是相当明显的，其实这种情况在IE的高版本中体现的也非常明显，但是在Firefox下却没有多大的区别，相反第二种的 相对效率还要低点，不过只是差别2ms左右，而Chrome也和Firefox类似。另外在这里顺便说明一下，在我们给数组添加元素的时候，很多人喜欢用 数组的原生的方法push，其实直接用arr[i]或者arr[arr.length]的方式要快一点，大概在10000次循环的情况IE浏览器下会有十 几毫秒的差别。

 

　　2、for循环

　　for循环是我们经常会遇到的情况，我们先看看下面例子：

<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />
var arr = [];
for(var i = 0; i < 10000; i++){
arr[i] = "<div>" + i + "</div>";
}
document.body.innerHTML += arr.join("");

//效率低的
function func1(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0; i < divs.length; i++){
//"效率低"
}
var end = new Date().getTime();
alert("用时：" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0, len = divs.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
alert("用时：" + (end - start) + "毫秒");
}

 

　　由上表可以看出，在IE6.0下，其差别是非常明显，而在Firefox和Chrome下几乎没有差别，之所以在IE6.0下会有这种情况，主要是因 为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点，所以在 我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。但是并不是只要是取长度都会出现如此明显的差别，如果我们仅仅 是操作一个数组，取得的是一个数组的长度，那么其实两种方式的写法都差不多，我们看下面的例子：

<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />
var arr2 = [];
for(var i = 0; i < 10000; i++){
arr2[i] = "<div>" + i + "</div>";
}
//效率低的
function func1(){
var start = new Date().getTime();
for(var i = 0; i < arr2.length; i++){
//"效率低"
}
var end = new Date().getTime();
alert("用时：" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var start = new Date().getTime();
for(var i = 0, len = arr2.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
alert("用时：" + (end - start) + "毫秒");
} 　　

 

　　从上表可以看出，如果仅仅是一个数组的话，我们看到其实两种写法都是差不多的，其实如果我们把循环再上调到100000次的话，也仅仅是差别几毫秒而 已，所以在数组的情况下，我认为都是一样的。对于for循环的优化，也有人提出很多点，有人认为用-=1，或者从大到小的方式循环等等，我认为是完全没有 必要的，这些优化往往实际情况下根本没有表现出来，换句话说只是计算机级别的微小的变化，但是给我们带来的却是代码的可读性大大的降低，所以实在是得不偿 失。