【译】使用"BinaryAST"加快JavaScript脚本的解析速度？

原文： Faster script loading with BinaryAST?

本文首发于公众号：符合预期的CoyPan

JavaScirpt的冷启动

web应用的表现，愈来愈受制于启动时间。咱们已经习惯于使用大量的JavaScript代码来开发丰富的web交互体验。从HTTPArchive上，咱们能够看到，一个移动设备平均会加载350KB的JavaSript代码，10%的页面会加载超过1MB的JavaScipt代码。复杂的交互会使得这个数字愈来愈高。

尽管有缓存的帮助，可是常见的站点都会频繁的发布新代码，致使冷启动(首次加载)时间十分的重要。随着浏览器将缓存按照域来划分以防止跨站点泄露，冷启动的重要性正在增长，即便是从CDN加载的经常使用资源来讲也是如此，由于它们再也不可以安全地共享。

一般状况下，当咱们谈论冷启动性能时，最多见的因素就是下载速度。而后，在如今的富交互页面上，另一个影响冷启动的很重要因素是：JavaScipt的解析时间。咋看起来会有点让人意外，可是是合理的：在开始执行代码前，引擎不得不先解析下载的JavaScript，确保脚本没有语法错误，而后将其编译为基本的字节码。随着网络变得愈来愈快，JavaScipt的解析和编译可能会成为影响冷启动的最主要因素。

设备能力（CPU或内存性能）是影响JavaScript解析时间和相应应用程序启动时间变化的最重要因素。在现代桌面或高端移动设备上，一个1MB的javascript文件须要100毫秒的解析时间，但在普通手机上，解析时间能够超过一秒钟。

关于在不一样设备上javascript解析、编译和执行的整体成本，这篇文章给出了详细的介绍。以news.google.com为例，在Pixel 2上，解析、编译、执行JS的总耗时为4s，而在一些低端的设备上，须要28s。

虽然引擎不断提升原始解析性能，尤为是在过去的一年里，V8引擎的性能翻了一番，而且使更多的东西脱离了主线程，但解析器仍然须要作大量可能没必要要的工做，这些工做会消耗内存、电池，并可能延迟有用资源的处理。

BinaryAST提案

"BinaryAST"应运而生。BinaryAST是Mozilla提出并积极开发的一种新的在线javascript格式，旨在加快解析速度，同时保持原始javascript的语义不变。它的实现方式是：使用有效的二进制来表示代码和数据结构，而且存储和提供额外的信息来提早指导解析器工做。

之因此使用BinaryAST这个名字，是由于这种格式以AST的方式存储JavaScript源码，而后编码到一个二进制文件中。该规范位于tc39.github.io/proposal-binary-ast，目前正由Mozilla、Facebook、Bloomberg和CloudFlare的工程师开发。

解析JavaScript

对于要在浏览器中执行的常规JavaScript代码，源代码被解析为一个称为AST的中间表示，它描述了代码的语法结构。而后，能够将此AST编译为字节代码或本机代码以供执行。

一段简单的将两个数相加的代码，用AST表示为：

解析JavaScript不是一项简单的任务；不管使用哪一种优化，它仍然须要逐字符读取整个文本文件，同时跟踪额外的上下文进行语法分析。

BinaryAST的目标是经过在解析器须要的时间和地点提供额外的信息和上下文，来下降复杂性和浏览器解析器必须完成的整体工做量。

要执行以BinaryAST方式传递的JavaScript，所须要的惟一步骤是：

BinaryAST的另外一个好处是它能够只解析启动所需的关键代码，彻底跳过未使用的位。这能够显著提升初始加载时间。

这篇文章将更加详细地描述解析JavaScipt时遇到的挑战，解释咱们是如何克服这些问题的，以及咱们是如何在Worker中运行代码解释器的。

提高

JavaScript依赖于提高全部声明——变量、函数、类。提高是语言的一个属性，它容许你在语法上使用以后，再去声明变量，函数，类等。

让咱们来看下面这个例子：

function f() {
    return g();
}

function g() {
    return 42;
}

在这里，当解析器查看F的主体时，它还不知道G指的是什么——它多是一个已经存在的全局函数或者在同一个文件中进一步声明的某个函数——因此它没法最终解析原始函数并开始实际编译。

BinaryAST经过存储全部做用域信息并使其在实际表达式以前可用来解决这个问题。

用JSON表示初始的AST和加强的AST以前的区别，以下图所示：

延迟解析

现代引擎用来改进解析时间的一种常见技术是延迟解析。它利用了这样一个事实：许多网站包含的javascript比实际须要的要多，特别是对于新的网站。

例如，从文本中解析数字、布尔值甚至字符串等低级类型须要额外的分析和计算。这是没有必要的。您能够首先将它们存储和读取为本机二进制编码值，而后直接在另外一端读取。

另外一个问题是语法自己的歧义。这在ES5世界中已是一个问题，但一般能够经过一些基于之前看到的标记的额外记录来解决。然而，在ES6+中，有些东西可能一直模糊不清，直到它们被彻底解析为止。

例如，一个标记序列以下：

(a, {b: c, d}, [e = 1])...

上述标记序列能够是一个用嵌套的对象和数组文本以及赋值来启动带括号的逗号表达式：

(a, {b: c, d}, [e = 1]); // 这是一个表达式

也能够是一个带有嵌套对象和数组模式的箭头表达式函数的参数列表和默认值：

(a, {b: c, d}, [e = 1]) => … // 这是一个参数列表

这两种表示都是彻底有效的，但语义彻底不一样，在看到最后一个标记以前，你没法知道要处理的是哪一个。

为了解决这一问题，解析器一般要么回溯，这很容易以指数级的速度变慢，要么将内容解析为可以同时保存表达式和模式的中间节点类型，并进行后续的转换。后一种方法保留了线性性能，但使实现更加复杂，须要保留更多的状态。

在BinaryAST格式下，这个问题再也不存在。由于解析器在开始解析内容前就能够看到每一个节点的类型。

展现实验数据

请记住，该提案处于很是早期的阶段，当前的基准和演示不能表明最终结果。

如前所述，BinaryAST能够标记应该提早进行惰性分析的函数。经过在编码器https://github.com/binast/binjs-ref/blob/b72aff7dac7c692a604e91f166028af957cdcda5/crates/binjs_es6/src/lazy.rs#L43中使用不一样级别的惰性化，对一些流行的javascript库运行测试时，咱们发现了如下速度的提高。

Level 0 (no functions are lazified)

在两个解析器中都禁用了惰性解析以后，原始解析速度提升了3%到10%。

Level 3 (functions up to 3 levels deep are lazified)

可是，经过设置为跳过最多嵌套3层的函数函数，咱们能够看到解析时间在90%到97%之间的显著改进。正如本文前面提到的，BinaryAST经过彻底跳过标记的函数，使延迟解析基本上是无开销的。

经过下面的包含1.2MB JavaScript的示例程序https://github.com/cloudflare...
https://serve-binjs.that-test...
咱们获得了如下的初始脚本执行数据：

如下是一段视频，它将让您了解移动FireFox用户所看到的改进（在本例中，显示整个页面启动时间）：

下一步是开始在现实网站上收集数据，同时改进底层格式。

如何在个人站点上测试BinaryAST？

咱们已经开源了Worker的源代码，以便将其安装到任何CloudFlare区域：

https://github.com/binast/bin...

目前须要注意的一件事是，即便结果存储在缓存中，初始编码仍然是一个昂贵的过程，而且可能很容易达到任何重要的javascript文件的CPU限制，并返回到未编码的变量。咱们正在努力改善这种状况，在接下来的日子里，将BinaryAST编码器做为一个单独的功能发布，并有更宽松的限制。

同时，若是你想在更大的脚本上使用BinaryAST，另外一种选择是使用https://github.com/binast/bin...，提早对javascript文件进行预编码。而后，在浏览器支持和请求时，可使用https://github.com/cloudflare...，来处理生成的BinaryAST文件。

在客户端，您当前须要下载Firefox Nightly，转到about:config并经过如下选项启用无限制的binaryast支持。

如今，当打开一个安装了Worker的网站时，Firefox会自动获得BinaryAST而不是javascript。

总结

现代应用程序中的javascript数量正在给全部消费者带来性能挑战。引擎供应商正在尝试各类不一样的方法来改善这种状况——一些侧重于原始解码性能，一些侧重于并行操做以减小整体延迟，一些致力于研究用于数据表示的新的优化格式，还有一些正在发明和改进用于网络交付的协议。

不论是哪个，咱们都有一个共同的目标，那就是让网络变得更好、更快。

---