关于javascript字符串连接性能

简介:

最近在看《高性能网站建设进阶指南》,第七章为《编写高效的javascript》,作者为Nicholas C. Zakas(同时也是《javascript高级程序设计》的作者),里面讲到字符串连接的优化问题。

字符串连接一直是javascript中性能最低的操作之一,通常情况下,字符串连接是通过使用加法运算符(+)来实现的,比方说

var text="hello";
text+=" ";
text+="world!";

早期浏览器没有对这种运算进行优化。由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。参照《javascript高级程序设计》,大致要经过以下几个步骤:

创建存储"hello"的字符串。 创建存储"world"的字符串。 创建存储连接结果的字符串。 把str的当前内容复制到结果中。 把"world "复制到结果中。 更新str,使它指向结果。

频繁地在后台创建和销毁字符串会导致字符串连接的性能异常低下。

好在如今大部分浏览器已经对字符串连接进行了优化。第一款进行优化的浏览器是Firefox,从1.0版本开始,在所有情况下使用数组技术实际上都 比使用加法运算慢。其他浏览器也优化了字符串连接,Safari、Opera、Chrome和Internet Explorer8也都在使用加法运算符上表现出了更好的性能。(PS:在Ie8之前的版本没有进行优化)

那么,在浏览器还未对字符串连接性能进行优化之前,该怎么改进其性能呢?其中一种普遍使用的方法就是使用Array对象,方法如下:

function StringBuffer(){

    this._strings=new Array();

}

StringBuffer.prototype.append=function(str){

    this._strings.push(str)

}

StringBuffer.prototype.toString=function(){

    return this._strings.join("");

}

这样,无论在数组中引入多少字符串都不成问题,因为只有在调用join()方法时才会发生连接操作,此时步骤如下:

创建存储结果的数组 把每个字符串复制到结果中的合适位置 将数组合并成字符串返回

经过测试,采用上述方法,在Firefox 3.6中以及Ie 8中,性能其实比直接用加法运算符(+)效率要低(上文说过现在大部分主流浏览器都已经经过优化),然而,在IE 8之前版本的IE浏览器中,采用这种方法连接字符串,性能比直接用加法运算符(+)有很大的提高,大概是60%左右(也就是花费的时间为原来的1/3左 右),用的是《javascript高级程序设计》里的测试代码:

 var d1=new Date();
 var str="";
 for(var i=0;i<10000;i++){
     str+="text";
 }
 var d2=new Date();
 var d3=d2.getTime()-d1.getTime();

 
 var buffer=new StringBuffer();
 d1=new Date();
 for(var j=0;j<10000;j++){
     buffer.append("text");
 }
 var result=buffer.toString();
 d2=new Date();
 var d4=d2.getTime()-d1.getTime();

 alert("d3:"+d3+" d4:"+d4);

 

以下是Nicholas C. Zakas大牛对决定如何连接字符串的建议,需要考虑两个因素:(1)被连接的字符串大小(2)数量

当字符串较小(少于20个字符)且连接的数量也较小时(少于1000个),所有的浏览器中使用的加法运算符都能在不到1毫秒之内轻松完成连接。在这种情况下就没有理由去考虑加法运算符以外的方式了。

 

增加连接字符串的数量或大小时,在IE 7中性能会明显下降。当字符串大小增加时,在Firefox中加法运算符和数组技术的性能差异会变小。当字符串连接数量增加时,在Safari中这两种技 术的新能差异也同样会变小。只有Chrome和Opera在改变连接字符串的大小和数量时,加法运算符一直保持着显著的性能优势。

 

由于在各浏览器下性能不一致,所以选用哪种技术在很大程度上取决与实际情况和面对的浏览器。如果用户主要使用IE 6或7,那么使用数组技术就很值得,因为这会影响大多数人。(备注:目前国内使用IE 6的人不少。。。)通常使用数组技术在其他浏览器中的性能损失要远小于在IE中的性能提升,所以要基于用户的浏览器来权衡用户体验,而不要视图去针对某种具体情况或浏览器版本。不过,在大多数情况下,加法运算符也是首选的。

 

 

 


相关文章
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
1月前
|
JavaScript 前端开发
js字符串替换
js字符串替换
16 2
|
14天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1月前
|
JavaScript 前端开发 索引
JavaScript字符串检查:从基础到高级
【2月更文挑战第26天】
24 0
JavaScript字符串检查:从基础到高级
|
1天前
|
缓存 JavaScript 前端开发
Vue.js 路由时用于提高应用程序性能
Vue.js 路由时用于提高应用程序性能
|
7天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
7天前
|
JavaScript 前端开发
js字符串拼接
js字符串拼接
|
14天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
18天前
|
JavaScript
JS去除字符串的方法
JS去除字符串的方法
|
22天前
|
JavaScript 前端开发
为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)
为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)
10 0