客户端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入门教程(3) js面向对象
Jan 31 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
js对象的比较
2011/02/26 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
TensorFlow高效读取数据的方法示例
2018/02/06 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python使用turtle库绘制树
2018/06/25 Python
Sanic框架Cookies操作示例
2018/07/17 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
出纳岗位职责范本
2013/12/01 职场文书
收银员岗位职责
2014/02/07 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
部队党性分析材料
2014/02/16 职场文书
霸气队列口号
2014/06/18 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
目标责任书格式范文
2015/05/11 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
python的html标准库
2022/04/29 Python