再论Javascript下字符串连接的性能

1 如何进行字符串连接？

首先让我们来回顾一下字符串连接的两种常用方法：
1.1 使用字符串连接运算符

常用的语言（如Java、C#、PHP等）都有字符串连接运算符，Javascript也不例外，代码示例：


代码如下:

var str = "";
str = str + "a";

1.2 使用数组

在常用的语言中，字符串连接运算的性能普遍不高，为此在C#中就专门提供了StringBuilder（Java中提供了StringBuffer）用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案。


代码如下:

var str = [];
for (var i = 0; i < 100; i++) {
　　str[i] = "12345";
}
str = str.join("");

2 测试

下面通过复制字符串的过程来测试两种方法的性能：
2.1 通过字符串连接运算符进行复制：


代码如下:

function copyByOperator(str, times) {
　　var newStr = "";
　　for (var i = 0; i < times; i++) {
　　　　newStr += str;
　　}
　　return newStr;
}

2.2 通过数组进行复制：


代码如下:

function copyByArray(str, times) {
　　var newStr = [];
　　for (var i = 0; i < times; i++) {
　　　　newStr[i] = str;
　　}
　　return newStr.join("");
}

str采用一段固定的HTML字符串，长度是61。
2.3 IE下的测试

考虑到IE的性能比较差，先用小的times值（6000）在IE 6、IE 7和IE 8下面测试。运行10次后取平均值，结果如下：




















IE浏览器下的测试结果
浏览器 copyByOperator copyByArray
IE 6 1780.4ms 9.5ms
IE 7 1754.6ms 7.7ms
IE 8 1.6ms 9.4ms

IE6、7与IE8的测试结果相距甚远，很明显地，IE 8对字符串连接运算进行了优化，效率已经高于数组复制法。

2.4 各种浏览器下的测试

下面再用比较大的times值（50000）对最新版本的各种浏览器进行测试。




























各种浏览器的测试结果
浏览器 copyByOperator copyByArray
IE 8 21.8ms 54.7ms
Firefox 3.6 40.9ms 27.9ms
Chrome 4 4.4ms 10.9ms
Safari 4.0.5 41.6ms 34.6ms
Opera 10.50 33.1ms 23ms

这个结果真是出人意料。IE 8下的字符串连接运算竟然把Chrome以外的浏览器都打败了，那些老说IE性能低下的可要注意点了。而在Chrome下也出现了字符串连接运算比数组复制法高效的情况。

3 总结

浏览器的性能在不断地提高，作为前端工程师，也要适时调整Javascript程序的优化策略，以获得最佳的性能。

赞 (0)

相关推荐

  • javascript 字符串连接的性能问题(多浏览器)

    书中附带的测试代码如下  复制代码 代码如下: <html> <head> <title>Example</title> </head> <body> <p><strong>Note:</strong> The latest versions of Firefox seem to have fixed the string concatenation problem. If you are usin

  • javascript下高性能字符串连接StringBuffer类

    复制代码 代码如下: function StringBuffer(){ this.__strings__ = new Array(); } StringBuffer.prototype.append = function(str){ this.__strings__.push(str); }; StringBuffer.prototype.toString = function(){ this.__strings__.join(" "); }; 其实上面的代码,主要利用了js的数组原理

  • 浅谈JS中的三种字符串连接方式及其性能比较

    工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法 以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);

  • 你必须知道的JavaScript 中字符串连接的性能的一些问题

    你必须知道的JavaScript 中字符串连接的性能的一些问题

    而JavaScript的核心是ECMAScript .与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变. 请考虑下面的代码: 复制代码 代码如下: var str = "hello ";str += "world";实际上,这段代码在幕后执行的步骤如下: 1.创建存储 "hello " 的字符串.2.创建存储 "world" 的字符串.3.创建存储连接结果的字符串.4.把 str 的当前内容复制到结

  • 数组方法解决JS字符串连接性能问题有争议

    1.传统上,字符串连接一直是js中性能最低的操作之一. var text="Hello"; text+=" World!"; 早期浏览器没有对这种运算进行优化. 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果.频繁地在后台创建和销毁字符串导制性能异常低下. 2.发现这一点后,开发者们利用数组对象进行优化. var buffer=[],i=0; buffer[i++]="Hello";//通过相应索引值添加元素比push方法快 bu

  • 温故知新——JavaScript中的字符串连接问题最全总结（推荐）

    ECMAScript 中最常见的一个问题是字符串连接的性能.与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变.请考虑下面的代码: var str = "hello "; str += "world"; 实际上,这段代码在幕后执行的步骤如下: 1.创建存储 "hello " 的字符串. 2.创建存储 "world" 的字符串. 3.创建存储连接结果的字符串. 4.把 str 的当前内容复制到结果中.

  • JavaScript 字符串连接性能优化

    复制代码 代码如下: var str = "hello"; str += " world"; 后台所做工作: 1)创建存储 "hello" 的字符串,且使 str 指向它. 2)创建存储 "world" 的字符串. 3)创建存储结果的字符串. 4)将 str 中的当前内容复制到结果字符串中. 5)把 world 复制到结果字符串中. 6)更新 str ,使 str 指向结果字符串. 每拼接一次字符串就循环重复2)~6),如果重

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

    一.ECMAScript的字符串是不可变的,即它们的值不能改变,因此当你写出下面的代码的时候发生了什么呢? Js代码 复制代码 代码如下: var str = "Hello "; str += "world"; 执行的步骤如下: 创建存储"Hello"的字符串 创建存储"world"的字符串 创建存储连接结果的字符串 把str的当前内容复制到结果中 把"world"复制到结果中 更新str,使它指向结果 每

  • 再论Javascript下字符串连接的性能

    1 如何进行字符串连接? 首先让我们来回顾一下字符串连接的两种常用方法: 1.1 使用字符串连接运算符 常用的语言(如Java.C#.PHP等)都有字符串连接运算符,Javascript也不例外,代码示例: 复制代码 代码如下: var str = ""; str = str + "a"; 1.2 使用数组 在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串.而在

  • Java 字符串连接的性能问题分析

    Java中使用+作为字符串连接符,它是把多个字符串合并成一个字符串的方便途径.对于单独一行的输出.或者较小的大小固定对象,使用连接符方便且合适.但是对于大规模的场景,字符串连接符变得有些不合时宜. 以连接N个字符串为列,重复的使用字符串连接符需要N的平方的时间量,最主要的原因是String类是不可变类导致的,即当连接两个字符串时,它们的内容都要存在一次拷贝.每一次连接,原有的两个字符串对象都不变,连接后的结果是一个新生成的对象.这种方式,不仅时间需求很大,而且对内存的要求也非常高. 如果拼接的字

  • VBS中的字符串连接的性能问题

    当然,对于少量的字符串连接,效率并没有对程序造成多大影响,现在让我们考虑一个极端的问题:将1到100000之间的所有数字连接成一个字符串. 最简单的解决方案是直接使用&连接: 复制代码 代码如下: begin = Timer For i = 1 To 100000 str = str & CStr(i) Next WScript.Echo str finish = Timer WScript.Echo finish - begin 但是这个程序在我电脑上需要运行60.648秒,效率太低.换

  • Javascript三种字符串连接方式及性能比较

    第一种:用连接符"+"连接字符串 str="a"; str+="b"; 这种方法相对以下两种,最便捷快速.建议100字符以下的连接使用这种连接方式. 第二种:以数组作为中介,使用jion函数进行连接 var arr=new Array(); arr.push(a); arr.push(b); var str=arr.join(""); 第三种:利用对象属性连接字符串 function stringConnect(){ this

  • javascript中字符串拼接详解

    最近在研究<javascript高级程序设计>中,有一段关于字符串特点的描述,原文大概如下:ECMAScript中的字符串是不可变的,也就是说,字符串一旦创建,他们的值就不能改变.要改变某个变量的保存的的字符串,首先要销毁原来的字符串,然后再用另外一个包含新值的字符串填充该变量,例如: 复制代码 代码如下: var lang = "Java"; lang = lang + "Script"; 实现这个操作的过程如下:首先创建一个能容纳10个字符的新字符串

随机推荐