位置：首页>> 网络编程>> JavaScript>> 再谈“字符串拼接”的效率

再谈“字符串拼接”的效率

作者：yemoo　来源：yemoo博客　发布时间：2009-04-30 12:48:00　

标签：字符串,效率,浏览器

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

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

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

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

对比可做以下简单总结：

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

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

<html> <head> <title>Listing 1-2</title> <script> 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);" onClick="doTests();">Click here to test</a> <br><br> <div id="result"> </div> </body> </html>

投稿

再谈“字符串拼接”的效率

猜你喜欢