高性能JavaScript

　　在“高性能网站的十四条黄金法则”中，我高度概括性的介绍了建设高性能网站的十四条操作指南；在“使用微软CDN优化网页加载速度”中，我介绍了使用微软提供的CDN服务提高我的网站的加载速度。今天，我还要接着“高性能”来展开论述。

　　在“十四条黄金法则”中，第六、八、十、十四等四条法则都和JavaScript中有着直接的关系。可见，JavaScript在Web开发中占据着多么重要的作用。

　　根据Nicholas Zakas的研究显示，在多数浏览器使用单进程处理UI更新和JavaScript运行等多个任务，而同一时间只能有一个任务被执行。JavaScript运行了多长时间，那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。从基本层面说，这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。

　　综上所述，提高JavaScript的性能，是提高用户体验的一个重要途径。那么，我们可以从哪些方面提高JavaScript的性能呢？下面，我从“脚本引入位置”、“变量的使用”、“DOM树的操作”等几个方面来简要论述一下。

• JavaScript脚本的引入位置
  1. <script>标签的引入位置最好放在</body>（注意：是body的结束标签）之前，以并且仅靠</body>。这样，可以减少JavaScript解析对页面渲染的阻塞；
  2. 尽量将一个页面中出现的多个JavaScript文件合并成一个JavaScript文件。这样，可以减少http请求次数，节省浏览器发起、接受以及解析HTTP请求的时间。
• 变量的使用
  1. 尽量使用局部变量，如果需要多次引用当前作用域之外的变量，最好先将该变量缓存为局部变量使用；
  2. 所有变量都必须使用var声明；
• DOM树操作
  1. getElementsByName、getElementsByClassName和getElementsByTagName等方法返回的是HTML集合对象不是一个真正的数组，并且该集合处于实时状态 （更新HTML，则相应的集合也会立刻更新），所以遍历时需要缓存length来提高效率，必要时可以将HTML集合先拷贝到普通数组中再处理；
  2. 合并多次对DOM和样式的修改，使用element.style.cssText = "float:right;margin-left:20px;"这种方式，以避免浏览器发生多次重排或重绘；
  3. 离线操作DOM树：对DOM树结构进行较大的改变时，需要先将元素脱离文档流，然后进行改变操作，最后再放回到文档流中；
     • 可以将元素隐藏来使其脱离文档的正常流；
     • 使用createDocumentFragment创建文档碎片节点；
• 逻辑操作
  1. 只有在需要遍历对象的时候使用for-in循环，否则请使用for，while，do-while循环；
  2. if-else的排列从大概率到小概率，把出现最多的情况写在前面；有时也可以使用嵌套的if-else-if 这种方式，以减少条件的判断次数；
  3. 条件语句中需要测试的条件数量越大，越推荐使用switch来代替if-else；
  4. 当连接大量字符串时，在IE6 IE7 中字符串连接使用数组的join方式，其他浏览器中使用“+”或“+=”操作符；
• 其他
  1. 避免使用eval，Function等函数（需要再次调用解释引擎）；
  2. 使用[]代替new Array()定义数组，使用{}代替new Object()定义对象;
  3. 尽量避免使用try{} catch{} ，with{}；
  4. 每行代码结束必须有分号；
  5. 使用setTimeout和setInterval时，避免传入字符串，而应该传入函数；
     如： setTimeout("alert(123)",100); 应该改为：setTimeout(function{alert(123);},100);

注：

• 这是我同事写的一篇文章。我向他约稿，以他发名义（使用以他名字命名的帐号）发表在“地瓜哥”上。

参考资料：

1. 《高性能JavaScript》

特别声明：

　　本文章，发表在博客园的同时，也发布到我的个人博客地瓜哥上。转载请注明作者和原文网址。
地瓜哥：http://www.diguage.com/archives/37.html
博客园：http://www.cnblogs.com/diguage/archive/2012/07/25/2607620.html