客户端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 ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
深入理解Puppeteer的入门教程和实践
Mar 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
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
javascript基本语法
2016/05/31 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
JavaScript继承与多继承实例分析
2018/05/26 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
python自动安装pip
2014/04/24 Python
python类继承用法实例分析
2014/10/10 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
岳庙导游词
2015/02/04 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
老兵退伍感言
2015/08/03 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
vue+echarts实现多条折线图
2022/03/21 Vue.js
cypress测试本地web应用
2022/06/01 Javascript