客户端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核心读书有感之表达式和运算符
Feb 11 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
写一个Vue Popup组件
Feb 25 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
PHP+DBM的同学录程序(5)
2006/10/09 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
PHP多例模式介绍
2013/06/24 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
axios基本入门用法教程
2017/03/25 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
django框架模板语言使用方法详解
2019/07/18 Python
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
银行会计职员个人的自我评价
2013/09/29 职场文书
理财学专业自荐书
2014/06/28 职场文书
机动车登记业务委托书
2014/10/08 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Python实现归一化算法详情
2022/03/18 Python