首页 > Web开发, 挨踢(IT) > 高性能JavaScript

高性能JavaScript

2012年7月25日 发表评论 阅读评论 713 人阅读    

  在“高性能网站的十四条黄金法则”中,我高度概括性的介绍了建设高性能网站的十四条操作指南;在“使用微软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》


作 者: D瓜哥,http://www.diguage.com/
原文链接:http://www.diguage.com/archives/37.html
版权声明:非特殊声明均为本站原创作品,转载时请注明作者和原文链接。



如果感觉这篇文章不错,请点击这里的分享按钮,分享到微博等地方去,让更多人受益!
您的支持是D瓜哥最大的写作动力!谢谢!

  1. houyh
    2012年7月25日10:33 | #1

    提点小建议,这里大部分只是说了,要怎么做,但是没有说为什么要这么做,为什么这么做性能会好,所以建议给出原理说明。

    • D瓜哥
      2012年7月25日10:54 | #2

      下面会有一系列的文章来补充,完善这些。敬请期待啊!哈哈

  2. 2012年9月24日22:56 | #3

    感觉写的太简单了,不知道从哪复制的段落,只有两行代码示例,汗。

  1. 2013年4月11日13:39 | #1

无觅相关文章插件,快速提升流量