博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 字符串拼接性能分析小记
阅读量:5881 次
发布时间:2019-06-19

本文共 4539 字,大约阅读时间需要 15 分钟。

JavaScript 中,我们经常会因为各种各样的原因去拼接字符串,可能是为了Html的呈现,可能是为了属性的设置,也可能仅仅是为了输出调试日志。

  每次拼接字符串的时候,我们很自然地去考虑它的性能,是不是str=str+a是不是和str+=a性能一样,使用数组Join是不是会更快一些,哪一种才是最好的实现。

的确,我们有诸多方式去拼接字符串,下面本文将会将主流字符串拼接方逐一进行性能评测。

公平起见,我们的测试都是跑在各浏览器的最后一个正式发布版本上,即IE9 ,Chrome19,FF13 及Opera12。

为了测试,我们先构造一个 data,它有个成员,是个100大小的数组。

1: var length = 100;
2: var data = { list: [] };
3: for (var i = 0; i < length; i ++) {
4:     data.list.push({
5:         str1: 'chsword, 邹健, Zou Jian ',
6:         str2: 'http://chsword.cnblogs.com',
7:         str3: 'http://www.chsword.net',
8:         str4: '"http://weibo.com/chsword","http://t.qq.com/chsword"',
9:         str5: 'test'
10:     });
11: };

准备好了,那么我们来进行测试,我选定了8种字符串拼接的方法,然后每一种运行1W次的字符串拼接,每一次拼接将元素的五个子元素拼接在一起:

1.str+=str+a;

2.str=str.concat(a);
3.arr.push(a); and arr.join(“”);
4.str=str.concat(a,b,c,d,e);
5.str=str+a;
6.str=String.prototype.concat(str,a,b,c,d,e);
7.str=String.prototype.concat.apply(s, [a,b,c,d,e]);
8.str=String.prototype.concat(str,a);
9.arr[arr.length]=a

我将以上测试运行在这些浏览器上: IE 9, Chrome 19, Firefox 13, Opera 12.

结果为:

注:图表中单位为MS,标记为2000的都是运行了1分钟以上还未停止的。

通过图表,我们可以看到+=的性能在主流浏览器中平均最高,不过,要说明一点,+=操作在IE早期版本中,性能较差。

Array.Join 来拼接字符串,在FF和Chrome中都比+=方法慢上数倍。

另外,还有像String.prototype.concat(str,a,b,c,d,e)这样的操作,如果在Chrome及Opera中大量执行的话,会直接令页面挂掉,所以这些都是不推荐使用的

总结一下,总体看来+=的性能最高,早先的浏览器中,使用Array.Join性能会较高

测试代码 :

1.使用 += 

1: var str="";
2: for (var i = 0; i < number; i ++) {
3:     for(var j=0;j
4:         str+=data.list[j].str1;
5:         str+=data.list[j].str2;
6:         str+=data.list[j].str3;
7:         str+=data.list[j].str4;
8:         str+=data.list[j].str5;
9:     }
10:     str+="\n";
11: }

2.str.concat

1: var str = "";
2: for (var i = 0; i < number; i++) {
3:     for (var j = 0; j < length; j++) {
4:         str=str.concat(data.list[j].str1);
5:         str=str.concat(data.list[j].str2);
6:         str=str.concat(data.list[j].str3);
7:         str=str.concat(data.list[j].str4);
8:         str=str.concat(data.list[j].str5);
9:     }
10:     str=str.concat( "\n");
11: }

3.Use Array Join  

1: var arr=[];
2: for (var i = 0; i < number; i ++) {
3:     for(var j=0;j
4:         arr.push(data.list[j].str1);
5:         arr.push(data.list[j].str2);
6:         arr.push(data.list[j].str3);
7:         arr.push(data.list[j].str4);
8:         arr.push(data.list[j].str5);
9:     }
10:     arr.push("\n");
11: }
12: arr.join("");

4.str=str.concat(a,b,c,d,e);  

1: var str = "";
2: for (var i = 0; i < number; i++) {
3:     for (var j = 0; j < length; j++) {
4:         str = str.concat(data.list[j].str1
5:         ,data.list[j].str2
6:         ,data.list[j].str3
7:         ,data.list[j].str4
8:         ,data.list[j].str5);
9:     }
10:     str = str.concat("\n");
11: }

5.str=str+a

1: var str = "";
2: for (var i = 0; i < number; i++) {
3:     for (var j = 0; j < length; j++) {
4:         str = str + data.list[j].str1;
5:         str = str + data.list[j].str2;
6:         str = str + data.list[j].str3;
7:         str = str + data.list[j].str4;
8:         str = str + data.list[j].str5;
9:     }
10:     str = str + "\n";
11: }

6.str=String.prototype.concat(str,a,b,c,d,e)

1: var str = "";
2: for (var i = 0; i < number; i++) {
3:     for (var j = 0; j < length; j++) {
4:         str = String.prototype.concat(str,data.list[j].str1,
5:         data.list[j].str2,
6:         data.list[j].str3,
7:         data.list[j].str4,
8:         data.list[j].str5);
9:     }
10:     str = String.prototype.concat(str,"\n");
11: }

7.str=String.prototype.concat.apply(s, [a,b,c,d,e])

1: var str = "";
2: for (var i = 0; i < number; i++) {
3:     for (var j = 0; j < length; j++) {
4:         str = String.prototype.concat.apply(str, [data.list[j].str1,
5:         data.list[j].str2,
6:         data.list[j].str3,
7:         data.list[j].str4,
8:         data.list[j].str5]);
9:     }
10:     str =String.prototype.concat.apply(str,["\n"]);
11: }

8.str=String.prototype.concat(str,a)

1: var str = "";
2: for (var i = 0; i < number; i++) {
3:     for (var j = 0; j < length; j++) {
4:         str = String.prototype.concat.call(str,data.list[j].str1);
5:         str = String.prototype.concat.call(str,data.list[j].str2);
6:         str = String.prototype.concat.call(str,data.list[j].str3);
7:         str = String.prototype.concat.call(str, data.list[j].str4);
8:         str = String.prototype.concat.call(str,data.list[j].str5);
9:     }
10:     str = String.prototype.concat(str, "\n");
11: }
9.arr[arr.length]
1 var arr=[]; 2             for (var i = 0; i < number; i ++) {             3                 for(var j=0;j

 

转载地址:http://dqpix.baihongyu.com/

你可能感兴趣的文章
HTML 字符实体
查看>>
质数因子
查看>>
在NVIDIA Quadro NVS 295 显卡上装redhat 黑屏 无信号输入
查看>>
Announcing the new Office 365 admin center
查看>>
小白经营网站的前前后后
查看>>
Spring MVC 教程,快速入门,深入分析——如何实现全局的异常处理
查看>>
单用户模式修改密码
查看>>
微信小程序帮你赚到第一桶金
查看>>
mac下安卓开发环境搭建
查看>>
学习之华丽的注册按钮➕倒计时
查看>>
Vim 中使用 OmniComplete 为 C/C++ 自动补全(部分增加)
查看>>
初识Hadoop
查看>>
Oracle之内存结构(SGA、PGA)
查看>>
Binary Search Tree IN C
查看>>
ios-cocos2d游戏开发基础-进度条-开发笔记
查看>>
jquery之trigger()
查看>>
打造自己的Cacti模板
查看>>
Spring源码浅析之事务(四)
查看>>
我的友情链接
查看>>
[APM] 2个实例+5个维度解读APM技术
查看>>