首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

字符串拼凑方法在不同浏览器引擎的差异测试结论

2012-11-06 
字符串拼接方法在不同浏览器引擎的差异测试结论测试基本结论如下: 更快的字符串相加方式:很多人误以为数组

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

测试基本结论如下:
更快的字符串相加方式:
很多人误以为数组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

热点排行