客户端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中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
JS实现简易图片自动轮播
Oct 16 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的十大要点(上)
2009/02/04 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
在Python下尝试多线程编程
2015/04/28 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python实现代码统计程序
2019/09/19 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
经贸专业毕业生求职信范文
2014/05/01 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
三年级学生期末评语
2014/12/26 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android