ES6 模板文字是否比字符串连接更快? [英] Are ES6 template literals faster than string concatenation?
问题描述
在 ES6 中使用字符串连接或模板文字时，HTML 代码生成在现代浏览器中的运行速度是否明显更快?
Does HTML code generation run measurably faster in modern browsers when using string concatenation or template literals in ES6?
例如:
字符串连接
"<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
It seems for the moment string concatenation is faster: 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
我测试在 Chrome 43.0.2334.0 canary(64 位)上运行，它使用 V8 4.3.31，启用了 #enable-javascript-harmony 标志.
I tested was run on Chrome 43.0.2334.0 canary (64-bit), which is using V8 4.3.31, with the #enable-javascript-harmony flag enabled.
作为参考，Node.js 的最新版本(撰写本文时为 0.12.0)使用的是 V8 3.28.73:https://raw.githubusercontent.com/joyent/node/master/ChangeLog
For reference, the latest version on Node.js (0.12.0 at the time of writing) is using V8 3.28.73: https://raw.githubusercontent.com/joyent/node/master/ChangeLog
我确信所有可以应用的可能的性能优化还没有被应用，因此随着 ES6 越来越接近最终确定并且这些功能被迁移到稳定分支，预期性能会变得更好是合理的.
I'm sure all the possible performance optimizations that could be applied have not been applied yet, so it would be reasonable to expect performance to get better as ES6 gets closer to finalization and these features get migrated to the stable branch.
感谢@user1329482、@icl7126、Nicolai Borisik 和 FesterCluck 的评论.自从提出这个问题已经过去了大约 2 年，ES6 浏览器的支持已经大大增加，并且进行了大量的性能优化.以下是一些更新.
(2020 年 2 月)根据 @JorgeFuentesGonzález 评论和后续确认更新 Chrome 结果.
(February 2020) Updated Chrome result based on @JorgeFuentesGonzález comments and subsequent confirmation.
在 Chrome(截至 59.0.3035)中，ES6 字符串文字更快:
In Chrome (as of 59.0.3035), ES6 string literals are faster:
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)中，字符串连接速度更快...查看评论.
Update: In Chrome (as of 79.0.3945), String concatenation is faster... See comments.
在 Firefox 中(从 57.0.0 开始)，ES6 字符串文字更快:
In Firefox (as of 57.0.0), ES6 string literals are faster:
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 开始)，这取决于:
In Safari (as of 11.0.2), it depends:
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 字符串文字速度更快.但是，当从字面量调用函数时，字符串连接速度更快在本例中.
When using a typecast string, ES6 string literals are faster. However, when calling a function from the literal, string concatenation is faster in this example.
如果您真的想深入研究并且需要从 Safari 中榨取每一滴性能，我建议设置测试，看看是否/如何在字面效果性能中查看错误类型的变量和多个引用.
If you really want to go deep and need to squeeze every drop of performance out of Safari, I would suggest setting up tests that see if/how incorrectly typed variables and multiple references within a literal effect performance.
这篇关于ES6 模板文字是否比字符串连接更快?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
