来谈谈WebAssembly是个啥？为何说它会影响每一个Web开发者？

ゝ一世哀愁。 2022-08-10 00:48 30阅读 0赞

> *原文：[What is WebAssembly and why it affects web developers!][What is WebAssembly and why it affects web developers]*

你听说过**WebAssembly**吗？这是由**Google**, **Microsoft**, **Mozilla**，**Apple**等几家大公司合作发起的一个关于**面向Web的通用二进制和文本格式**的项目。  
现在就让我们来看看WebAssembly到底是个啥？为什么它的出现和未来的发展跟我们每个人都息息相关，即使你并不是一个程序猿/媛~

**至少在某种程度上，它将改变Web生态。**

![helloworld][]

## JavaScript–Web世界的汇编语言 ##

我们有许多面向Web应用的开发规范，这些设计优良的规范让Web开发者们的工作变得更加的简单。我们很难想象自己所创建和网站或应用没有任何规则、编程语言、框架和开发理念可以遵循。

而将所有这些事情组合到一起的Web规范有一个众所周知的名字：**JavaScript**！

JavaScript基本上已经成为了Web平台的标准开发语言。而随着越来越多的软件成为了Web应用，JavaScript更是获得了极大的发展。

但在过去几年，我们看到越来越多的项目问世，它们试图通过开发编译程序，将其他语言代码转化为 JavaScript，以此让开发者克服 JavaScript 自身存在的一些短板。其中一些项目专注于给编程语言增加新的功能，比如微软的 [TypeScript][]和Google的[Dart][TypeScript]，或是加快 JavaScript 的执行速度，例如 Mozilla 的 [asm.js][] 项目和Google的[PNaCI][]。

在默认环境下，JavaScript 文档其实就是简单的文本文件，先是从服务器下载，然后由浏览器中的 JavaScript 引擎解析并编译。用户可以通过Ajax技术在浏览网页时与服务器进行通信。

![这里写图片描述][20151108115229606]

在浏览器端目前是使用JavaScript来实现与用户进行动态交互等功能，虽然很多JavaScript框架都致力于性能优化，但是一套基于字节码的系统仍然会有更快更好的性能表现。

## 所以，WebAssembly到底是个什么鬼？ ##

**WebAssembly**是一种新的字节码格式。它的缩写是”.wasm”，`.wasm` 为文件名后缀，是一种新的底层安全的二进制语法。。它被定义为“精简、加载时间短的格式和执行模型”，并且被设计为Web 多编程语言目标文件格式。  
这意味着浏览器端的性能会得到极大提升，它也使得我们能够实现一个底层构建模块的集合，例如，强类型和块级作用域。（原文：`And it gives us access to a set of low level building blocks, such as a range of types and operations.`这句话我实在不知如何翻译。。。）  
不过别搞错了，这并不意味着WebAssmbly是为了取代 JavaScript而生哟~  
就像Bjarne Stroustup说的：“JS会活得很好，因为世界上只有两种类型的语言：一类语言被人们不断的地吐槽，而另一类语言压根儿没人用！”而[Eric Elliott][]认为：“最好不要把WebAssembly仅仅当做一门编程语言，实际上它更像是一个编译器。”

## 从asm.js到WebAssembly？ ##

> [asm.js][]是一个JavaScript的一个严格的子集，可以被用来作为一个底层的、高效的编译器目标语言。asm.js提供了一个类似于C/C++虚拟机的抽象实现，包括一个可有效负载和存储的大型二进制堆、整型和浮点运算、高阶函数定义、函数指针等。

asm.js的思想是使用它所规定的方法来编写JavaScript代码，支持asm.js的引擎会将代码转变为十分高效的机器码。如果你是将C++代码编译为asm.js，将在浏览器端获得极大的性能提升。  
![webassembly-asm-javascript][]  
webassembly相较于asm.js的优势主要是涉及到性能方面。根据[WebAssembly FAQ][]的描述：在移动设备上，对于很大的代码库，asm.js仅仅解析就需要花费20-40秒，而[实验][Link 1]显示WebAssembly的加载速度比asm.js快了20倍，这主要是因为相比解析 asm.js 代码，JavaScript 引擎破译二进制格式的速度要快得多。

## 这玩意儿到底好在哪？ ##

你很可能会问：“为啥所有人都在谈论WebAssembly？”这是因为WebAssembly对于JS来说绝对是一个巨大的改进，但我们常常会问自己：“这样，就够了吗？”当然不是，WebAssembly对于浏览器来说也有着非同一般的意义。  
支持WebAssembly的浏览器可以识别二进制格式的文本，它有能力编译比JS文本小得多的二进制包。  
这将给web应用带来类似与本地应用的性能体验！这四不四听起来很棒啊？！如果浏览器不得不解析完整的JS代码，这将会耗去好多时间（特别是在移动平台上），而浏览器对WebAssembly格式的解码速度显然要快得多得多得多：）  
下面献上JS作者BE大神的演讲视频地址（油管，需翻墙）：[Brendan Eich on JavaScript Taking Both the High and Low Roads - O’Reilly Fluent 2014][Brendan Eich on JavaScript Taking Both the High and Low Roads - O_Reilly Fluent 2014]

## 都有谁入了WebAssembly的坑？ ##

包括Google, Microsoft，Mozilla只是这一长串名单中的少数几家公司。项目带头人们发起了[WebAssembly Community Group][]这一社区，这个团队的愿景是“在一种新的，轻量的web编码格式的基础上，促进浏览器厂商们的合作.”  
不过，WebAssembly项目还只是刚刚启动，虽然它有一个美妙的开头，但在WebAssembly成为一个大众认可的web标准之前，它还有很长的路要走。

## 为啥这玩意会影响每一个web开发者 ##

因为webassembly让开发者有能力选择之前那些不能用来开发web应用的语言来进行web开发，或者他们也可以继续使用简单易用的JavaScript！  
[W3C WebAssembly Community group][WebAssembly Community Group]给出了一些WebAssembly的用例，它们展示了WebAssembly如何使得web开发者更加轻松的工作:

*  一些执行效率更高的语言可以被编译成在Web平台上执行的代码。
 *  提供了在浏览器端的开发者工具
 *  更加快捷的企业级应用客户端(例如：数据库)

WebAssembly的用途很多。举几个栗子：WebAssembly可以被嵌入到已经开发好的JavaScript/HTML代码中;或者某款应用的主要框架可以使用 WebAssembly 模块（如动画、可视化和压缩等），而用户界面仍然可以主要使用 JavaScript/HTML语言编写。

## 精简的代码，更好的性能，更少的bug？ ##

据WebAssembly的开发团队描述，使用WebAssembly意味着更少的原代码。与asm.js相比，它减少了大约25%的代码量。虽然这仅仅是一个原型。  
现在你可能很想知道如何获取关于WebAssembly的最新进展，下面这些资源将会对你很有帮助：

*  [GitHub page of WebAssembly][]
 *  [Design documentation of WebAssembly][]
 *  [W3C WebAssembly Community Group][WebAssembly Community Group]
 *  [What is WebAssembly by Eric Elliott][]（这篇文章也说得很棒，有空也可以翻译一下！）

[What is WebAssembly and why it affects web developers]: http://usersnap.com/blog/what-is-webassembly-for-web-developer/
[helloworld]: /images/20220731/843126a3d4a249728b6472d8f94f8b20.png
[TypeScript]: http://www.typescriptlang.org/
[asm.js]: http://asmjs.org/
[PNaCI]: http://johmathe.nonutc.fr/ressources/nacl_paper.pdf
[20151108115229606]: /images/20220731/244ba66e21dc42c697a8534bb6e90ce5.png
[Eric Elliott]: https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
[webassembly-asm-javascript]: /images/20220731/163998ba96914c3090def7f89d9dfc7e.png
[WebAssembly FAQ]: https://github.com/WebAssembly/design/blob/master/FAQ.md#why-create-a-new-standard-when-there-is-already-asmjs
[Link 1]: https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#why-a-binary-encoding-instead-of-a-text-only-representation
[Brendan Eich on JavaScript Taking Both the High and Low Roads - O_Reilly Fluent 2014]: https://youtu.be/aZqhRICne_M
[WebAssembly Community Group]: https://www.w3.org/community/webassembly/
[GitHub page of WebAssembly]: https://github.com/WebAssembly
[Design documentation of WebAssembly]: https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md
[What is WebAssembly by Eric Elliott]: https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6#.fjn1jxyc6