程序员经验分享-hwhale

ES6 模板文字比字符串连接更快吗？

2023-11-26

在 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 接近最终确定并且这些功能迁移到稳定分支，预期性能会变得更好是合理的。

Edit: 感谢 @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 的每一点性能下降，我建议您设置测试来查看是否/如何在字面效果性能中输入错误的变量和多个引用。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

string

performance

templates

ECMAScript6

ES6 模板文字比字符串连接更快吗？ 的相关文章

随机推荐

  • 如何将资源嵌入到 .NET PE 可执行文件中？

    如何在 Visual Studio 2010 的 NET PE 可移植可执行文件 中包含资源 In the 旧时光我们将创建一个资源脚本文件 wumpa rc jqueryjs RCDATA jquery js SplashLogo PNG

  • 主脑极小极大算法

    我正在尝试在 python 中实现 Donald Knuth 的密码破解算法 只需不超过 5 步 我已经多次检查了我的代码 它似乎遵循算法 如下所示 http en wikipedia org wiki Mastermind board g

  • GroupBy pandas DataFrame 并选择最常见的值

    我有一个包含三个字符串列的数据框 我知道第三列中唯一的一个值对于前两个值的每种组合都有效 为了清理数据 我必须按前两列对数据框进行分组 并为每个组合选择第三列的最常见值 My code import pandas as pd from sc

  • 使用 MySQL 将二进制转换为十进制

    我正在尝试在 MySQL 中构建一个查询 该查询连接一堆二进制字段 然后给出 DECIMAL 形式的结果 e g SELECT CONCAT setting1 setting2 setting3 AS settings 可能给了我 101

  • 为什么 onAppear() 当放置在 swiftUI 中的 NavigationView 内的元素上时会执行两次？ (Xcode 12.0)

    FirstView Appeared被打印两次 当视图首次加载时一次 当选择 NavigationLink 时再次一次 import SwiftUI struct FirstView View var body some View Navi

  • Javascript .Replace 替代方案

    我正在为 eBay 编写一个模板 但是 eBay 不允许 replace 下面的代码用于翻转选项卡部分 当用户将鼠标悬停在选项卡 a 上时 相应的 div div a 变得可见 有没有一种解决方法可以让代码在不使用 replace 的情况下

  • 这个 O(N*k) 排序算法是什么？

    当工作 BrainF 最快的排序 我发现了这个算法 它是O N k 其中k是输入中的最大值 它需要 O N 额外的存储空间 物理上的类比是你有 N 堆令牌 栈的高度代表要排序的值 每个标记代表一个位 为另外 N 堆留出空间 您从每个有令牌的

  • 使用 R 从 XTS 对象中提取该月第一个工作日的回报

    我对 R 非常陌生 所以如果我在解释这个问题时出现任何术语错误 我深表歉意 我在 csv 文件中有一组每日退货数据 我已设法将其转换为 xts 对象 数据格式为 HighYield EUR MSCI World EUR 2002 01 31

  • 枚举的 XML 序列化

    我在序列化枚举值时遇到问题 这是代码 System Xml Serialization XmlRootAttribute Namespace IsNullable false public class REQUEST System Xml

  • 将图像存储到数据库 blob；从数据库检索到 Picturebox

    您好 我之前发布了此内容并获得了一些帮助 但仍然没有有效的解决方案 感谢上一个问答 我确定我的 保存到数据库 代码以及 检索到图片 代码有问题 即使我手动将图片保存在数据库中 它仍然无法检索 这是我根据网络上的 3 或 4 个示例拼凑而成的

  • 类型错误：需要一个浮点数

    无法发布图片 所以 a i 1 i 1 sin x ln x i 2 i 1 任务 需要找到a1 a2 an n 是自然的并且是给定的 这就是我尝试这样做的方式 import math a k 0 p 0 def factorial n f

  • 使用 JSON.net 序列化 Dictionary？

    我正在尝试使用 JSON net 序列化字典 Using JsonConvert SerializeObject theDict 这是我的结果 1 Blah1 false Blah2 false Blah3 None Blah4 false

  • Python 正确使用 __str__ 和 __repr__

    我当前的项目需要大量使用位字段 我找到了一个简单实用的位字段类的配方但它缺少一些我需要的功能 所以我决定扩展它 我刚刚要实施 str and repr 我想确保我遵守惯例 str 应该是非正式和简洁的 所以我让它返回位字段的十进制值 即st

  • 权限被拒绝：用 Java 创建文件

    使用 Mac 在 Eclipse 中编译以下代码后 import java io public class Filer public static void main String args throws IOException File

  • VB.Net - “With”和闭包不能混用

    只是想我会分享这个以防其他人遇到这个问题 我今天做了类似的事情 我花了一段时间才弄清楚为什么这会在运行时导致问题 这段代码 Public Class foo Public bar As String blah End Class Publi

  • 如何将 Spring WebClient 与 Jetty 一起使用，而不是 Netty？

    根据文档可以将 Spring Reactive WebClient 与 Netty 等不同的服务器一起使用 WebClient 通过 HTTP 客户端库提供更高级别的 API 经过 默认它使用 Reactor Netty 但可以使用不同的插

  • jQuery $.animate() 多个元素但只触发一次回调

    如果您选择一个类或元素集合来使用 jQuery 制作动画 myElems animate 然后还使用回调函数 最终会得到很多不必要的东西animate calls var i 1 myElems animate width 200px 20

  • Android NDK 平台版本相对于 API 级别的确切意义是什么？

    我有一个 Android 应用程序minSdkVersion apiLevel设置为 18targetSdkVersion apiLevel设置为23 因此我设置了NDKplatformVersion to 18 不幸的是 在添加 Open

  • 在 Lua 5.2 中重新创建 setfenv()

    我怎样才能重新创建的功能setfenv在 Lua 5 2 中 我无法准确理解您应该如何使用新功能 ENV环境变量 在 Lua 5 1 中你可以使用setfenv很容易对任何功能进行沙箱处理 Lua 5 1 print G G address

  • ES6 模板文字比字符串连接更快吗？

    在 ES6 中使用字符串连接或模板文字时 HTML 代码生成在现代浏览器中运行速度是否明显更快 例如 字符串连接

热门标签