JavaScript 代码优化

JavaScript 代码优化

　　需要的经验： JavaScript 相关工作知识

　　客户端脚本能让你的应用更加地动态和活跃， 但是浏览器对代码的解析可能造成效率问题， 而这种性能差异在客户端之间也不尽相同。 这里我们讨论和给出一些优化你的 JavaScript 代码的提示和最佳实践。

　使用字符串

　　字符串连接操作会对 Internet Explorer 6 和 7 的垃圾收集带来很大的影响。 尽管这个问题在 Internet Explorer 8 里面得到解决 -- 字符串连接在 IE8 和其它非 IE 浏览器（如 Chrome）中稍微更有效率一点 -- 如果你的用户中有很大一部分在使用 Internet Explorer 6 或 7， 你就需要非常注意你构建字符串的方式了。

　　有如下示例代码：

 

以下为引用的内容：

var veryLongMessage =
'This is a long string that due to our strict line length limit of' +
maxCharsPerLine +
' characters per line must be wrapped. ' +
percentWhoDislike +
'% of engineers dislike this rule. The line length limit is for ' +
' style purposes, but we don't want it to have a performance impact.' +
' So the question is how should we do the wrapping?';

 

　　比起用连接的方式， 尝试使用 join（）：

 

以下为引用的内容：

var veryLongMessage =
['This is a long string that due to our strict line length limit of',
maxCharsPerLine,
' characters per line must be wrapped. ',
percentWhoDislike,
'% of engineers dislike this rule. The line length limit is for ',
' style purposes, but we don't want it to have a performance impact.',
' So the question is how should we do the wrapping?'
].join();

 

　　相似的， 用连接的方式在条件语句和循环中构建字符串是很低效的。 错误的方式：

 

以下为引用的内容：

var fibonacciStr = '前 20 个斐波那契数 ';
for (var i = 0; i < 20; i++) {
fibonacciStr += i + ' = ' + fibonacci(i) + '
';
}

 

　　正确的方法：

 

以下为引用的内容：
var strBuilder = ['前 20 个斐波那契数:'];
for (var i = 0; i < 20; i++) {
  strBuilder.push(i, ' = ', fibonacci(i));
}
var fibonacciStr = strBuilder.join('');

 

　构建通过辅助函数生成的字符串

　　通过传递字符串构建器（可以是数组或者辅助类）到函数中构建长字符串， 以避免出现存放临时结果的字符串。

　　例如， 假定 buildMenuItemHtml_ 需要用文字串和变量构建一个字符串， 并且会在内部使用一个字符串构建器， 与其使用：

 

以下为引用的内容：

var strBuilder = [];
for (var i = 0; i < menuItems.length; i++) {
  strBuilder.push(this.buildMenuItemHtml_(menuItems[i]));
}
var menuHtml = strBuilder.join();

不如用:

var strBuilder = [];
for (var i = 0; i < menuItems.length; i++) {
  this.buildMenuItem_(menuItems[i], strBuilder);
}
var menuHtml = strBuilder.join();

 

　定义类的方法

　　下面的代码效率不高， 因为每次构造 baz.Bar 的实例时， 都会为 foo 创建一个新函数和闭包（closure）：

 

以下为引用的内容：

baz.Bar = function() {
  // 构造函数代码
  this.foo = function() {
  // 方法代码
  };
}

推荐的方式为:

baz.Bar = function() {
  // 构造函数代码
};

baz.Bar.prototype.foo = function() {
  // 方法代码
};

 

　　用这种方式， 无论构造了多少个 baz.Bar 实例， 只会创建一个函数给 foo， 同时不会创建任何闭包。

第1页:JavaScript 代码优化(1)   第2页:JavaScript 代码优化(2)