高性能JavaScript

JavaScript   2012-07-26 09:14:52 发布
您的评价:
     
0.0
收藏     0收藏
文件夹
标签
(多个标签用逗号分隔)

  在“高性能网站的十四条黄金法则”中,我高度概括性的介绍了建设高性能网站的十四条操作指南;在“使用微软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》
  2. 来自:http://www.cnblogs.com/diguage/archive/2012/07/25/2607620.html

扩展阅读

高性能JavaScript DOM编程
高性能JavaScript 加载和执行
编写高性能的JavaScript事件
JavaScript高性能的模板引擎:ETPL
JavaScript性能测试 JSLitmus

为您推荐

React 入门实例教程
疯狂Html+CSS+JS 中JS总结
WEB前端开发规范文档
JavaScript初学者应知的24条最佳实践(译)
高性能JavaScript DOM编程

更多

JavaScript
JavaScript开发
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多