字符串拼接方法在不同浏览器引擎的差异测试结论
2012-10-18 10:02
344 查看
测试基本结论如下:
更快的字符串相加方式:
很多人误以为数组push方法拼接字符串会比+=快,要知道这仅仅是IE6-8的浏览器下(据我测试,IE7其实还是+=的性能好些)。
实测表明现代浏览器使用+=会比数组push方法快,而在v8引擎中,使用+=方式比数组拼接快4.7倍。
所以最好的优化策略是根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
测试代码:
测试数据:
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
更快的字符串相加方式:
很多人误以为数组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
相关文章推荐
- 不同浏览器下js的字符串split方法的差异
- 也来测测javascript拼接字符串不同方法的效率
- 分针网—IT教育: Javascript不同浏览器差异及兼容方法
- 不同的浏览器创建ajax引擎对象的方法不同
- JavaScript字符串数组拼接的性能测试及优化方法
- Javascript不同浏览器差异及兼容方法
- 5种字符串拼接方法效率的测试
- 在PC上测试移动端网站和模拟手机浏览器的5大方法
- 字符串显示不同的颜色的方法
- 散列表(一):散列表概念、 散列函数构造方法、 常见字符串哈希函数(测试冲突)
- Python字符串拼接的几种方法整理
- DIV CSS在不同IE版本和FF以及Chrome中的兼容性差异解决方法(推荐)
- 通过创建方法,减少不同浏览器通过JS设置样式时的重复书写
- 字符串和字符的比较方法浅析测试(源码摘自microsoft help)
- Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次
- 测试了3种获取中英文混合字符串长度的方法
- C# 少量字符串链接方法及测试(1)字符串与字符串
- 简单的拼接字符串方法 新建数组 然后push()进去内容 最后join(“”)分割
- 自定义字符串处理函数(求长度,拷贝、拼接、比较)--两种方法
- JavaScript组合拼接字符串的效率对比测试