JavaScript极速狂飙：组合拼接字符串的效率(meizz)

最后我再补充一点，若是字节级别的字符串拼接就没有必要使用数组join了，毕竟开数组变量也是有消耗的。若组合的字符串在几K以上，那就该使用数组法了。

这点原来在创建select的option时发现过，
createElement最慢，innerHTML += 其次,
join最快

字符串拼接次数10000
firefox1.5
字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 1452毫秒！
数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 1512毫秒！opera8.5
字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 20毫秒！
数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 30毫秒！IE6
字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 33759毫秒！
数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 50毫秒！
计算方法好象有错。抱歉，心烦，没心情看代码，只能帮忙简单地测试一下了。
firefox和opera下两者几乎一样的耗时，而IE下就是join快很多。

innerHTML = 小于 innerHTML+ 的速度

嗯，好象在netscape Opera 里测试的数据不准确，Opera 里不可能有那么快的，现我修改一下统计的时间算法，把字符串的加载显示也算进去吧：<body>
字符串拼接次数<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="字符串拼接法" onclick="method1()">
<input type="button" value="数组赋值join法" onclick="method2()"><br>
<div id="method1"> </div>
<div id="method2"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

IE 6.0:
字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 22089毫秒！
数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 218毫秒！Firefox 1.0:
字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 1044毫秒！
数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 1044毫秒！Mozilla 1.7:
字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 1045毫秒！
数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 1044毫秒！Netscape 7.0:
字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 10273毫秒！
数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 1138毫秒！Opera 7.54:
字符串拼接法：拼接后的大字符串长 1010000字节，拼接耗时 6968毫秒！
数组赋值join法：拼接后的大字符串长 1010000字节，拼接耗时 6922毫秒！循环10000次的测试结果表明在IE和Netscape里可以大大提高效率，而在Firefox Mozilla Opera 里两种方法耗时基本相近，这些数据足可以判定数组join法优于传统字符串拼接。

netlover在这一贴http://community.csdn.net/Expert/topic/4275/4275033.xml?temp=.9215052
里曾经推荐的一篇文章跟也符合本贴主题，
对于关注本贴的朋友，很值得一读。
其中的“Expand Your Options in a SELECT Element”也提到了本贴的观点：回复人： net_lover(孟子E章) ( ) 信誉：870  2005-9-16 15:13:27  得分: 0
http://msdn.microsoft.com/workshop/author/perf/dhtmlperf.asp
Faster DHTML in 12 Steps

确实如此，一般稍微多点的数据生成偶都用join。

我一般都会把重复的内容抽取到数组外面来join。象这个例子中，如果没有不同的内容的话，循环都是多余的。<body>
字符串拼接次数<input id="totle" value="50000" size="5" maxlength="5">
<input type="button" value="字符串拼接法" onclick="method1()">
<input type="button" value="数组赋值join法" onclick="method2()">
<input type="button" value="数组直接join" onclick="method3()"><br>
<div id="method1"> </div>
<div id="method2"> </div>
<div id="method3"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

在重复次数足够多的时候才有比较明显的差别
<body>
字符串拼接次数<input id="totle" value="500000" size="5" maxlength="5">
<input type="button" value="字符串拼接法" onclick="method1()">
<input type="button" value="数组赋值join法" onclick="method2()">
<input type="button" value="数组直接join" onclick="method3()"><br>
<div id="method1"> </div>
<div id="method2"> </div>
<div id="method3"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
其实实际应用中不在乎这点细微的运行速度了，只是理论意义上的快。
很久没有回论坛来了，一回来就发现这里还有人在做这样的技术讨论，象以前一样……

前面几个测试都有问题，给show赋值的时间不应该被计入字符串操作的计算时间里面。
<body>
字符串拼接次数<input id="totle" value="500000" size="8" maxlength="8">
<input type="button" value="字符串拼接法" onclick="method1()">
<input type="button" value="数组赋值join法" onclick="method2()">
<input type="button" value="数组直接join" onclick="method3()"><br>
<div id="method1"> </div>
<div id="method2"> </div>
<div id="method3"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

呵呵，昨天看到的，昨晚就用到了。tks 楼主 vbscript 40918字节原速6000- 8000 优化后 1500-2500

数组直接join法效率不错，偶测试是500000字节在400毫秒以内，应该是目前为止最快的了。
不过在实际应用中多数需要通过循环来得到变量再进行组合，所以这种方法只能用于组合内容相同的拼接。鱼和熊掌啊！

多谢指点，又多了一个新的加速方法，嘿嘿，不过在实际应用过程中，这种相同的字符串拼接的应用并不多，更多的是很多不同内容的字符串连接，至于为什么把显示时间也加上去，那是因为在Opera里测试出来的数据实在离谱。有EMU的参与，贴子一定热闹。

我以前碰到过这个难题，是在把xml文件中的汉字转义的时候。
对于此类问题，我以前的办法是：
先分组拼接，再分组，一级级下去，最后一级只有两三个长字符串接在一起。例如：
    a0  a1 a2 a3 a4 a5 a6 a7 a8 a9  a10 a11 a12 a13 a14 a15 a16 a17
        b0       b1       b2         b3          b4          b5
                 c0                               c1
                                 d0对于最终字符串长度为600K的大字符串来说，速度提高几十倍到上百倍

那按照这种(理论)方法,那在ASP中的
Dim sString
sString="01234567891123456789212345678931234567894123456789"
sString = sString & "abcdefghijklmnopqrstuvwxyz"用join来处理字符串时也比sString = sString & 快吗?那两种方法在内存占用上是sString = sString & 和用数组 join来处理那个有优势(占用少)

TO：qfljm(野猪)
join是针对数组的方法，如果只是简短的字符串组合，就象你写的那样，就没必要用数组再join了。

我的意思是需要连接的字符串比较多时,在ASP中那种方法更有优势
比如一个文章列表有40行,
在ASP中现在的写法都是得到数据然后用FOR来连接(sString = sString &)要
输出的列表HTML字符串.
最后把这个字符串变量输出到网页中

自己去感受一下：
Private Sub Command1_Click()
    Dim st As Date
    st = Now
    Dim str As String
    For i = 0 To 50000
        str = str + "test"
    Next
    Dim et As Date
    et = Now
    MsgBox (et - st)
End SubPrivate Sub Command2_Click()
    Dim st As Date
    st = Now
    Dim strarr(50000) As Variant
    For i = 0 To 50000
        strarr(i) = "test"
    Next
    Dim str As String
    str = Join(strarr, "")
    Dim et As Date
    et = Now
    MsgBox (et - st)
End Sub

也许可能和js引擎和string类的实现有关，
js的引擎设计决定它在大量对象工作效率低下，
但是能够消除循环引用。
js的string类可能参考了java的string类，
被作成是不能够动态改变大小的
（所谓改变实际上是重建一个对象）
仅是猜测，没有试过，
今天比较糟糕，不试了，下先。

收获很大，但是，梅老大给的例子中，有个现象，用join方法的那个按钮，点几下就会出现一个峰值，比如已开始是耗时0.00，连续点击3到4下后就会出现一个0.15,然后又恢复到0.00，如此循环，每3到4下就会出现一个峰值，个人考虑是不是有一个缓存的机制？

调试易

JavaScript极速狂飙：组合拼接字符串的效率(meizz)

解决方案 »