JS代码优化

1.注意作用域

（1）避免全局查找：

将在一个函数中会用到多次的全局对象存储为局部变量总是没错的。

 

function updateUI(){
	var imgs = document.getElementsByTagName('img');
	for (var i = 0; i < imgs.length; i++) {
		imgs[i].title = document.title + " image " + i;
	}
	//........
}
// 函数有两次对全局对象document对象的引用。如果页面上有多个图片，
// 那么for循环中document引用就会被执行多次，每次都要进行作用域链的查找

 

 

 

 

function updateUI(){
	var doc = document;
	var imgs = doc.getElementsByTagName('img');
	for (var i = 0; i < imgs.length; i++) {
		imgs[i].title = doc.title + " image " + i;
	}
	//........
}
// 为了优化代码，可以通过创建一个局部变量指向document对象，
// 就可以通过限制一次全局查找来优化这个函数的性能

 

 

 

 

 

（2）避免with语句

和函数类似，with语句会创建自己的作用域，因此会增加其中执行代码的作用域的长度。由于额外的作用域链查找，在with语句中执行的代码肯定比外面执行的代码慢。

 

function updateUI(){
	with(document.body){
		alert(tagName);
		innerHTML = "hello";
	}
}

应该改为：

 

 

function updateUI(){
	var body = document.body;
	alert(body.tagName);
	body.innerHTML = "hello";
}

 

 

 

 

 

原因：标识符解析是沿着作用域链一级一级地搜索标识符的过程，搜索过程始终从作用域链的前端开始，然后逐级地向后回溯，直到找到标识符为止。

总结：访问全局变量总要比访问局部变量慢，因为需要遍历作用域链。只要能减少花费在作用域链上的时间，就能增加脚本的整体性能。

 

2.选择正确方法

（1）避免不必要的属性查找

例如：

var query = window.location.href.substring(window.location.href.indexOf("?"));

 

上述语句，进行了6次属性查找

 

应该改为，进行了4次属性查找，比原始版本节省33%的属性查找时间。

var url = window.location.href;
var query = url.substring(url.indexOf("?"));

 

总结：只要能减少算法的复杂度，就要尽可能减少。尽可能多地使用局部变量将属性查找替换为值查找。进一步讲，如果可以用数字化的数组位置进行访问，也可以用命名属性，那么使用数字位置。

 

 

（2）优化循环

①减值迭代

 

for (var i = 0; i < array.length; i++) {
	fn(array[i]);
}

每次循环i都会与array.length进行比较，涉及属性查找，时间复杂度O（n）

 

 

for (var i = array.length-1; i >=0; i--) {
	fn(array[i]);
}

改为与常数0比较，时间复杂度变为O(1)

 

 

②简化终止条件

由于每次循环过程都会计算终止条件，所以必须保证它尽可能快，也就是避免属性查找以及其他O（n）操作

上述例子改为减值迭代，但如果函数内的数据处理与顺序有关，无法使用减值迭代，则应优化为

 

for (var i = 0,len=array.length; i < len; i++) {
	fn(array[i]);
}

那么前面提到的避免全局查找的例子也可以再进一步优化终止条件

 

 

function updateUI(){
	var doc = document;
	var imgs = doc.getElementsByTagName('img');
	for (var i = 0，len=imgs.length; i < len; i++) {
		imgs[i].title = doc.title + " image " + i;
	}
	//........
}
// 为了优化代码，可以通过创建一个局部变量指向document对象，
// 就可以通过限制一次全局查找来优化这个函数的性能

 

 

 

③简化循环体

循环体执行最多，确保最大限度被优化，确保没有某些可以很容易被移出循环体的密集计算。

 

④使用后测试循环

for循环，while循环属于前测试循环。而do-while属于后测试循环，可以避免最初终止条件的计算，因此运行更快、

 

（3）展开循环

当循环的次数确定，消除循环并多次使用函数调用往往更快。

 

for (var i = 0; i < 3; i++) {
	fn(array[i]);
}

 

fn(array[0]);
fn(array[1]);
fn(array[2]);

 

 

第二种方法比第一种更快
 

 

（4）避免双重解释

尽可能避免出现需要按照javascript解析的字符串

例如

 

eval("alert('hello!')");

var fn = new Function("alert('hello!')");

setTimeout("alert('hello!')",500);

 

 

 

（5）原生方法较快
（6）Switch语句较快
（7）位运算符较快

 

3.最小化语句数

（1）多个变量声明合并成一条语句

 

var a = 1;
var b = 5;
var c = "red";

 

 

应该优化为

 

var a = 1,
    b = 5,
    c = "red";

 

 

 

 

 

 

 

（2）插入迭代值

 

var age = person[i];
i++;

应该优化为

var age = person[i++];

 

 

 

 

 

（3）使用数组和对象字面量

 

var arr = new Array();
arr[0] = 1;
arr[1] = 50;
arr[2] = 7;

应该优化为

var arr = [1,50,4];

 

var obj = new Object();
obj.name = "Jack";
obj.age = 27;
obj.sayName = function(){
	return this.name;
}

应该优化为

 

var obj = {
	name:"Jack",
	age:27,
	sayName:function(){
		return(this.name);
	}
};

 

 

 

 

 

 

 

4.优化DOM交互

（1）最小化现场更新
（2）使用innerHTML
（3）使用事件代理
（4）注意HTMLCollection