优化JavaScript代码的几点经验

JavaScript做为一种客户端的脚本语言，有着其先天的劣势，无法做到如Java/C++等高级语言哪般的灵活和高效。所以我们在编写JavaScript代码时，一定要理解语言的特性，优化代码的执行效率。

以下是笔者在实际开发过程中总结的几点经验，以供分享。

1) 避免滥用getter/setter方法
    现在很多JavaScript代码也采用了面向OO的设计思想，封装成类和方法。我们在访问内部对象数据时，除非你的JavaScript代码是作为API供第三方调用，尽量不要采用getter/setter方法，而且直接采用obj._var的方式调用。这样可以避免过多的函数调用，提高性能。

2) 避免过多的函数调用
    如果不是特别的代码复用需要，尽量不要过多的拆分函数，特别是一些很小的函数。JavaScript对函数的调用没有做到很好的优化，过多频繁的函数调用，会降低代码的执行效率。

3) 尽量避免使用eval()函数
    eval函数在很多时候提供了一种很好的解决问题的思路，但如果不是特别需要，还是尽量避免使用它吧。

4) 避免使用prototype类库的$()函数
    很多人喜欢用prototype类库的一些函数，如用$()去获取DOM对象。但$()的效率明显不如document.getElementById()。所以有时候，还是尽量用JavaScript的核心库吧。

5) 避免重复使用document.getElementById去获取同一个对象
    每一次document.getElementById调用，都是一次开销，对同一对象，应只调用一次，拿到对象后赋给内部变量缓存。

6) 活用document.createDocumentFragment
    document.createDocumentFragment可以创建一个新的Document Fragment,然后可以添加一组的Nodes到这个Fragment里。如果需要，最后再把这个Fragment添加到主文档Document中。特别注意，如果你需要对DOM Node节点进行操作，尽量在添加到主Document文档之前。

7) 尽量少用setInterval和setTimeout
    如果可以采用callback的方式，就不要去使用setInterval和setTimeout函数。过多的使用， 会明显降低效率。

8) 避免频繁对字符串进行“+”加操作
    这个问题主要出现在IE浏览器，Firefox和Opera一般都没有太大的效率问题。解决方法一般是将字符串置入一个Array中进行操作。

就先说这些吧，大家也可以参考下面的几个链接文章，希望对大家有所帮助。

Efficient JavaScript

Javascript Performance

Best Practices for Speeding Up Your Web Site

评论

2 楼 cyfgod 2009-03-11  

playfish 写道

关于第四点，其实是不太准确的。你可以看下jquery的源代码，如果发现是id符号，就直接调用原生的getElementById返回，不会影响效率。最大的效率影响，我觉得主要还是IE下的字符串操作。用array的join操作来替代ie下的字符串加减操作效率提高很明显。在循环外的性能优化，其实影响都不大。

的确，字符串操作的性能影响很明显。但其它一些的一点点的开销加起来，也会有不少的影响的，特别是对商业化产品，还有第三方的JS API库。其实这些都是一些coding style，主要还是应该避免对Javascript代码过度的设计化和OO化。

1 楼 playfish 2009-03-11  

关于第四点，其实是不太准确的。你可以看下jquery的源代码，如果发现是id符号，就直接调用原生的getElementById返回，不会影响效率。

最大的效率影响，我觉得主要还是IE下的字符串操作。用array的join操作来替代ie下的字符串加减操作效率提高很明显。

在循环外的性能优化，其实影响都不大。