客户端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实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
Node.js的进程管理的深入理解
Jan 09 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
es6函数之箭头函数用法实例详解
Apr 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
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python tcp传输代码实例解析
2020/03/18 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
优秀教师个人总结
2015/02/11 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书