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 EasyUI 使用介绍
Apr 01 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 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调用JAVA的WebService简单实例
2014/03/11 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
解密效果
2006/06/23 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
浅析Python中的多条件排序实现
2016/06/07 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
如何用SQL语句进行模糊查找
2015/09/25 面试题
经典广告词大全
2014/03/14 职场文书
培训协议书范本
2014/04/22 职场文书
廉政承诺书2015
2015/04/28 职场文书
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏