带你了解 WebAssembly 的发展、应用与开发

带你了解 WebAssembly 的发展、应用与开发

一、WebAssembly 是什么？

“WebAssembly（缩写为 Wasm）是一种基于堆栈式虚拟机的二进制指令集。Wasm 被设计成为一种编程语言的可移植编译目标，并且可以通过将其部署在 Web 平台上，以便为客户端及服务端应用程序提供服务”
以上是 wasm 官网给出的一段解释。它运行在虚拟机中，执行的指令是虚拟指令，与汇编代码十分相似。
WebAssembly 的名字可能也是由此而来（汇编语言的英文：Assembly）
通俗的讲，WebAssembly 是除 JavaScript 之外另一门可以在浏览器上运行的语言，其他语言（如 C/C++/Rust）也可以被编译成 WebAssembly 在浏览器上运行。
WebAssembly 是静态类型的语言，可以以“接近原生”的速度运行代码。

• 2015 年 Mozilla 发布 WebAssembly 项目，随后 Google、Microsoft、Apple 等各大主流的浏览器厂商均大力支持；
• 2018 年 WebAssembly 第一个规范草案诞生；
• 2019 年成为 W3C 国际标准，成为与 HTML、CSS 和 JavaScript 并列的唯四前端技术；
• 2022 年 Docker 对 WebAssembly 提供支持；

二、为什么需要 WebAssembly？

WebAssembly 的出现，是为了解决 JavaScript 性能底下的问题！
随着 JavaScript 被广泛的应用，它也暴露了很多问题：

• 语法太灵活导致开发大型 Web 项目困难；
• 性能不能满足一些场景的需要；
  这两大问题成为 JavaScript 头顶上的达摩克利斯之剑，危及着 JavaScript 更广泛的应用。
  第一个问题，被微软的 TypeScript 解决了！微软利用 TypeScript 这把锋利的武器打造了 VSCode 等史诗级项目。
  第二个问题，2008 年 Google 推出 JavaScript 引擎 V8，使用 JIT 技术，使得 Web 性能得到了数十倍的增长。但 Web 性能还是被挑战！

2. 由于 DOM 渲染和 JavaScript 执行相互独立，单线程导致 DOM 渲染阻塞 JavaScript 执行；
3. 由于 JavaScript 是动态弱类型语言，而不像 C/C++ 这类静态强类型语言，JIT 优化效率有限；
   为了进一步优化 JIT 效率，浏览器鼻祖 Mozilla 推出了 asm.js，随后 Google、Microsoft、Apple 都觉得 asm.js 的思路不错，于是联合起来，一同共建 WebAssembly 生态。
   WebAssembly 最大的优点是，可以大幅度提升 Web 应用的性能，执行速度和 C/C++ 原生应用在一个数量级，据称优化后可以达到 C 语言程序 70% 的速度。
   WebAssembly 的高性能、轻量和跨平台，使得我们可以将 C/C++ 等语言运行在 Web，也可以将桌面端应用跑在 Web 容器。

三、浏览器兼容性

参见https://developer.mozilla.org/zh-CN/docs/WebAssembly#浏览器兼容性

• Firefox 52+；
• Chrome 57+；
• Edge 16+；
• Safari 11+；
• Node 8+；
  另外，微信小程序基础库版本从 2.13.0 开始，通过 WXWebAssembly 对象对集成的 wasm 包进行支持。

四、应用场景有哪些？

初期，主要用于浏览器性能敏感模块的实现，如复杂的界面渲染、游戏引擎、地图渲染，数学计算等。
过去几年发展很快，除了浏览器中可以跑，后端（Node.js）也可以跑，在终端设备、移动设备、物联网及云原生上都有广阔的应用场景。

• Figma 文件读取；
• Magnum 跨平台的 OpenGL 图形引擎；
• Google 3D 地图；
• eBay 的条形码扫描仪；
• AutoCAD 网页版；
• Photoshop 网页版；
• Web-DSP 在浏览器上运行的多媒体影音处理函数库；
• Unity 的 Web 游戏引擎；
• Egret Engine H5 游戏引擎；
• Disney+ 应用程序开发工具包；
• 微软的飞行模拟器有一个基于 WebAssembly 的插件系统；
• 网页版 Windows 2000；
• Blazor 让 .NET 代码在浏览器运行；
• Walt 用 JavaScript 语法快速开发原生应用；
• 还包括语言检测、音频混合、视频编解码、数字信号处理、医学影像、物理模拟、加解密、压缩、数学计算等领域；
  18个 WebAssembly 相关的创业公司：

五、如何使用 WebAssembly 进行开发

目前较为常见的是将 C/C++ 代码或者是 Rust 代码转为 wasm 文件，另外也支持 Go 等语言。
参见：WebAssembly 中文网
参考：

• WebAssembly 中文网
• 《8个WebAssembly 应用案例》
• 《为什么说 WASM 是 Web 的未来》
• 《WebAssembly 用在了哪里？18个激动人心的 Wasm 初创公司》
• 《恕我直言，90% 的应用场景都不需要用WebAssembly！》