客户端js性能优化小技巧整理


Posted in Javascript onNovember 05, 2013

下面是一些关于客户端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 相关文章推荐
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
javascript简单链式调用案例分析
May 10 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
js倒计时小程序
Nov 05 #Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 #Javascript
javascript使用location.search的示例
Nov 05 #Javascript
jquery按回车提交数据的代码示例
Nov 05 #Javascript
js jq 单击和双击区分示例介绍
Nov 05 #Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 #Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 #Javascript
You might like
编译问题
2006/10/09 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
javascript动态加载二
2012/08/22 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
常用的Javascript数据验证插件
2015/08/04 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python中实现字符串翻转的方法
2018/07/11 Python
详解Python字典的操作
2019/03/04 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
会走路的树教学反思
2014/02/20 职场文书
幼儿园家长寄语
2014/04/02 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏