客户端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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
javascript实现滚动条效果
Mar 24 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
家长会学生家长演讲稿
2013/12/29 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
科学育儿宣传标语
2014/10/08 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python