客户端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 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
Vue3中toRef与toRefs的区别
Mar 24 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入门经历和学习过程分享
2014/04/11 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP常用处理静态操作类
2015/04/03 PHP
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
js实现开关灯效果
2020/03/30 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python中取整的几种方法小结
2017/01/06 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python多进程编程常用方法解析
2020/03/26 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
公司董事长岗位职责
2014/06/08 职场文书
创先争优活动心得体会
2014/09/04 职场文书
给老婆的保证书
2015/01/16 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记