网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试。

测试对象

  • +=方式,字符串累加计算方式
  • +s1+s2...+sn方式,即传统连加拼接字符串方式
  • s.push(s1); s.join('')方式,数组拼接字符串方式
  • es6字符串模板

测试方式:各执行times次运算,记录执行时间。

测试结果

字符串模板的确钢!

不过上述是在Chrome中的测试结果,结果显示字符串模板的性能和字符串连加拼接方式性能大体相当,是+=逐个链接方式性能的5倍左右,array join方式性能最差,不忍直视。

在火狐浏览器下,除了array join依然不忍直视外,其他三种性能表现相当:

,火狐下贴一张撑撑门面就行了。

微软Edge下,结果比较呵呵哒:

除了连加方式外,其他基本上都可以算挂了。。。

IE呢?压根就不支持字符串模板,所以咱就不测了。

下面是测试脚本

 (function () {

     let stringPlus = function () {

             //+=运算

             let a = "ahsdgdsd'sadbd'fpdfknsndf";
a += "sgeoejhsshdsksdlkfkfss";
a += "weieotjmn;gjfkawjrbnvjkjke";
a += "sdfnjslkdgfpla;'gjfak";
a += "dsfjpojjagjksfdoaaskksgsf;adn";
a += "wyehfdhfvcxaawjyfbsvkcsajgef";
a += "igvbcxzxgfhpgbsna";
a += "afsvcbhlksjegjfdnalrllfdjnxl";
a += "awshbnlsklesfdnxsxldxdsdhkjklm";
a += "uatesgsjdabsuaadjhcbdsdgcdbchnxkyesuefgdgsdxjhdbxcduhdywgbsihs";
a += "agsccbjzhbcxbwefyouoiUWA8YESSIHCB";
a += "dfasdkcaehwieruefandjcnxzvcuerefha";
a += "vsdrleifhjs489wodjnlgsehufdja";
a += "wegtfyudashnvnxntrwefkhjhfnc";
a += "ASDGFODIUERTGYHJG;OLFJAMGRTYRUGFNDLAKBWYG ";
a += "WEGPFHAFSDRRGJNRYTE8Aghjfoueygf";
a += "erfvcdvmcdlfklvcnssejckzdjvcns";
a += "wetufvnckjffbcnmfwuirldncxmlzjn";
a += "fhfhjlkgeiuvlzkjdquevxx,.vnee";
a += "sdchbnzkdn xxcmsbvcosihhsjm.mn soe";
a += "yuuweygfyvczhvqwerhbfvnsjlhvzxv";
a += "qyylkldbhjjfjJHMNVlaefl";
a += "bdkvxknkniruvn,xhlsaeshksjfk z,";
a += "ygufdkfhakvbxcv,nu[gq;hfauhfaks";
a += "asfyerueiwsnjlkZBcharvbhzcablf";
a += "dvcbzkjnvlsujvcz,cwrajklzldnahruf";
a += "siihjscdcnlzzcslfahdwuiednvcaesf";
a += "auhdzcjsfhjsl;ncaaureiwksnvlcl";
a += "iuaehcnslklcseufjsjeotroeiosdn";
a += "waeg;tirueywtrdfghjnxlghfgekfg";
a += "nhgfdhjkf,v'c;lIkzxjfhbnszdv";
a += "zxgfdsuyhjkglckjlYATRGFHJKXJCHASFJ";
a += "afyvhjletd;LJKN;alnksrjfhbhdfn";
a += "bvcxhgehglalksudjhfjdncmxwpljfd";
return a;
},
stringPlus2 = function () { //连+运算 let a = "ahsdgdsd'sadbd'fpdfknsndf"
+ "sgeoejhsshdsksdlkfkfss"
+ "weieotjmn;gjfkawjrbnvjkjke"
+ "sdfnjslkdgfpla;'gjfak"
+ "dsfjpojjagjksfdoaaskksgsf;adn"
+ "wyehfdhfvcxaawjyfbsvkcsajgef"
+ "igvbcxzxgfhpgbsna"
+ "afsvcbhlksjegjfdnalrllfdjnxl"
+ "awshbnlsklesfdnxsxldxdsdhkjklm"
+ "uatesgsjdabsuaadjhcbdsdgcdbchnxkyesuefgdgsdxjhdbxcduhdywgbsihs"
+ "agsccbjzhbcxbwefyouoiUWA8YESSIHCB"
+ "dfasdkcaehwieruefandjcnxzvcuerefha"
+ "vsdrleifhjs489wodjnlgsehufdja"
+ "wegtfyudashnvnxntrwefkhjhfnc"
+ "ASDGFODIUERTGYHJG;OLFJAMGRTYRUGFNDLAKBWYG "
+ "WEGPFHAFSDRRGJNRYTE8Aghjfoueygf"
+ "erfvcdvmcdlfklvcnssejckzdjvcns"
+ "wetufvnckjffbcnmfwuirldncxmlzjn"
+ "fhfhjlkgeiuvlzkjdquevxx,.vnee"
+ "sdchbnzkdn xxcmsbvcosihhsjm.mn soe"
+ "yuuweygfyvczhvqwerhbfvnsjlhvzxv"
+ "qyylkldbhjjfjJHMNVlaefl"
+ "bdkvxknkniruvn,xhlsaeshksjfk z,"
+ "ygufdkfhakvbxcv,nu[gq;hfauhfaks"
+ "asfyerueiwsnjlkZBcharvbhzcablf"
+ "dvcbzkjnvlsujvcz,cwrajklzldnahruf"
+ "siihjscdcnlzzcslfahdwuiednvcaesf"
+ "auhdzcjsfhjsl;ncaaureiwksnvlcl"
+ "iuaehcnslklcseufjsjeotroeiosdn"
+ "waeg;tirueywtrdfghjnxlghfgekfg"
+ "nhgfdhjkf,v'c;lIkzxjfhbnszdv"
+ "zxgfdsuyhjkglckjlYATRGFHJKXJCHASFJ"
+ "afyvhjletd;LJKN;alnksrjfhbhdfn"
+ "bvcxhgehglalksudjhfjdncmxwpljfd";
return a;
},
arrayJoin = function () { //array join let a = ["ahsdgdsd'sadbd'fpdfknsndf"];
a.push("sgeoejhsshdsksdlkfkfss");
a.push("weieotjmn;gjfkawjrbnvjkjke");
a.push("sdfnjslkdgfpla;'gjfak");
a.push("dsfjpojjagjksfdoaaskksgsf;adn");
a.push("wyehfdhfvcxaawjyfbsvkcsajgef");
a.push("igvbcxzxgfhpgbsna");
a.push("afsvcbhlksjegjfdnalrllfdjnxl");
a.push("awshbnlsklesfdnxsxldxdsdhkjklm");
a.push("uatesgsjdabsuaadjhcbdsdgcdbchnxkyesuefgdgsdxjhdbxcduhdywgbsihs");
a.push("agsccbjzhbcxbwefyouoiUWA8YESSIHCB");
a.push("dfasdkcaehwieruefandjcnxzvcuerefha");
a.push("vsdrleifhjs489wodjnlgsehufdja");
a.push("wegtfyudashnvnxntrwefkhjhfnc");
a.push("ASDGFODIUERTGYHJG;OLFJAMGRTYRUGFNDLAKBWYG ");
a.push("WEGPFHAFSDRRGJNRYTE8Aghjfoueygf");
a.push("erfvcdvmcdlfklvcnssejckzdjvcns");
a.push("wetufvnckjffbcnmfwuirldncxmlzjn");
a.push("fhfhjlkgeiuvlzkjdquevxx,.vnee");
a.push("sdchbnzkdn xxcmsbvcosihhsjm.mn soe");
a.push("yuuweygfyvczhvqwerhbfvnsjlhvzxv");
a.push("qyylkldbhjjfjJHMNVlaefl");
a.push("bdkvxknkniruvn,xhlsaeshksjfk z,");
a.push("ygufdkfhakvbxcv,nu[gq;hfauhfaks");
a.push("asfyerueiwsnjlkZBcharvbhzcablf");
a.push("dvcbzkjnvlsujvcz,cwrajklzldnahruf");
a.push("siihjscdcnlzzcslfahdwuiednvcaesf");
a.push("auhdzcjsfhjsl;ncaaureiwksnvlcl");
a.push("iuaehcnslklcseufjsjeotroeiosdn");
a.push("waeg;tirueywtrdfghjnxlghfgekfg");
a.push("nhgfdhjkf,v'c;lIkzxjfhbnszdv");
a.push("zxgfdsuyhjkglckjlYATRGFHJKXJCHASFJ");
a.push("afyvhjletd;LJKN;alnksrjfhbhdfn");
a.push("bvcxhgehglalksudjhfjdncmxwpljfd");
return a.join('');
},
stringTemplate = function () { //字符串模板 let a1 = "ahsdgdsd'sadbd'fpdfknsndf",
a2 = "sgeoejhsshdsksdlkfkfss",
a3 = "weieotjmn;gjfkawjrbnvjkjke",
a4 = "sdfnjslkdgfpla;'gjfak",
a5 = "dsfjpojjagjksfdoaaskksgsf;adn",
a6 = "wyehfdhfvcxaawjyfbsvkcsajgef",
a7 = "igvbcxzxgfhpgbsna",
a8 = "afsvcbhlksjegjfdnalrllfdjnxl",
a9 = "awshbnlsklesfdnxsxldxdsdhkjklm",
a10 = "agsccbjzhbcxbwefyouoiUWA8YESSIHCB";
let a = `${a1}${a2}${a3}${a4}${a5}${a6}${a7}${a8}${a9}uatesgsjdabsuaadjhcbdsdgcdbchnxkyesuefgdgsdxjhdbxcduhdywgbsihs${a10}${"dfasdkcaehwieruefandjcnxzvcuerefha"}vsdrleifhjs489wodjnlgsehufdja${"wegtfyudashnvnxntrwefkhjhfnc"}${"ASDGFODIUERTGYHJG;OLFJAMGRTYRUGFNDLAKBWYG "}${"WEGPFHAFSDRRGJNRYTE8Aghjfoueygf"}${"erfvcdvmcdlfklvcnssejckzdjvcns"}${"wetufvnckjffbcnmfwuirldncxmlzjn"}${"fhfhjlkgeiuvlzkjdquevxx,.vnee"}${"sdchbnzkdn xxcmsbvcosihhsjm.mn soe"}${"yuuweygfyvczhvqwerhbfvnsjlhvzxv"}qyylkldbhjjfjJHMNVlaefl${"bdkvxknkniruvn,xhlsaeshksjfk z,"}${"ygufdkfhakvbxcv,nu[gq;hfauhfaks"}${"asfyerueiwsnjlkZBcharvbhzcablf"}${"dvcbzkjnvlsujvcz,cwrajklzldnahruf"}${"siihjscdcnlzzcslfahdwuiednvcaesf"}${"auhdzcjsfhjsl;ncaaureiwksnvlcl"}${"iuaehcnslklcseufjsjeotroeiosdn"}${"waeg;tirueywtrdfghjnxlghfgekfg"}${"nhgfdhjkf,v'c;lIkzxjfhbnszdv"}${"zxgfdsuyhjkglckjlYATRGFHJKXJCHASFJ"}${"afyvhjletd;LJKN;alnksrjfhbhdfn"}bvcxhgehglalksudjhfjdncmxwpljfd`
return a;
}; //stringPlus
let start = new Date().getTime(),
string = "",
times = 1000000;
console.info('操作次数 -> ' + times);
for(let i = 0; i < times; i++){
string = stringPlus();
}
let end = new Date().getTime();
console.info("string plus -> " + (end - start)); //stringPlus2
start = new Date().getTime();
string = "";
for(let i = 0; i < times; i++){
string = stringPlus2();
}
end = new Date().getTime();
console.info("string plus 2 -> " + (end - start)); //arrayJoin
start = new Date().getTime();
string = "";
for(let i = 0; i < times; i++){
string = arrayJoin();
}
end = new Date().getTime();
console.info("array join -> " + (end - start)); //stringTemplate
start = new Date().getTime();
string = "";
for(let i = 0; i < times; i++){
string = stringTemplate();
}
end = new Date().getTime();
console.info("string template -> " + (end - start)); })();

只为粗暴看一下ES6的字符串模板的性能的更多相关文章

  1. ES6中字符串模板的使用

    反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...

  2. ES6 学习 -- 字符串模板

    ES5及以前,动态操作dom结构时,要多个字符串和变量拼接,如果不换行处理,则需要写很长的代码,不利于阅读理解,如果进行换行写入,则需要一堆的"+"号来连接文本与变量,写起来非常麻 ...

  3. 前端小白-----ES6之字符串模板

    前言:只要坚持就会胜利--Coldfront-小白菜 既是总结也是一种分享 分享内容:ES6 字符串模板 案例1:var Musics=[{music:"六月的雨",singer: ...

  4. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  5. es6字符串模板总结

    我们平时用原生js插入标签或者用node.js写数据库语言时候,经常需要大量的字符串进行转义,很容易出错,有了es6的字符串模板,就再也不用担心会出错了 1.模板中的变量写在${}中,${}中的值可以 ...

  6. 粗看ES6之字符串

    标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...

  7. ES6让字符串String增加了哪些好玩的特性呢?

    确实因为现在天气变热了,所以一天天的这么写我也很累.所以如果阅读的时候有什么错误还请大家指出来,不好意思.学习永无止境. OK,今天继续讲解ES6系列知识 学过上一节的解构赋值就知道,ES6确实给我们 ...

  8. javascript的replace+正则 实现ES6的字符串模版

    采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ...

  9. es6学习笔记--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

随机推荐

  1. ZOJ 3931 Exact Compression

    题目看了半小时才看懂的. 题意:首先根据给出的序列,构造出哈夫曼树,构造出来的是一棵二叉树,每个节点都有一个权值,每个节点的两个儿子只能取一个,问能否使取出来的节点权值之和刚好等于e. 这样一分析就很 ...

  2. HDU 2809 God of War

    状压DP.我认为是数据水了,用打死了哪几只作为状态,AC代码只需要保存当前状态的最大血量,完全没有考虑攻击力大小. 个人认为正确DP应该这样的:dp[状态][等级],但这样写不能AC,时间复杂度会很大 ...

  3. POJ3169差分约束系统

    题意:有n头牛,编号为1到n,对于关系好的ml头牛,al和bl之间的距离不大于dl,关系差的md头牛,ad和bd之间的距离不大于dd,求第1头牛和第n头牛之间的距离 分析:这是一道差分约束系统的题目, ...

  4. STM32单片机图片解码

    图片解码首先是最简单的bmp图片解码,关于bmp的结构可自行查阅,代码如下 #ifndef __BMPDECODE_H_ #define __BMPDECODE_H_ #include "f ...

  5. lpc1768usb使用-配置

    #ifndef __USBCFG_H__ #define __USBCFG_H__ //#define USB_IF_NUM          1 #define USB_MAX_PACKET0    ...

  6. 【转】C\C++代码优化的27个建议

    1. 记住阿姆达尔定律: funccost是函数func运行时间百分比,funcspeedup是你优化函数的运行的系数. 所以,如果你优化了函数TriangleIntersect执行40%的运行时间, ...

  7. 路由器、交换机学习之IP地址、使用网络掩码划分子网

    局域网子网划分 对于C类IP地址来说(192.168.1.X,其中前面的192.168.1为网络号,后面的X为主机号,这样的网络中可以有254台主机,其中.0为局域网地址,.255为广播地址)进行子网 ...

  8. js-权威指南学习笔记8

    第8章 函数 1.参数有形参和实参的区别,形参相当于函数中定义的变量,实参是在运行时的函数调用时传入的参数. 2.函数表达式可以包含名称,这在递归时很有用. 3.函数定义表达式特别适合用来定义那些只会 ...

  9. IOS开发-ObjC-NSDictionary

    OC中Foundation框架中有字典类,字典分不可变字典(NSDictionary)和可变字典(NSMutableDictionary),它们的使用如下: 不可变字典: //------------ ...

  10. js 匿名函数 json

    <script type="text/javascript"> var My_func = function(name){   this.obj_name=name; ...