JavaScript性能优化实战：从压缩到DOM操作的高效技巧

JavaScript性能优化概述

在开发JavaScript框架的过程中，许多细节往往容易被忽视，这可能导致长期积累后在实际应用中引发严重的性能瓶颈。为此，本文梳理了提升JavaScript执行效率的关键技巧，供开发者参考。

代码压缩与规范检测

JavaScript是唯一一种对代码体积要求越精简越好的语言。我们可以利用JSMin、Packer、YUICompressor等工具对代码进行精简和压缩。这些工具会将局部变量名替换为极短的标识符（例如将parseFloat()替换为a()）。因此，在编写代码时，建议将全局变量映射到局部变量，例如使用var parseFloat = parseFloat;的方式。

建议使用JSLint来检测编写的JavaScript代码，以发现潜在问题。JSLint是一个非开源的JavaScript验证工具，能够扫描源代码并查找错误。当JSLint发现问题时，它会显示描述该问题的消息，并指出错误在源代码中的大致位置。

数组与对象遍历优化

在编写JavaScript时，遍历数组是常见操作，原始代码如下：

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

由于JavaScript的成员变量是运行时确定的，每次循环都需要查找数组的length属性，这会带来额外开销。因此，我们可以增加一个变量来缓存数组大小：

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

虽然上述优化已有一定效果，但还有更进一步的优化空间：

 
var i=array.length;
while(i--){
//do something
} 

这是因为这两行代码在转换为汇编指令时，while语句所需的指令更少。此处不再展开汇编层面的讨论，有兴趣的读者可自行研究。

由于JavaScript允许任何人修改或添加Object.prototype中的属性，因此在遍历对象属性时，应先使用hasOwnProperty进行判断，以避免遍历整个原型链从而影响效率。示例如下：

 
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
//do something
} 
} 

变量定义与类型转换技巧

在使用undefined时，建议先定义一个局部变量undefined。

 
var checkVal = function(val) {
var undefined;
return val !== undefined;
}; 

如上述代码所示，若未提前定义局部变量而直接使用全局undefined进行判断，一旦第三方在其他地方定义了全局变量undefined=3，将导致判断结果错误。

在将非字符串类型的变量转换为字符串类型时，可以直接使用以下写法：

 
var str = (i + "").replace(...);

此处若使用String(i)方法，执行速度会慢很多。

数据结构与DOM操作最佳实践

定义数组时，如果不需要使用数组类的排序等方法，仅进行一般的赋值和访问，建议直接写：

 
var array = {};

而不是

 
var array = new Array();

否则，这就如同定义数字变量时写var i = new Number(1)一样，缺乏实际意义。

在使用jQuery时，对同一个对象执行多个函数尽量放在同一行代码里，例如：

 
$("p.neat").addClass("ohmy").show("slow");

而不是

 
$("p.neat").addClass("ohmy");
$("p.neat").show("slow");

其他技巧包括使用DocumentFragment优化多次append操作，以及使用firstChild和nextSibling代替childNodes遍历DOM元素等。

具体大家可以参考这篇博客：http://www.nowamagic.net/librarys/veda/detail/363

本文还参考了这篇文章：http://www.cnblogs.com/justinw/archive/2009/12/07/1618500.html