关于 WebAssembly 你需要了解的 7 件事

Auth0 是一家企业级网络认证服务提供商，致力于为用户提供流畅可扩展的认证解决方案。近日，该公司的工程师 Seba Peyrott 在文章中为我们介绍了关于WebAssembly 技术你需要了解的7 件事情。

WebAssembly 是一项由 Mozilla、谷歌、微软及苹果联合开发的项目，致力于为各种语言定义一种二进制形式的编译目标格式，并设计一种可与当前的 Web 平台集成并在 Web 环境中执行的方案，最终实现在各类平台上以接近原生的速度调用常见的硬件功能。如果你尚未接触过 WebAssembly，可以阅读发表于 InfoQ 的译文《 WebAssembly：面向 Web 的通用二进制和文本格式》稍作了解，也可查看 WebAssembly 团队发布于 Github 的相关设计文档进行深入探究。

Seba Peyrott 首先定义了五个与 WebAssembly 有关的词：源代码、编译器、汇编、字节码、机器码，其中字节码是一种可运行于其它应用中的低阶二进制代码表示，机器码是可直接运行于硬件之上的二进制代码表示。而 WebAssembly 所做的正是为 Web 打造一套专用的字节码，这项标准在未来应用场景可能是这样的：

1. 开发应用，但使用任何一门可被编译为 WebAssembly 的语言编写源代码。
2. 用编译器将源代码转换为 WebAssembly 字节码，也可按需转换为汇编代码。
3. 在浏览器中加载字节码并运行。

而你需要了解的这七个事实分别是：

1. WebAssembly 不会替代 JavaScript。Sebastián 认为，越来越多的语言和平台想在 Web 上大展手脚，这会迫使 JavaScript 和浏览器厂商不得不加快步伐来补充缺失的功能，其中某些功能通过复杂的 JavaScript 语义来实现并不合适，所以 WebAssembly 可以作为 JavaScript 的补集加入到 Web 阵营中来。WebAssembly 最一开始的设计初衷就是作为不依赖于 JavaScript 的编译目标而存在，进而获得了主流浏览器厂商的广泛支持。

2. WebAssembly 由参与组建 asm.js 和§NaCl 的团队共同开发。Mozilla 的asm.js项目初始目标是制定一套 JavaScript 子集作为编译目标，然而 Google 的§NaCl（(Portable) Native Client）则选择为基于 LLVM 的 Web 平台提供一套二进制格式。Web 平台不由某一厂商独立控制，理应由大家共同参与维护，所以这些团队目前正共同开发一套跨浏览器的编译目标。

3. WebAssembly 向后兼容。团队会针对老版本浏览器提供 polyfill 支持，目前已经构建出初始原型，也可以通过 demo1 和 demo2 体验最新的技术（注：高能预警，请提前保存所有重要文档，打开 demo 后会非常卡）。

4. WebAssembly 比 CPU 汇编代码更简单易懂。WebAssembly 所以描述的结构是抽象语法树（abstract syntax tree，简称 AST），它同时也提供一些高阶结构，例如：循环和分支。如果了解语法规则，你可以手写 WebAssembly 结构，将编译后的二进制文件反编译的结果也是可读的，WebAssembly 甚至支持在已编译文件中添加调试信息。下面有两段 WebAssembly 示例可以参考：

5. 类 s- 表达式AST，完整示例

     
     ;; Iterative factorial named
     (func $fac-iter (param $n i64) (result i64)
         (local $i i64)
             (local $res i64)
         (set_local $i (get_local $n))
         (set_local $res (i64.const 1))
             (label $done
             (loop
                 (if
                     (i64.eq (get_local $i) (i64.const 0))
                         (break $done)
                     (block
                         (set_local $res (i64.mul (get_local $i) (get_local $res)))
                             (set_local $i (i64.sub (get_local $i) (i64.const 1)))
                         )
                     )
                 )
             )
             (return (get_local $res))
     )

2. 另一种表示方法，完整示例

     
     export func main() i32 {
         storeI32(temp, 0);
         var i i32 = 0;
         done: while (i < 10) {
             i = i + 1;
             if (i >= 7) {
                 break done;
             }
         }
         return (i + ifelse(0, 1, 2) * 2) * loadI32(temp) + loadI32(scale);
     }

5. WebAssembly 将超出 JavaScript 所需的功能进行扩展。根据项目文档中的最小可行产品（MVP）原则，WebAssembly 初期将实现 asm.js 的所有功能，但是会将其文字表达形式转换为二进制格式，以此来进一步优化加载时间。在未来的版本中，可能有如下几方面的突破：

• 完整的线程支持
• 单指令多数据（SIMD）类型与内联函数
• 零成本异常（堆栈检查与展开）
• 协同程序
• 动态连接
• DOM 集成
• 集成垃圾回收
• 尾调用优化
• 多进程支持

6. 支持在浏览器中开启 Source-maps 功能调试编译后代码。通过添加 Source-maps 的支持，可以在调试字节码的过程中有效避免“调试地狱”，WebAssembly 也支持在二进制格式文件中直接添加调试信息，简化调试过程是其标准中定义的内容之一。
7. 即刻行动，无须等待。WebAssembly 集 asm.js 与 NaCl 二者之精华，如果你想马上体验这些新兴的技术，建议选择 asm.js 进行体验， Emscripten 可以帮助你把其它代码转换成 asm.js。由于 WebAssembly 尚处于孕育期，开发者们仍然会继续维护 asm.js，通过它在 Github 上的仓库你仍可得到相应的支持。

无论在官方文档还是在其它文章中，我们一直关注如何在 Web 平台上应用 WebAssembly 技术，往往忽略了通过这个平台同时也实现了 JavaScript 与其它语言互相调用的可能性。总而言之，WebAssembly 刚刚起步，同时它是多个主流厂商共同支持的解决方案，念念不忘，必有回响，我们继续期待着。

感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们，并与我们的编辑和其他读者朋友交流（欢迎加入 InfoQ 读者交流群）。