JavaScript性能陷阱 | 未完待续

JavaScript陷阱太多，因此我们得步步为营，下面是一些常见的影响性能的陷阱。
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';
}

运行更快的代码：

1
2
3

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.原操作会比函数调用快
可以考虑在性能要求关键的循环和函数中使用可以替代的原操作。
运行缓慢的代码：

1 2	var min = Math.min(a, b); arr.push(val);

运行更快的代码：

1 2	var min = a < b ? a : b; arr[arr.length] = val;

8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串
如果你传递一个字符串到setTimeout() 或者 setInterval()中，字符串将会被eval计算而导致缓慢。
使用一个匿名函数包装来代替，这样在编译的时候就可以被解释和优化。

运行缓慢的代码：

1 2	setInterval('doSomethingPeriodically()', 1000); setTimeOut('doSomethingAfterFiveSeconds()', 5000);

运行更快的代码：

1 2	setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000);

9.避免在对象中使用不需要的DOM引用

不要这么做：

1
2
3

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.href;

11.试着在脚本中少使用注释，避免使用长变量名
尽可能的保证注释少或者避免使用注释，特别是在函数，循环以及数组中。
注释不必要的减缓脚本执行并且增加了文件大小。比如：

不建议的形式：

function someFunction()
{
var person_full_name="somename"; /* stores the full name*/
}

更好的写法：

function someFunction()
{
var name="somename";
}

12.在当前作用域存储应用的外部变量
当一个函数被执行的运行上下问被穿件，一个活动的对象会包含所有局部变量会被推到上下文链的前面。
在作用域链中，最慢的是清楚的识别标识符，意味着局部变量是最快的。存储频繁使用的外部变量读和写都会明显的加快。这对于全局变量和其他深层次的标识符查找特别明显。
同样，在当前作用域中的变量(var myVar)比对象像属性的访问速度快(this.myVar)。

运行缓慢的代码：

function doSomething(text) {
var divs = document.getElementsByTagName('div'),
text = ['foo', /* ... n ... */, 'bar'];
for (var i = 0, l = divs.length; i < l; i++) {
divs[i].innerHTML = text[i];
}
}

运行更快的代码：

function doSomethingFaster(text) {
var doc = document,
divs = doc.getElementsByTagName('div'),
text = ['foo', /* ... n ... */, 'bar'];
for (var i = 0, l = divs.length; i < l; i++) {
divs[i].innerHTML = text[i];
}
}

如果你需要访问一个元素（如 head）在一个大的循环中，使用一个本地的DOM访问(如例子中的get)会更快。
运行更快的代码：

function doSomethingElseFaster() {
var get = document.getElementsByTagName;
for (var i = 0, i < 100000; i++) {
get('head');
}
}

13.使用变量缓存值
在做重复工作的地方使用局部变量缓存值。
下面的一组例子表明了存储值到局部变量的广泛意义。

例子1.计算执行前在循环体内使用变量存储数学函数
错误的方法：

var d=35;
for (var i=0; i<1000; i++) {
y += Math.sin(d)*10;
}

更好的处理：

var d = 55;
var math_sind = Math.sin(d)*10;
for (var i=0; i<1000; i++) {
y += math_sind;
}

例子2.保存数组的长度在循环中使用
糟糕的处理:
数组的长度每次都会被重复计算

1
2
3

for (var i = 0; i < arr.length; i++) {
// do something
}

更好的改进：
更好的方法是保存数组的长度

1
2
3

for (var i = 0, len = arr.length; i < len; i++) {
// do something
}

总的来说，如果已经做了一次，我们就不需要重复的做不必要的工作。例如，作用域或者函数中多次使用到计算的一个表达式的值，保存到变量可以使它多次被使用，否则我们会过头的声明一个变量并赋值然后只适用一次。所以请记住这些。

via JavaScript Performance Best Practices
-EOF-

15 thoughts on “JavaScript性能陷阱”

qinghao on 2010/06/25 at 3:50 pm said:
第2点
顺便说一下JS主要不是编译的是解释的. 虽说不影响表达,但学术还是严谨点好.

第6点这是不是格式搞乱了?
a += ‘x’ + ‘y’;
运行更快的代码：
```
a += 'x'; a += 'y';
9.避免在对象中使用不需要的DOM引用
new Object也是DOM引用?
这个应该是说不要轻意使用new Object()还有new Array(), 以及new Function() 一般情况使用 {...}, [...], f = function(..){...} 即:
这和上面那一点应该说的是一回事.
最后补充一个少用 位运算, 因为js的所有数值运算最后(到JS引擎这层)都是全部转得浮点来算的..所以位运算可能反而更慢.
```
ashi on 2010/06/25 at 5:33 pm said:

for (var i = 0; i < arr.length; i++) {
// do something
}
慢于
for (var i = 0, len = arr.length; i < len; i++) {
// do something
}
表示怀疑，这又不是访问函数，直接访问的就是储存长度的变量
枯藤昏鸦 on 2010/06/25 at 9:15 pm said:

@ashi, 这个应该与第四点类似。
枯藤昏鸦 on 2010/06/25 at 9:16 pm said:

@qinghao, 谢谢你的补充和澄清JS是解释执行，原文中所讲的编译应该是指预处理（相对于编译执行的编译阶段）。
Avoid unnecessary DOM references in objects 还真不好理解。
谢谢你的分享～
th507 on 2010/06/25 at 10:07 pm said:

干脆这样好了，
for (var i = 0; val=arr[i]; i++) { // blablabla }
Pingback: JavaScript性能陷阱 « 每日IT新闻，最新IT资讯，聚合多站点消息，保证你与世界同步
枯藤昏鸦 on 2010/06/25 at 10:32 pm said:

这是个死循环喔～
qinghao on 2010/06/26 at 12:02 am said:

@ashi,
从JS语法上看很像C, 在C中要数组的上界(最大下标)不是数组本身的属性, 或者说即使JS实现时将长度值添加到数组属性上, 每次.length时也会从对象(一堆内存)中找到长度字段的值, 相比只取一次肯定优于每次取.

另外JS是解释的(大多数), 所以不能像有的语言如C#等在编译时把.length替换为数据长度的值的常量(你可能就因为这没有感觉慢). 每次.length引擎应该会老实的再算一下. 因为它不知道你下一行代码会不会修改数据的成员. 用这个来解释Chrome的快(除开webkit核心说), V8引擎JS编译特性也应该是重要原因之一.
qinghao on 2010/06/26 at 12:08 am said:

@qinghao,
从JS语法上看很像C, 更或者说实现思路上像C.
枯藤昏鸦 on 2010/06/26 at 12:32 am said:

@qinghao, 您这解释很专业。
gdutpxz on 2010/07/22 at 11:51 pm said:

这不是死循环吧，当i==arr.length时 arr[i]返回的是undefined，循环就结束了
枯藤昏鸦 on 2010/07/23 at 12:14 am said:

嗯，这里是我错了，的确是赋值为underfiined时为假，循环结束。谢谢@gdutpxz 提醒。
zwc on 2011/09/01 at 10:42 am said:

12.在当前作用域存储应用的外部变量
function doSomething(text) {
var divs = document.getElementsByTagName(‘div’),
text = [‘foo’, /* … n … */, ‘bar’];
for (var i = 0, l = divs.length; i < l; i++) {
divs[i].innerHTML = text[i];
}
}

function doSomethingFaster(text) {
var doc = document,
divs = doc.getElementsByTagName('div'),
text = ['foo', /* … n … */, 'bar'];
for (var i = 0, l = divs.length; i < l; i++) {
divs[i].innerHTML = text[i];
}
}

同样都是存储了 div 标签的 elements dom 为什么后一个比前一个速度快?

function doSomethingElseFaster() {
var get = document.getElementsByTagName;
for (var i = 0, i < 100000; i++) {
get('head');
}
}
为什么要用这个例子解释。。毕竟更好的方法是直接把head dom读取出来在循环里执行。
LAI on 2012/05/10 at 5:09 am said:

不错不错。这个总结得好。。那个 with 的用法让我挺意外的。
夜飞羽 on 2012/09/21 at 4:41 pm said:

第9点深有感触，哈希表应用似乎很少被大家注意到

Comments are closed.