在ES6中使用字符串连接或模板文字时,HTML代码生成在现代浏览器中运行的速度是否可测得更快?
例如:
字符串串联
"<body>"+ "<article>"+ "<time datetime='" + date.toISOString() +"'>"+ date +"</time>"+ "</article>"+ "</body>"
模板文字
`<body> <article> <time datetime='${ date.toISOString() }'>${ date }</time> </article> </body>`
目前看来,字符串连接速度更快:http : //jsperf.com/es6-string-literals-vs-string-concatenation
ES6 with variable 19,992,512 ±5.21% 78% slower String concatenation with variable 89,791,408 ±2.15% fastest ES6 with function 461,358 ±3.12% 99% slower String concatenation with function 503,255 ±1.77% 99% slower
我测试过的是在#enable-javascript-harmony启用了该标志的V4 4.3.31的Chrome 43.0.2334.0 canary(64位)上运行。
作为参考,Node.js的最新版本(在撰写本文时为0.12.0)正在使用V8 3.28.73:https ://raw.githubusercontent.com/joyent/node/master/ChangeLog
我确信尚未应用所有可能的性能优化,因此可以合理地预期,随着ES6越来越接近最终定稿,并且这些功能已迁移到稳定分支,性能将会提高。
编辑:感谢您的评论@ user1329482,@ icl7126,Nicolai Borisik和FesterCluck。自从提出此问题以来已经过去了大约2年,ES6浏览器支持已大大增加,并且已经进行了大量性能优化。这里有一些更新。
编辑:(2020年2月)基于@JorgeFuentesGonzález注释和后续确认更新了Chrome结果。
在Chrome(自59.0.3035起)中,ES6字符串文字速度更快:
ES6 with variable 48,161,401 ±1.07% fastest String concatenation with variable 27,046,298 ±0.48% 44% slower ES6 with function 820,441 ±1.10% 98% slower String concatenation with function 807,088 ±1.08% 98% slower
更新:在Chrome(自79.0.3945起)中,字符串连接速度更快 …请参阅注释。
在Firefox(从57.0.0版本开始)中,ES6字符串文字速度更快:
ES6 with variable 1,924,610,984 ±0.50% fastest String concatenation with variable 1,876,993,458 ±0.79% 3% slower ES6 with function 539,762 ±5.04% 100% slower String concatenation with function 546,030 ±5.88% 100% slower
在Safari(从11.0.2版开始)中,取决于:
ES6 with variable 1,382,752,744 ±0.71% fastest String concatenation with variable 1,355,512,037 ±0.70% 2% slower ES6 with function 876,516 ±1.01% 100% slower String concatenation with function 883,370 ±0.79% 100% slower
使用类型转换字符串时,ES6字符串文字速度更快。但是,从文字中调用函数时,在此示例中,字符串连接速度更快。
如果您真的想深入了解并且需要从Safari中压缩每一次性能下降,我建议您设置测试以查看是否/如何在字面效果性能内错误键入变量和多个引用。