客户端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使用prototype定义对象类型(转)[
Dec 22 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
原生JS轮播图插件
Feb 09 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
微信小程序使用Socket的实例
Sep 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
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
Javascript Math对象
2009/08/13 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Python中str.join()简单用法示例
2018/03/20 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
员工年终演讲稿
2014/01/03 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
建筑结构施工求职信
2014/07/11 职场文书
立项申请报告范本
2015/05/15 职场文书
植物园观后感
2015/06/11 职场文书