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

一、WebAssembly 是什么?

“WebAssembly(缩写为 Wasm)是一种基于堆栈式虚拟机的二进制指令集。Wasm 被设计成为一种编程语言的可移植编译目标,并且可以通过将其部署在 Web 平台上,以便为客户端及服务端应用程序提供服务”

以上是 wasm 官网给出的一段解释。它运行在虚拟机中,执行的指令是虚拟指令,与汇编代码十分相似。WebAssembly 的名字可能也是由此而来(汇编语言的英文:Assembly)

image

通俗的讲,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 等史诗级项目。

image

第二个问题,2008 年 Google 推出 JavaScript 引擎 V8,使用 JIT 技术,使得 Web 性能得到了数十倍的增长。但 Web 性能还是被挑战!

  1. 由于 DOM 渲染和 JavaScript 执行相互独立,单线程导致 DOM 渲染阻塞 JavaScript 执行;
  2. 由于 JavaScript 是动态弱类型语言,而不像 C/C++ 这类静态强类型语言,JIT 优化效率有限;

为了进一步优化 JIT 效率,浏览器鼻祖 Mozilla 推出了 asm.js,随后 Google、Microsoft、Apple 都觉得 asm.js 的思路不错,于是联合起来,一同共建 WebAssembly 生态。

image

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 包进行支持。

image

四、应用场景有哪些?

初期,主要用于浏览器性能敏感模块的实现,如复杂的界面渲染、游戏引擎、地图渲染,数学计算等。

过去几年发展很快,除了浏览器中可以跑,后端(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 相关的创业公司:

image

image

五、如何使用 WebAssembly 进行开发

目前较为常见的是将 C/C++ 代码或者是 Rust 代码转为 wasm 文件,另外也支持 Go 等语言。

image

image

参见:WebAssembly 中文网

image

参考:
posted @ 2024-08-26 01:35  Atypiape2  阅读(86)  评论(0编辑  收藏  举报