客户端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继承 Base类的源码解析
Dec 30 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python实现桌面气泡提示功能
2019/07/29 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
实现Python与STM32通信方式
2019/12/18 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
秘书行业自我鉴定范文
2013/12/30 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
三方合作协议书范本
2014/04/18 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
科技馆观后感
2015/06/08 职场文书
花木兰观后感
2015/06/10 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Python中的程序流程控制语句
2022/02/24 Python