脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript性能优化，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
JavaScript性能优化。
1. 代码简洁
x=x+1；在不影响功能的情况下可以简写成x++；
2. 变量名和方法名在不影响寓意的情况下简单（可以选用首字母命名）
定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength
3. 关于JS循环
（1）for(;;)：推荐使用，变量递增或递减应该使用嵌套的++或--，而不单独对循环变量赋值
（2）for(i)：效率最差，因为它需要查询Hash值，因此应该尽量少用；
（3）while()：性能与for(;;)持平。
4. 遍历数组时应该先将数组长度缓存，放入局部变量，避免多次查询数组长度
VAR len=arr.length
5. 尽量使用局部变量而不是全局变量
局部变量的访问速度比全局变量更快，全局变量其实是window对象的成员，而局部变量是放在函数栈里的。
6. 尽量少用eval
7. 字符串连接
如果是追加字符串，最好使用s+=anotherStr，而不是使用s=s+anotherStr。
如果要连接多个字符串，应该少使用+=，如s+=a; s+=b; s+=c，应该写成s+=a+b+c；
如果是手机字符串，最好使用数组的方式进行缓存，最后再使用join拼接。如下：
var arr=new Array();
for (var i=0; i<100; i++){
arr.push(i.toString());
}
var str=arr.join('');
8. 类型转换
1. 把数字转换成字符串，用''+1最快，性能上来说：
（""+）>String()>.toString()>new String()
尽量使用编译时就能使用的内部操作，这要比运行时使用的用户操作要快。
String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色，new String()用于返回一个精确的副本。
2. 浮点数转换成整数型
其实parseint()是用于将字符串转换成数字的，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，速度很快。
3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显示调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转换成String()，所以直接调用这个方法效率会更高。
9. 尽量使用JSON格式来创建对象，而不是var obj=new Object()方法
前者属于直接复制，而后者需要调用构造器，因此前者性能更好。
10. 尽量使用JSON格式使用数组
使用JSON格式定义数组：[a1, a2, a3]而不是采用new Array(a1, a2, a3)这种语法。这一点和上一点类似，后者会调用Array的构造器。
11. 对字符串进行循环操作，例如替代、查找，就使用正则表达式
因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。
12. 插入HTML
很多人喜欢在JS中使用document.wrITe来给页面生成内容。事实上这样的效率较低，如果直接插入到HTML，可以找到一个容器元素，比如指定一个p或者span，并设置他们的innerHTML来讲自己的HTML代码插入到页面中。
13. 对象查询
使用[""]查询比.items()更快。
14. 定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该使用setInterval。setTimeout每次要重新设置一个定时器。
15. 尽量减少DOM调用
在Web开发中，DOM的操作会导致浏览器执行回流(reflow)操作。我们应该尽可能减少DOM操作。
回流操作主要发生在几种情况下：
（1）改变窗体大小
（2）更改字体
（3）添加移除stylesheet块
（4）内容改变哪怕是输入框输入文字
（5）CSS虚类被触发如：hover
（6）更改元素的classname
（7）当对DOM节点执行新增或者删除操作或者内容更改时
（8）动态设置一个style样式是（比如element.style.width="10px"）
（9）当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值
解决问题的关键，就是限制通过DOM操作所引发回流的次数：
（1）在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入
（2）在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除：
1）通过removeChild()或者replaceChild()实现真正意义上的删除；
2）设置该元素的display样式为“none”
（3）CSS部分
另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改，解决方法：
1）使用更改className的方式替换style.xxx=xxx；
2）使用style.cssText='';一次写入样式；
3）避免设置过多的行内样式；
4）添加的结构外元素尽量设置它们的位置为fixed或absolute
5）避免使用表格来布局
6）避免在CSS中使用JavaScript exPression
（4）将获取的DOM数据进行缓存
（5）当对HTMLCollection对象操作时，应该将访问的次数尽可能的降至最低，最简单，你可以将length属性缓存在一个本地变量中，这样就能大幅度的提高循环效率。
16. 重构<script></script>调用方式或者合并JS文件来优化请求次数。
17. 对于大的JS对象，因为创建时的时间和空间的开销比较大，因此应该尽量考虑采用缓存。
18. 将JS脚本放在底部
19. 出去JS中的空白区域
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript性能优化全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript性能优化所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。