客户端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实现非叠加式的搜索框提示效果
Jan 07 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php 缓存函数代码
2008/08/27 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
Python3 Random模块代码详解
2017/12/04 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python元组知识点总结
2019/02/18 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
python爬虫 requests-html的使用
2020/11/30 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
python 将Excel转Word的示例
2021/03/02 Python
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
调研汇报材料范文
2014/08/17 职场文书
整改报告格式
2014/11/06 职场文书
材料采购员岗位职责
2015/04/03 职场文书
会议主持词结束语
2015/07/03 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
php解析非标准json、非规范json的方式实例
2022/05/10 PHP