字符串拼接方法在不同浏览器引擎的差异测试结论-CSDN博客

测试基本结论如下：
更快的字符串相加方式：
很多人误以为数组push方法拼接字符串会比+=快，要知道这仅仅是IE6-8的浏览器下（据我测试,IE7其实还是+=的性能好些）。
实测表明现代浏览器使用+=会比数组push方法快，而在v8引擎中，使用+=方式比数组拼接快4.7倍。
所以最好的优化策略是根据JavaScript引擎特性采用了两种不同的字符串拼接方式。

测试代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>字符串拼接方法在不同浏览器引擎的差异测试</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id='result'></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
测试结论如下： 
更快的字符串相加方式
很多人误以为数组push方法拼接字符串会比+=快，要知道这仅仅是IE6-8的浏览器下。
实测表明现代浏览器使用+=会比数组push方法快，而在v8引擎中，使用+=方式比数组拼接快4.7倍。
所以rtTemplate根据JavaScript引擎特性采用了两种不同的字符串拼接方式。  
*/

function show_result(key, val) {
   var oDiv = document.getElementById('result');
   var oChildDiv = document.createElement('div');
   oChildDiv.innerHTML = key + '=' + val;
   oDiv.appendChild(oChildDiv)
};

var total_loop  = 20000;  //定义字符串拼接操作的执行次数
var append_str  = 'a';    //用于拼接的字符，为了测试方便，这里每次只进行拼接一个字符
var total_times = 100;    //测试的案例执行次数

//执行total_times次字符串+=操作，并输出每次的时间，并计算平均耗时
var s = '', beg = 0, end = 0, dif = 0;
var plus_total_time = 0; //执行total_times的总时间
for(var tt = 0; tt < total_times; tt++ ) {
    //每次均进行初始化
	s= '';
	beg = new Date();
	for(var loop = 0; loop < total_loop; loop++) {
	      s += append_str;
	}
    end = new Date();
    dif = end - beg;

	plus_total_time += dif; //累计时间，用于计算平均值

	//输出每次的时间
    show_result('第'+(tt+1)+'次所花时间', dif);
}

//输出瓶颈时间
 show_result('+=操作平均次所花时间', plus_total_time/total_times);

//执行total_times次字符串数组push操作，并输出每次的时间，并计算平均耗时
s = '', beg = 0, end = 0, dif = 0;
plus_total_time = 0; //执行total_times的总时间
var arr;
for(var tt = 0; tt < total_times; tt++ ) {
    //每次均进行初始化
	s= '', arr = [];
	beg = new Date();
	for(var loop = 0; loop < total_loop; loop++) {
	      arr.push(append_str);
	}
	s = arr.join();
    end = new Date();
    dif = end - beg;

	plus_total_time += dif; //累计时间，用于计算平均值

	//输出每次的时间
    show_result('第'+(tt+1)+'次所花时间', dif);
}

//输出瓶颈时间
 show_result('push操作平均次所花时间', plus_total_time/total_times);
//-->
</SCRIPT>
</BODY>
</HTML>

测试数据：

chrome：

当执行拼接次数20000次的时候：push的性能比+=略好：push耗时：0.37，+=耗时：0.51

当执行拼接次数200000次的时候：+=的性能比push好很多：push耗时：37.03，+=耗时：4.49

FireFox：

当执行拼接次数200000次的时候：+=的性能比push略好：push耗时：9.92，+=耗时：6.47

当执行拼接次数20000次的时候：+=的性能比push略好：push耗时：0.77，+=耗时：0.54

FF还是比较稳定的。

IE7：

IE执行20000次基本脚本会挂死，说明IE还是比较差。

当拼接2000次的时候：+=的性能比push的略好：push耗时：4.37，+=耗时：3.11

当拼接4000次的时候：+=的性能比push的略好：push耗时：8.87，+=耗时：7.01