开发者社区> 问答> 正文

js页面优化技巧总结

相信大多数做过后台开发的同仁们,特别是遇到与前台大量交互的时候,JS的结构以及可读性是最重要的,不然看起来就是一坨shi。回首看看自己以前写的真是一坨shi。


当然这里不是教你如何写出优雅的代码,而是如何提高JS页面优化方法。优雅的代码不是一朝一夕就可以练成的、但是一下几点只要注意就可以做到。



1. 关于JS的循环,循环是一种常用的流程控制。JS提供了三种循环:for(;;)、while()、for(in)。在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;)、while()循环的性能基本持平。当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符。
2. 如果需要遍历数组,应该先缓存数组长度var len=arr.length; for(i=0;i<len;i++),将数组长度放入局部变量中,避免多次查询数组长度。
3. 局部变量的访问速度要比全局变量的访问速度更快,因为全局变量其实是window对象的成员,而局部变量是放在函数的栈里的。
4. 尽量少使用eval,每次使用eval需要消耗大量时间,特别是在循环内,json[变量]=1;这样的语句可以不使用eval。
5. 尽量避免对象的嵌套查询,对于obj1.obj2.obj3.obj4这个语句,需要进行至少3次查询操作,先检查obj1中是否包含 obj2,再检查obj2中是否包含obj3,然后检查obj3中是否包含obj4...这不是一个好策略。应该尽量利用局部变量,将obj4以局部变量 保存,从而避免嵌套查询。
6. 使运算符时,尽量使用+=,-=、*=、\=等运算符号,而不是直接进行赋值运算。
7. 当需要将数字转换成字符时,采用如下方式:"" + 1。从性能上来看,将数字转换成字符时,有如下公式:("" +) > String() > .toString() > new String()。String()属于内部函数,所以速度很快。而.toString()要查询原型中的函数,所以速度逊色一些,new String()需要重新创建一个字符串对象,速度最慢。
8. 当需要将浮点数转换成整型时,应该使用Math.floor()或者Math.round()。而不是使用parseInt(),该方法用于将字符串转换成数字。而且Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用时间,速度是最快的。
9.尽量作用JSON格式来创建对象,而不是var obj=new Object()方法。因为前者是直接复制,而后者需要调用构造器,因而前者的性能更好。
10.当需要使用数组时,也尽量使用JSON格式的语法,即直接使用如下语法定义数组:[parrm,param,param...],而不是采用 new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。
11. 对字符串进行循环操作,例如替换、查找,就使用正则表达式。因为JS的循环速度比较慢,而正则表达式的操作是用C写成的API,性能比较好。
最后有一个基本原则,对于大的JS对象,因为创建时时间和空间的开销都比较大,因此应该尽量考虑采用缓存。

展开
收起
小柒2012 2015-10-27 21:34:59 10008 0
5 条回答
写回答
取消 提交回答
  • Rejs页面优化技巧总结
    已读,至少学习了,顶一下
    2016-01-12 14:41:28
    赞同 展开评论 打赏
  • What is the kernel in the Code Sea?
    这篇文章就是一坨,
    每种js的虚拟机都有不同的优化策略,这个是一般不需要程序员掌握的
    写出可读的代码重要还是为了不知道的那点性能写出shi重要
    2015-12-15 23:22:44
    赞同 展开评论 打赏
  • 真心不错,
    2015-12-15 18:32:53
    赞同 展开评论 打赏
  • 您的帖子很精彩!希望很快能再分享您的下一帖!
    2015-10-27 23:27:42
    赞同 展开评论 打赏
  • 阿里云论坛版主,伪Linux运维,完美主义者。
    我做了一个艰难的决定 加点分给你
    2015-10-27 23:06:09
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载