JS 字符串连接[性能比较]


Posted in Javascript onMay 10, 2009

一、ECMAScript的字符串是不可变的,即它们的值不能改变,因此当你写出下面的代码的时候发生了什么呢?
Js代码

var str = "Hello "; 
str += "world";

执行的步骤如下:
创建存储“Hello“的字符串
创建存储”world“的字符串
创建存储连接结果的字符串
把str的当前内容复制到结果中
把“world”复制到结果中
更新str,使它指向结果
每次完成字符串的连接都会执行步骤2-6,使得这种操作非常消耗资源。想象一下重复这个过程几百次,甚至几千次,那性能如何?
二、那么再看看下面的代码,来解决这种窘况
Js代码
var arr = new Array; 
arr[0] = "Hello "; 
arr[1] = "world"; 
var str = arr.join("");

执行的步骤如下:
创建存储结果的字符串
把每个字符串复制到结果中的适当位置
这样,无论数组要引入多少字符串都不成问题,因为只有在调用join()方法时候才会发生连接操作。
三、觉得操作很复杂?代码不能确切反应它的意图?那么我们用对象的解决方式吧,使它更容易理解,用StringBuffer类来封装该功能:
Js代码
function StringBuffer() { 
this._strs = new Array; 
} 
StringBuffer.prototype.append = function (str) { 
this._strs.push(str); 
}; 
StringBuffer.prototype.toString = function() { 
this._strs.join(""); 
};

好了,感受一下吧,现在如何操作字符串呢?
Js代码
var sb = new StringBuffer(); 
sb.append("Hello "); 
sb.append("world"); 
var result = sb.toString();

四、似乎色香味俱全了,但是吃下去的功效如何?
Js代码
var tStart = new Date(); 
var str = ""; 
for(var i=0;i<10000;i++) 
{ 
str += "text" 
} 
var tEnd = new Date(); 
document.write("原始的方法加号 拼接10000个字符串 花费时间:"+(tEnd.getTime()-tStart.getTime())+"秒"); 
var oSB = new StringBuffer(); 
tStart = new Date(); 
for(var i=0;i<10000;i++) 
{ 
oSB.append("text"); 
} 
var sRst = oSB.toString(); 
tEnd = new Date(); 
document.write("<br/>StringBuffer 拼接10000个字符串 花费时间:"+(tEnd.getTime()-tStart.getTime())+"秒");

可能你已经猜到了,StringBuffer要比+快,到底快多少呢?我的测试结果:
Js代码
FF3.0.10
原始的方法加号 拼接10000个字符串 花费时间:3豪秒
StringBuffer 拼接10000个字符串 花费时间:8豪秒
IE7
原始的方法加号 拼接10000个字符串 花费时间:15豪秒
StringBuffer 拼接10000个字符串 花费时间:16豪秒
IE8
原始的方法加号 拼接10000个字符串 花费时间:15豪秒
StringBuffer 拼接10000个字符串 花费时间:16豪秒
Chrome1.0.154.46
原始的方法加号 拼接10000个字符串 花费时间:1豪秒
StringBuffer 拼接10000个字符串 花费时间:2豪秒
五、怎么回事?
恩?眼睛花了?还是测试结果贴错了?还是……?
一切都没有错!
2006年11月此书出版《JavaScript高级程序设计》在84-85页,就是我上面的内容,我的测试结果却和它的完全相反,技术的变革还是……?
我觉得是一个教训!深刻的教训!不知道哪看了这篇文章的人会有何感想。
Javascript 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
layui导航栏实现代码
May 19 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
javascript获取当前ip的代码
May 10 #Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 #Javascript
extjs fckeditor集成代码
May 10 #Javascript
一组JS创建和操作表格的函数集合
May 07 #Javascript
给Function做的OOP扩展
May 07 #Javascript
js arguments.callee的应用代码
May 07 #Javascript
javascript 有用的脚本函数
May 07 #Javascript
You might like
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
js form action动态修改方法
2008/11/04 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python随机数分布random测试
2018/08/27 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
如何用python批量调整视频声音
2020/12/22 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
自我鉴定范文300字
2013/10/01 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
外出学习心得体会范文
2016/01/18 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python