vlambda博客
学习文章列表

提起 WebAssembly，在很多前端人的印象中，可能都是“新技术、很抽象”又或是“不太了解、没用过”。

这并不意外，如果有人问我：“什么是 WebAssembly ？”从一个十分严谨的角度来看，我可能会回答说：“ WebAssembly 是基于栈式虚拟机的虚拟二进制指令集（V-ISA），它被设计为高级编程语言的可移植编译目标”。

这么说确实很难理解，那么换个说法。早在 2019 年 12 月，W3C 就正式宣布，WebAssembly 将成为除现有的 HTML、CSS 以及 JavaScript 之外的第四种，官方推荐在 Web 平台上使用的“语言”。

可能有人不禁会问，WebAssembly 会取代 JavaScript 吗？ 他们之间是什么关系？

其实就目前 MVP 标准所提供的特性和能力来看，WebAssembly 与 JavaScript 之间还只能够是协作与补充的关系。WebAssembly 可以在某些场景中弥补 JavaScript 性能不足的短板。而想要在 Web 浏览器中使用 WebAssembly，我们也离不开相关 JavaScript API 提供的帮助。JavaScript 作为“老大哥”，在维持“两者关系”的过程中，仍然有着举足轻重的作用。

但随着 Post-MVP 标准的发展，这种关系可能会变得愈加脆弱，尤其当 WebAssembly ES Module 与 Type Interface 等提案被标准化并由浏览器实现后，WebAssembly 便会从依存走向独立。

举个实际应用中的例子，我们选择了两款市面上最为常见的浏览器，分别测量我们构建的这个 DSP Web 应用在 JavaScript 滤镜和 WebAssembly 滤镜两个选项下的视频播放帧率。

• Chrome Version 84.0.4147.89 (Official Build) (64-bit)

• Firefox Version 79.0

实际测试结果的截图如下所示。其中左侧为 JavaScript 版本滤镜函数，右侧为对应的 WebAssembly 版本滤镜函数。

首先是 Chrome：

然后是 Firefox：

可以看到，同样实现逻辑的滤镜函数，在对应 JavaScript 版本和 WebAssembly 版本下有着极大的性能差异。WebAssembly 版本函数的帧画面实时处理速率几乎是对应 JavaScript 版本函数的一倍之多。当然，上述的性能对比结果仅供参考，应用的实际表现是一个综合性的结果，与浏览器版本、代码实现细节、编译器版本甚至操作系统版本都有着密切的关系。

这只是 WebAssembly 应用的冰山一角，实际上，Web 前端正变得越来越开放。如今，我们不仅能够直接使用 HTML、JavaScript 来编写各类跨端应用程序，WebAssembly 的出现更能够让我们直接在 Web 平台上使用那些业界已存在许久的众多优秀 C/C++ 代码库。

除此之外，WebAssembly 还能让 Web 应用具有更高的性能，甚至让 Web 应用能够与原生应用展开竞争，不仅如此，走出 Web，WASI 的出现更是为 WebAssembly 提供了更大的舞台。在未来的 3～5 年里，WebAssembly 会被逐渐广泛地应用到包括 Web 在内的各个平台和业务领域中。

那么，如何快速地了解 WebAssembly ？WebAssembly 整个知识体系的内容非常庞大，且较为碎片化，为了帮你从整体上更直观地了解整个 WebAssembly 生态的全貌，我特意做了张 「核心知识地图」，你可以通过它来了解有关 WebAssembly 的任意一个方面的内容。

其实，从我开始对 WebAssembly 产生浓烈的热爱并研究它，到 2018 年出了第一本关于 WebAssembly 的书籍，我一直希望找到一个更加活泼的、易懂的方式，去普及 WebAssembly。机缘巧合下，我与极客时间合作推出了专栏 《 WebAssembly 入门课 》，我希望能让更多的人，真正了解“WebAssembly 究竟是什么？怎么用？”，并带你从 0 到 1 实现一个 WebAssembly 多媒体应用，体验它的强大魅力。

👆点击上图，免费试读

新人首单 ￥55  ，仅限「前 50 人」

原价 ￥68，限时特惠 1 天

我是于航，PayPal 高级软件工程师，WebAssembly 技术布道者，FCC (FreeCodeCamp China) 上海技术社区负责人，QCon 和 GMTC 大会讲师、出品人。

2017 年注册成为 W3C 官方 CG 成员，为 WebAssembly 的标准化提出发展建议。2018 年，深度参与 Emscripten 编译器工具链项目的研发工作，致力于推动国内 WebAssembly 技术的发展和落地实践。同年出版国内第一本 WebAssembly 技术书籍《深入浅出 WebAssembly》。

首先，我们弄懂的并不是 WebAssembly 的虚拟机实现，又或者它的虚拟指令的语义语法等，过于细节的内容，而是要首先从整体上，真正理解这门技术，比如：WebAssembly 是什么？能做什么？别人已经做了什么？它是怎么来的？它未来会如何发展？参考下面的路径图👇

在学习之前，我希望你已经拥有了一定的 C/C++ 编码基础，以及 Web 前端（JavaScript / CSS / HTML）编码基础。整体规划上，我将内容分为 3 个模块：

夯实基础，建立整体认知

核心原理模块：我将从“ WebAssembly 是什么？” 这个问题出发，以最基本的 Stack Machine 开始介绍，到最后的 WASI ，逐渐带你从外部体系深入到 WebAssembly 的二进制世界。

从理论到案例，全面覆盖

应用模块：我将从 WebAssembly 所“支持”的编程语言讲起，分析投入到生产环境中使用的 WebAssembly 案例，以及 WebAssembly 在物联网、多媒体以及云技术等方面业界正在进行的尝试。最后，会带你浏览一些目前业界最优秀的 WebAssembly 底层基础设施。

手把手带你完成多媒体 Web 应用

实战模块：我们将会使用 WebAssembly 来优化多媒体资源的处理过程，这里我们将介绍与 WebAssembly 有关的 JavaScript API ，以及常用编译工具链的基本使用方式，带你完成线上的多媒体 Web 应用。

来看看目录，你可以找到你想要的👇

新人首单 ￥55  ，仅限「前 50 人」

原价 ￥68，限时特惠 1 天

订阅后生成海报发给好友，

每成功邀请 1 位，得 ¥16 返现。

👆点击上图，免费试读

👇点击「阅读原文」

  享受特惠，新人首单 ￥55

  仅限「前 50 人」