客户端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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
JavaScript 事件系统
Jul 22 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
js实现照片墙功能实例
Feb 05 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
js解决movebox移动问题
Mar 29 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 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 文件上传系统手记
2009/10/26 PHP
PHP $_FILES函数详解
2011/03/09 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
详解python 内存优化
2020/08/17 Python
python speech模块的使用方法
2020/09/09 Python
python 实现aes256加密
2020/11/27 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
作风整顿个人剖析材料
2014/10/06 职场文书
新员工入职感想
2015/08/07 职场文书
python中if和elif的区别介绍
2021/11/07 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL