高效率JavaScript编写技巧

最近在编写一个JavaScript框架，发现有很多细节注意得不够，担心长时间积累会导致框架实际应用的时候出现严重的效率问题。于是开始关注JavaScript提高效率的一些技巧，在这里分享给大家。

1.JavaScript是唯一一个对代码体积要求越小越好的语言，因此我们可以通过一些工具来精简和压缩JavaScript代码，如JSMin、Packer、YUICompressor等。这些工具会将局部变量的名字替换成很短的变量名，例如将parseFloat()替换成a()。因此我们在编写JavaScript代码时，应将每一个全局变量都映射到一个局部变量，如var parseFloat = parseFloat;

2.通过 JSLint来检测你编写的JavaScript，可以发现里面隐藏的很多问题。 JSLint是一个JavaScript验证工具 （非开源） ，可以扫描JavaScript源代码来查找问题。如果JSLint发现一 个问题，JSLint就会显示描述这个问题的消息，并指出错误在源代码中的大致位置。

3.我们在写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语句所需的指令更少，在这里就不展开说明了，大家有兴趣可以去研究下汇编。

4.由于JavaScript中任何人都可以修改或添加Object.prototype中的属性，因此我们在遍历一个对象的属性时，应先使用hasOwnProperty进行判断，避免遍历整个原型链，影响效率。如：

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

5.在使用undefined的时候先定义一个局部变量undefined

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

上述代码中，如果没有提前定义局部变量，直接使用全局变量undefined进行判断，如果第三方在别的地方定义了一个全局变量undefined=3将导致结果错误。

6.在将一个非字符串类型的变量转换成字符串类型时，可以直接使用

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

这个地方如果使用String(i)会慢很多。

7.定义数组的时候如果不需要使用数组类的排序等方法，只是进行一般的赋值和访问，应该直接写

var array = [];

而不是

var array = new Array();

同理，在创建对象的时候，应该直接写var obj = {}，而不是var obj = new Object()

这样写有三个原因：

a.效率更高，因为Array可以被重载而[]不行，运行的时候需要先查找Array对应的函数。

b.这样写更短

c.Array有可能会被第三方写的全局变量覆盖，存在潜在冲突。

具体大家可以参见这两篇帖子：

http://stackoverflow.com/questions/7375120/why-is-arr-faster-than-arr-new-array

http://stackoverflow.com/questions/2280285/what-does-mean-in-javascript/2280295#2280295

（请注意是[]，不是{}，之前写错了，很抱歉，感谢 lanyotechcs的指正）

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

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

而不是

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

这样代码会更简洁，最终得到的js文件会更小

9.在需要定义一系列变量时，使用逗号分隔：

var obj1 = {},
    obj2 = {},
    obj3 = {};

而不是

var obj1 = {};
var obj2 = {};
var obj3 = {};

同样，这会使最终得到的js文件更小。

以上介绍的技巧中有不少纯粹是为了减少字符个数，不过不要觉得省这几个字符没有意义，当你的代码成千上万行时，注意这些这能让你的js加载速度快很多。其余的技巧还有使用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

个人博客： http://blog.csdn.net/zhaoxy2850

本文地址： http://blog.csdn.net/zhaoxy2850/article/details/10196893

转载请注明出处，谢谢！