JavaScript性能陷阱小结(附实例说明)

答案：1.避免使用eval或者Function构造函数 
2.避免使用with 
3.不要在性能要求关键的函数中使用try-catch-finally 
4.避免使用全局变量 
5.避免在性能要求关键的函数中使用for-in 
6.使用字符串累加计算风格 
7.原操作会比函数调用快 
8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串 
9.避免在对象中使用不需要的DOM引用 
10.最清晰的目标速度，最小化作用域链 
11.试着在脚本中少使用注释，避免使用长变量名 
12.在当前作用域存储应用的外部变量 
13.使用变量缓存值 

1.避免使用eval或者Function构造函数 
使用eval或者Function构造函数的代价是非常昂贵的，每次都需要脚本引擎转换源代码到可执行代码。 
此外，使用eval处理字符串必须在运行时解释。 

运行缓慢的代码： 
复制代码 代码如下:
 
function addMethod(object, property, code) { 
object[property] = new Function(code); 
} 
addMethod(myObj, 'methodName', 'this.localVar=foo'); 
 
运行更快的代码： 
复制代码 代码如下:
 
function addMethod(object, property, func) { 
object[property] = func; 
} 
addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; }); 
 
2.避免使用with 
尽管很方便，with需要附加的查找引用时间，因为它在编译的时候并不知道作用域的上下没。 

运行缓慢的代码： 
复制代码 代码如下:
 
with (test.object) { 
foo = 'Value of foo property of object'; 
bar = 'Value of bar property of object'; 
} 
 
运行更快的代码： 
复制代码 代码如下:
 
var myObj = test.object; 
myObj.foo = 'Value of foo property of object'; 
myObj.bar = 'Value of bar property of object'; 
 
3.不要在性能要求关键的函数中使用try-catch-finally 
try-catch-finally在运行时每次都会在当前作用域创建一个新的变量，用于分配语句执行的异常。 
异常处理应该在脚本的高层完成，在异常不是很频繁发生的地方，比如一个循环体的外面。 
如果可能，尽量完全避免使用try-catch-finally。 

运行缓慢的代码： 
复制代码 代码如下:
 
var object = ['foo', 'bar'], i; 
for (i = 0; i < object.length; i++) { 
try { 
// do something that throws an exception 
} catch (e) { 
// handle exception 
} 
} 
 
运行更快的代码： 
复制代码 代码如下:
 
var object = ['foo', 'bar'], i; 
try { 
for (i = 0; i < object.length; i++) { 
// do something 
} 
} catch (e) { 
// handle exception 
} 
 
4.避免使用全局变量 
如果你在一个函数或者其它作用域中使用全局变量，脚本引擎需要遍历整个作用域去查找他们。 
全局作用域中的变量在脚本的生命周期里都存在，然后局部范围的会在局部范围失去的时候被销毁。 

运行缓慢的代码： 
复制代码 代码如下:
 
var i, 
str = ''; 
function globalScope() { 
for (i=0; i < 100; i++) { 
str += i; // here we reference i and str in global scope which is slow 
} 
} 
globalScope(); 
 
运行更快的代码： 
复制代码 代码如下:
 
function localScope() { 
var i, 
str = ''; 
for (i=0; i < 100; i++) { 
str += i; // i and str in local scope which is faster 
} 
} 
localScope(); 
 
5.避免在性能要求关键的函数中使用for-in 
for-in循环需要脚本引擎建立一张所有可枚举属性的列表，并检查是否与先前的重复。 
如果你的for循环作用域中的代码没有修改数组，可以预先计算好数组的长度用于在for循环中迭代数组。 

运行缓慢的代码： 
复制代码 代码如下:
 
var sum = 0; 
for (var i in arr) { 
sum += arr[i]; 
} 
 
运行更快的代码： 
复制代码 代码如下:
 
var sum = 0; 
for (var i = 0, len = arr.length; i < len; i++) { 
sum += arr[i]; 
} 
 
6.使用字符串累加计算风格 
使用+运算会在内存中创建一个新的字符串并把连接的值赋给它。仅仅是将这个结果赋值给一个变量。 
为了避免连接结果的中间变量，可以使用+=来直接赋值结果。 

运行缓慢的代码： 
复制代码 代码如下:
 
a += 'x' + 'y'; 
 
运行更快的代码： 
复制代码 代码如下:
 
a += 'x'; a += 'y'; 
 
7.原操作会比函数调用快 
可以考虑在性能要求关键的循环和函数中使用可以替代的原操作。 
运行缓慢的代码： 
复制代码 代码如下:
 
var min = Math.min(a, b); 
arr.push(val); 
 
运行更快的代码： 
复制代码 代码如下:
 
var min = a < b ? a : b; 
arr[arr.length] = val; 
 
8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串 
如果你传递一个字符串到setTimeout() 或者 setInterval()中，字符串将会被eval计算而导致缓慢。 
使用一个匿名函数包装来代替，这样在编译的时候就可以被解释和优化。 

运行缓慢的代码： 
setInterval('doSomethingPeriodically()', 1000); 
setTimeOut('doSomethingAfterFiveSeconds()', 5000); 

运行更快的代码： 
复制代码 代码如下:
 
setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000); 
 
9.避免在对象中使用不需要的DOM引用 

不要这么做： 

复制代码 代码如下:
 
var car = new Object(); 
car.color = "red"; 
car.type = "sedan" 
 
更好的一种形式： 

复制代码 代码如下:
 
var car = { 
color : "red"; 
type : "sedan" 
} 
 
10.最清晰的目标速度，最小化作用域链 

低效率方法： 
复制代码 代码如下:
 
var url = location.href; 
 
一种高效形式： 
复制代码 代码如下:
 
var url = window.location

上一个：jQuery Tips 为AJAX回调函数传递额外参数的方法
下一个：JavaScript去掉空格的方法集合