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

  • 刘振涛

2015 年 10 月 22 日

话题:JavaScript语言 & 开发架构前端

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 和 (P)NaCl 的团队共同开发。Mozilla 的asm.js项目初始目标是制定一套 JavaScript 子集作为编译目标,然而 Google 的(P)NaCl((Portable) Native Client)则选择为基于 LLVM 的 Web 平台提供一套二进制格式。Web 平台不由某一厂商独立控制,理应由大家共同参与维护,所以这些团队目前正共同开发一套跨浏览器的编译目标。
  3. WebAssembly 向后兼容。团队会针对老版本浏览器提供 polyfill 支持,目前已经构建出初始原型,也可以通过demo1和 demo2体验最新的技术(注:高能预警,请提前保存所有重要文档,打开 demo 后会非常卡)。
  4. WebAssembly 比 CPU 汇编代码更简单易懂。WebAssembly 所以描述的结构是抽象语法树(abstract syntax tree,简称 AST),它同时也提供一些高阶结构,例如:循环和分支。如果了解语法规则,你可以手写 WebAssembly 结构,将编译后的二进制文件反编译的结果也是可读的,WebAssembly 甚至支持在已编译文件中添加调试信息。下面有两段 WebAssembly 示例可以参考:

    1. 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 读者交流群)。

JavaScript语言 & 开发架构前端