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 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
javascript实现放大镜功能
Dec 09 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获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
linux 下selenium chrome使用详解
2020/04/02 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python如何生成xml文件
2020/06/04 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python中的对数log函数表示及用法
2020/12/09 Python
如何编写python的daemon程序
2021/01/07 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
煤矿班组长竞聘书
2014/03/31 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
财务年终工作总结大全
2019/06/20 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
亲情作文之母爱
2019/09/25 职场文书
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL