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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
js动态切换图片的方法
Jan 20 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
了解JavaScript中的选择器
May 24 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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完整的日历类(CLASS)
2006/11/27 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
vue-loader教程介绍
2017/06/14 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Python魔术方法详解
2015/02/14 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python dataframe NaN处理方式
2019/12/26 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Django xadmin安装及使用详解
2020/10/26 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
八一建军节活动方案
2014/02/10 职场文书
学生自我评语大全
2014/04/18 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
校园安全教育心得体会
2016/01/15 职场文书
小学英语教学反思范文
2016/02/15 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript