“字符串拼接”的效率

wenjinglian

浏览: 824466 次
性别:
来自: 株洲->深圳

最近访客更多访客>>

chenmin77527

liyuhan

jljiang

stonelin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

javascript

有关JS中字符串的相关文章，现在网上大概不计其数了。这里我不想再就这个问题做过多的论述，只是对几种方式的实现在各种浏览器中的执行效率进行对比做个总结。

拼接字符串，大体分为两种方式，一种通过+号拼接（方式1），这种方式在IE6中效率是极其低下的，因此就出现了第二种方式：采用数组保存，最后通过join拼接，这种方式的效率在IE6下对比会发现速度差异非常大。此外还有很多朋友估计没有注意过，数组拼接的方式又分为两种，一种是通过push将字符串放入数组（方式2），另外一种是通过arr[arr.length]='string'的方式存入（方式3），这两种方式的性能也是有一些差异的。这样，我们发现一共是有三种不同的方式的，下面我对这三种方式在不同浏览器下的执行效率做了个对比，具体数据就不贴出来（因为每次的数据都是不同的，但执行速度的排名是比较稳定的），只对他们的执行效率做个排名。

===========================================

浏览器   方式1  方式2  方式3  引擎
google    3      2      1     AppleWebKit/525.19
safari    3      2      1     AppleWebKit/528.16
opera     1      3      2     Presto/2.1.1
ff3       1      3      2     Gecko/2009042316
ff2       1      3      2     Gecko/20081201
IE8       1      3      2     Trident/4.0
IE7       3      2      1     未知
IE6       3      2      1     未知

=============================================

浏览器在不断更新：测试数据结果不一定都正确，我测试了chrome浏览器，++的拼接是最快的。

对比可做以下简单总结：

在FF及IE8中直接用+号拼接的方式还是效率的最高的方式，其它情况下该方式是最慢的。
数组拼接的方式里arr[arr.length]=''的方式是快于push方式的。
在进行字符串拼接的时间：1要判断浏览器类型，如果是+号拼接方式快则采用+号方式直接拼接，如果是数组方式，则采用arr[arr.length]=''的方式将字符串存入数组然后再采用join的方式拼接。

最后附上测试用到得代码（注：为准确测试，在不同浏览器要修改循环次数数值）

<html> 
<head> 
<title>Listing 1-2</title> 
<script type="text/javascript"><!--
 
function badTest() { 
    var startTime = new Date().valueOf(); 
    var s = ""; 
    for (var i = 0; i < 100000; i++) { 
        s += "This is a test string"; 
    } 
    return new Date().valueOf() - startTime; 
} 
function goodTest() { 
    var startTime = new Date().valueOf(); 
    var stringBuffer = new Array(); 
    for (var i = 0; i < 100000; i++) { 
        stringBuffer.push("This is a test string"); 
    } 
    var s = stringBuffer.join(""); 
    return new Date().valueOf() - startTime; 
} 
function betterTest() { 
    var startTime = new Date().valueOf(); 
    var stringBuffer = new Array(); 
    for (var i = 0; i < 100000; i++) { 
        stringBuffer[stringBuffer.length] = "This is a test string"; 
    } 
    var s = stringBuffer.join(""); 
    return new Date().valueOf() - startTime; 
} 
function doTests() { 
    var htm = ""; 
    htm += "Time badTest took: " + badTest() + "<br>"; 
    htm += "Time goodTest took: " + goodTest() + "<br>"; 
    htm += "Time betterTest took: " + betterTest(); 
    htm += "<br>" + navigator.userAgent; 
    document.getElementById("result").innerHTML = htm; 
} 
 
// --></script> 
</head> 
<body> 
<a href="javascript:void(0);" mce_href="javascript:void(0);" onClick="doTests();">Click here to test</a> 
<br><br> 
<div id="result"> </div> 
</body> 
</html>

分享到：

2013-04-06 19:56
浏览 1459
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论