客户端js性能优化小技巧整理
更新时间：2013年11月05日 16:11:18 作者：
说起javascript无人不知无人不晓吧，下面是一些关于客户端JS性能的一些优化的小技巧，希望对大家有所帮助
下面是一些关于客户端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[i][变量]=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对象，因为创建时时间和空间的开销都比较大，因此应该尽量考虑采用缓存。
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[i][变量]=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对象，因为创建时时间和空间的开销都比较大，因此应该尽量考虑采用缓存。
相关文章
JavaScript中的Array对象与其他编程语言中的数组一样，是一组数据的集合。在JavaScript中，数组里面的数据可以是不同类型的，并具有用于执行数组常见操作的方法，本文整理了一些常用的，需要的可以参考一下2022-09-09
这篇文章主要介绍了javascript随机显示背景图片的方法,涉及javascript随机数的生成及页面元素的操作技巧,需要的朋友可以参考下2015-06-06
nest.js 使用express需要提供多个静态目录的操作方法
这篇文章主要介绍了nest.js 使用express需要提供多个静态目录的操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
JS getRandomValues和Math.random方法深入解析
这篇文章主要为大家介绍了JS getRandomValues和Math.random方法深入详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了JS 实现Base64编码与解码实例详解的相关资料,并附实例代码，帮助大家学习理解此部分知识，需要的朋友可以参考下2016-11-11
关于javascript document.createDocumentFragment()
documentFragment 是一個無父對象的document對象.2009-04-04
这篇文章主要为大家详细介绍了js实现指定时间倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要介绍了JS操作HTML自定义属性的方法,以实例形式分析了html中自定义属性的设置与对应的javascript操作技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS关于for循环中使用setTimeout的四种解决方案，想深入了解JS的同学，一定要看下2021-05-05
这篇文章主要介绍了JS求解三元一次方程组值的方法,涉及JS数学运算的相关操作技巧,需要的朋友可以参考下2017-01-01
最新评论