JavaScript 极致性能追求:TC39 二进制 AST 提案

简介: 大型 JavaScript 应用当前面临的性能瓶颈是解析抽象语法树(AST)所需的时间。 二进制 AST 旨在利用解析 WebAssembly AST 所用的一些策略来提高解析 JavaScript AST 的性能。

原文作者:Dylan Schiemann

译者:UC 国际研发 Jothy

----

WebAssembly 正越来越受欢迎,它不仅能提高应用性能,而且支持将其他语言的源代码转换为可在 Web 浏览器中运行的内容。 每次 JavaScript 受到挑战时,社区都会努力创建机制来改善它的性能瓶颈,这些年来我们从 Mozilla,Google,Apple 和 Microsoft 的努力中也可见端倪。

大型 JavaScript 应用当前面临的性能瓶颈是解析抽象语法树(AST)所需的时间。 二进制 AST 旨在利用解析 WebAssembly AST 所用的一些策略来提高解析 JavaScript AST 的性能。 该提案由 Facebook,Mozilla 和 Bloomberg 的工程师提出,他们指出:

“即使在高性能笔记本上,Chrome 从 Facebook.com 上加载 7MB 未压缩的 JavaScript,可能得花上 15% 的 CPU 时间来解析它!”

“启动(加载)时间正在成为Web 应用的性能瓶颈。 Web 现有特性(缓存方面)已支持传输更大量级的 JS 代码。缓存虽然有帮助,但这些特性的取值会定期更新,所以冷启动时间依旧非常重要。 随着 JavaScript 负载的增加,应用启动性能会下降,其中解析时间是初始加载时间的重要组成部分。 举个例子,即使在高性能笔记本上,Chrome 从 Facebook.com 上加载 7MB 未压缩的 JavaScript,可能得花上 15% 的 CPU 时间来解析它!!”

二进制 AST

二进制 AST 提议为 JavaScript 引入一种新的网络传输格式,该格式提供了抽象语法树(AST)的二进制编码,以此提高 JS 性能。 该提案的目标是提供快速解析。 作者指出,由于 Web 开发者已经习惯了像 webpack 这样的构建工具,因此可以轻松接受这种新格式。 像 TypeScript 和 Babel 这样的编译器也可以直接输出二进制 AST。

该提案开了一个好头,即提供 JavaScript 表层语法的简单替代编码,并使用尽可能小的增量来实现高性能解析。 它不会尝试任何语义级编码,例如字节码或编码变量,而会直接使用标识符。

当前解析瓶颈的可能解决方案包括:

  • 在需要的地方无法获取的信息(通常由语言功能引起,例如变量提升或内置方法)
  • JavaScript 的早期错误语义(需要对每个 JavaScript 文件进行预解析)
  • 使用字符导致的效率低下(JavaScript 语法将表达式编译为何种类型的字符级歧义)

二进制 AST 提议借鉴 WebAssembly 解析方法,二进制编码分为三层:

  • 使用基本原语对 AST 节点进行简单的二进制编码
  • 对上一层进行附加结构压缩
  • 通用压缩算法

Prototype(原型)

提议二进制 AST 的团队使用基于内部 AST 格式的语法,基于 Mozilla 的 SpiderMonkey 引擎实现了早期原型。

解析过程的改进更为显著,创建完整 AST 所需的时间减少了 70-90%。

在早期的 facebook.com 静态新闻源基准测试中,二进制 AST 表示法略小于原始 JavaScript。 解析过程的改进更为显著,创建完整 AST 所需的时间减少了 70-90%。

该提案中的 FAQ 解释了为什么它不考虑传输原生字节码,为什么 WebAssembly 不是所有 Web 问题的答案,以及其他许多问题的答案。

社区反应

我们最早了解到二进制 AST 是在今年的 TSConf 上,当 TypeScript 作者 Anders Hejlsberg 被问及 TypeScript 到 WebAssembly 的转换问题时,他表示希望改进二进制 AST。

在今年夏天的 FullStack 上,我询问了 JavaScript 作者 Brendan Eich 对二进制 AST 的看法。 他仍持怀疑态度,但也表示如果真能实现性能优势,那么未来的 JavaScript 版本会重点考虑这个提案。

结论

二进制 AST 提议是过去几年中提高 Web 性能速度的最有希望的提议。 假设这个提议进一步发展,我们希望一旦它可用就立即使用它,并且在 Dojo 中加以支持。

需要帮助吗?请联系我们!

虽然在你的应用中使用二进制 AST 仍为时尚早,但我们已与许多组织合作以改进其 Web 应用的结构和性能。 如果你需要提高应用性能的相关帮助,请联系我们进行讨论️!

英文原文:

https://www.sitepen.com/blog/2018/10/28/tc39-binary-ast-proposal

目录
相关文章
|
3月前
|
数据采集 并行计算 JavaScript
实战指南:在 Node.js 中利用多线程提升性能
在 Node.js 的世界中,多线程技术一直是一个受到广泛关注的领域。最初,Node.js 设计为单线程模式。随着技术发展,Node.js 引入了多线程支持,进而利用多核处理器的强大性能,提升了应用性能。接下来的内容将深入探讨 Node.js 如何实现多线程,以及在何种场合应该采用这种技术。
|
4月前
|
负载均衡 JavaScript 算法
Node.js 多进程的概念、原理、优势以及如何使用多进程来提高应用程序的性能和可伸缩性
Node.js 多进程的概念、原理、优势以及如何使用多进程来提高应用程序的性能和可伸缩性
41 1
|
4天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
1月前
|
存储 自然语言处理 前端开发
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
22 1
|
1月前
|
JavaScript 前端开发
在JavaScript中,如何优化原型链的性能?
在JavaScript中,如何优化原型链的性能?
14 2
|
3月前
|
缓存 JavaScript 前端开发
原生js浪费性能吗?
原生js浪费性能吗?
17 0
|
3月前
|
存储 移动开发 自然语言处理
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(下)
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(下)
|
3月前
|
XML JavaScript 前端开发
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(上)
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(上)
|
5月前
|
前端开发 JavaScript UED
JavaScript异步编程:提升性能与用户体验
JavaScript异步编程:提升性能与用户体验
39 1
|
6月前
|
JavaScript 前端开发 网络协议
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器(1)
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器(1)