字符串拼接方法在不同浏览器引擎的差异测试结论
测试基本结论如下:
更快的字符串相加方式:
很多人误以为数组push方法拼接字符串会比+=快,要知道这仅仅是IE6-8的浏览器下(据我测试,IE7其实还是+=的性能好些)。
实测表明现代浏览器使用+=会比数组push方法快,而在v8引擎中,使用+=方式比数组拼接快4.7倍。
所以最好的优化策略是根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
测试代码:
[html]
<!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还是比较稳定的。
补充:web前端 , HTML 5 ,