javascript - ES6 模板文字是否比字符串连接更快?

标签 javascript string performance templates ecmascript-6

在 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

我测试的是在 Chrome 43.0.2334.0 canary(64 位)上运行,它使用 V8 4.3.31,启用了 #enable-javascript-harmony 标志。

作为引用,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 的每一滴性能,我建议设置测试,看看是否/如何在文字效果性能中输入错误的变量和多个引用。

关于javascript - ES6 模板文字是否比字符串连接更快?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29055518/

相关文章:

javascript - 使用 JavaScript 小部件时如何减少页面回流?

javascript - 归一化 Redux 状态

java - 分割字符串/标记

php - 如何有效地将一个字符串解析为两个字符串?

python - python 字符串实际上在硬件级别上是不可变的吗?

r - 快速检查 Rcpp 中的缺失值

javascript - 如何检查是否单击了同一图像或另一图像或图像以外的其他内容

mysql - 与 wp_postmeta 连接的 wp_posts 内部的 Wordpress 慢速查询

java - 使用 Hibernate 性能优化在 startIPNum 和 endIPNum 范围内查找 IP 号码

javascript - Firefox CORS 与 JSON 的问题