这几年，总听人频频提起 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)
-
实际测试结果的截图如下所示。其中左侧为 JavaScript 版本滤镜函数，右侧为对应的 WebAssembly 版本滤镜函数。
可以看到，同样实现逻辑的滤镜函数，在对应 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 究竟是什么？怎么用？”，并带你从 0 到 1 实现一个 WebAssembly 多媒体应用
，体验它的强大魅力。
另外，为了帮你从整体上更直观地了解整个 WebAssembly 生态的全貌，专栏作者于航，还出了张
「核心知识地图」
，你可以通过它来了解有关 WebAssembly 的任意一个方面的内容。
说到于航，他是 PayPal 高级软件工程师。可以说是
WebAssembly 技术布道者
了，并且还是 FCC (FreeCodeCamp China) 上海技术社区负责人，QCon 和 GMTC 大会讲师、出品人。他是一个真正地喜欢 WebAssembly ，并且产生浓烈的热爱愿意去研究它，到 2018 年还
出版了国内第一本 WebAssembly 技术书籍《深入浅出 WebAssembly》
，权威性有保障！
对于 WebAssembly 这样的新技术，我们到底要学什么？
这种新技术，我们弄懂的并不是 WebAssembly 的虚拟机实现，又或者它的虚拟指令的语义语法等，过于细节的内容，而是要首先从整体上，真正理解这门技术，比如：WebAssembly 是什么？能做什么？别人已经做了什么？它是怎么来的？它未来会如何发展？参考下面的路径图 👇
这个课程的学习，是有基础门槛的，最好拥有了一定的 C/C++ 编码基础，以及 Web 前端（JavaScript / CSS / HTML）编码基础。整体规划上，内容分为 3 个模块：
核心原理模块：这门课将从“ WebAssembly 是什么？” 这个问题出发，以最基本的 Stack Machine 开始介绍，到最后的 WASI ，逐渐带你从外部体系深入到 WebAssembly 的二进制世界。
应用模块：将从 WebAssembly 所“支持”的编程语言讲起，分析投入到生产环境中使用的 WebAssembly 案例，以及 WebAssembly 在物联网、多媒体以及云技术等方面业界正在进行的尝试。最后，会带你浏览一些目前业界最优秀的 WebAssembly 底层基础设施。
实战模块：将会使用 WebAssembly 来优化多媒体资源的处理过程，这里我们将介绍与 WebAssembly 有关的 JavaScript API ，以及常用编译工具链的基本使用方式，带你完成线上的多媒体 Web 应用。
👇点击「阅读原文」可直接购买，2 杯咖啡钱，掌握前端升职加薪必备技能！
本文分享自微信公众号 - WebAssembly 中文社区（webassemblywasm）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
