客户端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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
基于JavaScript实现多级菜单效果
Jul 25 Javascript
switchery按钮的使用方法
Dec 18 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
JavaScript中的私有成员
2006/09/18 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
Express.JS使用详解
2014/07/17 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
C语言笔试集
2012/07/24 面试题
大学生四年生活自我鉴定
2013/11/21 职场文书
《木笛》教学反思
2014/03/01 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
门球健将观后感
2015/06/16 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript