Web Assembly 从零到精通 - 第一部分

什么是 Web Assembly

为什么它比 JavaScript 更快

用例

现在我们终于知道了 Wasm 是什么，为什么它很快，以及一些已经在使用它的工具🎉🎉🎉🎉🎉

最近关于 WebAssembly 的讨论很多。它如何取代 JavaScript，又如何避免取代 JavaScript，以及其他许多颇具争议的观点。
尽管 WebAssembly 已屡见不鲜，但很少有人真正了解 WebAssembly 是什么，它有哪些优势，何时应该使用它，甚至是否应该使用它。

因此，为了使这个话题不那么令人困惑，我将撰写一系列文章，涵盖从 Web Assembly 的基础知识到制作一个简单的 Web Assembly 应用程序

在第一篇文章中，我将介绍什么是 WebAssembly，为什么它比常规 JavaScript 更快（以一种非常肤浅的方式。但我会为那些想要深入了解这个问题的人提供一些链接），最后展示一些运行它的应用程序的示例。

什么是 Web Assembly

WebAssembly（简称 Wasm）是一种基于堆栈的虚拟机的二进制指令格式。Wasm 被设计为可移植的目标，用于编译 C/C++/Rust 等高级语言，从而支持客户端和服务器应用程序在 Web 上的部署。

此描述直接取自 Web Assembly 的网站主页 ( https://webassembly.org/ )

所以，通过查看这个描述，我们可以发现 WebAssembly 不是一种编程语言。但是，如果它不是一种编程语言，那它是什么呢？

WebAssembly 是编译器目标

什么是编译器目标？

为了理解编译器的目标，首先我们必须了解编译器究竟是什么。粗略地说，编译器是一个翻译器，它（通常）将我们输入的代码翻译成较低级别的代码。WebAssembly 就是这样的，它是从“高级”语言（尽管 c/c++/Rust 不像 JavaScript 或 Python 那样高级，但与机器码相比，它们仍然是高级语言）编译的结果。

那么，WebAssembly 是否会取代 JavaScript 呢？

绝对不是。这甚至不是它的本意。Wasm 的主要目标是成为 JavaScript 的盟友，处理更繁重、更复杂的计算。WebAssembly 的目标并非取代 JavaScript，其主要证据之一是它甚至无法访问 DOM API，这意味着它无法更改我们在 html 文件中看到的内容。

为什么它比 JavaScript 更快

其速度的秘密依赖于两个关键因素。

1- JavaScript 复杂性

JavaScript 是一种旨在让人类轻松理解的语言。JavaScript 是一把双刃剑，虽然它确实易于读写（或者至少比大多数语言都容易），但这种便捷是有代价的。JavaScript 如此“易于破解”，以至于它拥有多种实现同一件事的方式，即使是最简单的操作，也需要进行大量的验证。例如

您认为 javascript 必须做什么才能返回以下结果？

const add = (a,b) => {
  return a + b;
}

它应该做一些很简单的事情，对吧？错了

它必须进行一系列验证才能知道应该如何处理参数 a 和 b。

a和b是字符串吗？如果是，它会将它们连接起来

const result = add('hello ', 'my friend');

//result will be equal to 'hello my friend';

b是数字，a是字符串吗？如果是，它会将数字转换为字符串，然后将a和b连接起来

const result = add(1, ' is a nice number');

//result will be equal to '1 is a nice number';

或者，如果a和b是数字？在这种情况下，这两个数字将被相加，并返回一个数值

const result = add(1, 1);

//result will be equal to '2';

验证列表看起来类似于下面的图片，取自 Alex Danilo 在 Google I/O 17 中关于 Web Assembly 的演讲

使用 WebAssembly 进行 Web 编译（Google I/O '17）

低级语言（例如 Web Assembly 支持的语言）的情况并非如此，因为它们不进行这些验证，并且运算符往往具有一个词汇含义，而不是多个，例如在 JavaScript 中，同一个运算符/指令通常具有多个含义。

如果我们只是为了添加两个参数而经历了所有这些复杂的过程，想象一下更复杂的操作需要什么样的验证。运行这么一大堆代码会让你的应用程序变慢

2- Wasm 代码需要经过比 JavaScript 更少的步骤才能在浏览器中运行

尽管 JavaScript 是一种解释型语言，不需要编译即可运行，但现代浏览器使用 JIT（即时编译器）对其进行优化，使其性能比其他方式明显更好。

这种优化包含多个步骤，具体步骤因浏览器而异。但如果您想深入了解优化过程、其中的一些缺陷以及 WebAssembly 为何能够解决其未解决的问题，不妨看看 Lin Clark 关于此主题的精彩演讲。

Lin Clark：WebAssembly 的卡通介绍 | JSConf EU 2017

如果您不想深入了解细节，请相信我（以及下图），当我告诉您 Wasm 代码经过更少的步骤（将文件下载与执行分开），因此速度更快。

用例

01 - Wasm 中的视频编辑器演示

第一个例子只是一个演示，演示了一个在 WebAssembly 中运行的简单 Web 编辑器，它显示在同一编辑器的同一页面中，但完全使用 JavaScript 运行。页面中展示并比较了两种实现的性能。

02- Figma

Figma 是最广为人知的 WebAssembly 案例之一，因为它是最早在生产环境中使用 WebAssembly 的应用程序之一，而且很可能是最相关的应用程序之一。他们甚至还写了一篇关于 WebAssembly 使用的文章。

03 -谷歌地球

Google Earth 也使用了 Web Assembly，以便在 Web 上渲染其复杂的 3D 形状。与 Figma 类似，他们也发布了一篇博文，解释了 Web Assembly 的使用方法。

现在我们终于知道了 Wasm 是什么，为什么它很快，以及一些已经在使用它的工具🎉🎉🎉🎉🎉

这只是 WebAssembly 系列文章的第一部分。如果您喜欢，请：

• 在 Twitter 上关注我：@gabriel__eloy

• 请继续关注本系列的后续部分