Array的push与unshift方法性能比较分析


Posted in Javascript onMarch 05, 2011

从原理就可以知道,unshift的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。但到底效率差异有多大呢?下面来测试一下。
测试环境的主要硬件:CPU T7100(1.8G);内存4G DDR2 667;硬盘5400转。主要软件:操作系统为Windows 7;浏览器为Firefox 3.6.9。测试代码:

var arr = [ ], s = +new Date; 
// push性能测试 
for (var i = 0; i < 50000; i++) { 
arr.push(i); 
} 
console.log(+new Date - s); 
s = +new Date; 
arr = [ ]; 
// unshift性能测试 
for (var i = 0; i < 50000; i++) { 

arr.unshift(i); 
} 
console.log(+new Date - s);

这段代码分别执行了50000次push和unshift操作,运行一次以后,得出结果:
12
1152
可见,unshift比push要慢差不多100倍!因此,平时还是要慎用unshift,特别是对大数组。那如果一定要达到unshift的效果,有没有其他方法呢?答案是肯定的。
Array有一个叫做reverse的方法,能够把一个数组反转。先把要放进数组的元素用push添加,再执行一次reverse,就达到了unshift的效果。比如:
for (var i = 0; i < 50000; i++) { 
arr.push(i); 
} 
arr.reverse();

reverse的性能又如何呢,下面再来测试:
var arr = [ ], s = +new Date; 
for (var i = 0; i < 50000; i++) { 
arr.push(i); 
} 
arr.reverse(); 
console.log(+new Date - s);

结果是:
12
可见,reverse性能极高,甚至于没有额外的消耗,可以放心使用。
Javascript 相关文章推荐
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
webpack打包js的方法
Mar 12 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 #Javascript
判断用户是否在线的代码
Mar 05 #Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 #Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 #Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 #Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 #Javascript
You might like
Content-type 的说明
2006/10/09 PHP
PHP伪造referer实例代码
2008/09/20 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python3+Appium安装使用教程
2019/07/05 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python线程优先级队列知识点总结
2021/02/28 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
五年后的职业生涯规划
2014/03/04 职场文书
企业读书活动总结
2014/06/30 职场文书
教师暑期培训感言
2014/08/15 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
健康状况证明书
2014/11/26 职场文书
仰望星空观后感
2015/06/10 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
python 实现的截屏工具
2021/05/08 Python
Android自定义双向滑动控件
2022/04/19 Java/Android
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python