Webassembly简介

概述

Webassembly是什么

WebAssembly(简称Wasm)是一种用于在Web浏览器中执行高性能的二进制代码的开放标准。它是一种可移植、高效的格式,可以在多种环境中运行,不仅限于Web浏览器。Wasm的设计旨在通过提供一个高性能、可移植的编译目标,使开发者能够在Web平台上运行性能更高的应用程序。它与JavaScript一起使用,可以在现代Web浏览器中运行,并与其他语言(如C、C++、Rust等)进行交互。

webassembly

发展历史

WebAssembly的名称是为了唤起汇编语言的概念,这个术语可以追溯到上世纪50年代。这个名称暗示着将类似汇编的编程引入到Web中,在那里它将在客户端执行——通过网站用户的计算机,通过用户的网络浏览器执行。为了实现这一点,WebAssembly必须比真正的汇编语言更加独立于硬件。

WebAssembly首次宣布于2015年,第一个演示是在Firefox、Google Chrome和Microsoft Edge中执行Unity的《Angry Bots》。前身技术包括Mozilla的asm.js和Google的原生客户端,最初的实现是基于asm.js的功能集。asm.js技术已经提供了接近本机代码执行速度,并且可以被认为是对不支持WebAssembly或出于安全原因禁用了它的浏览器的可行替代方案。

在2017年3月,最小可行产品(MVP)的设计被宣布完成,并且预览阶段结束。2017年9月底,带有支持的Safari 11发布。2018年2月,WebAssembly工作组发布了三份核心规范、JavaScript接口和Web API的公开工作草案。

2019年6月,Chrome 75发布,默认启用了WebAssembly线程。

自2022年4月以来,WebAssembly 2.0处于草案状态,其中增加了许多与SIMD相关的指令和新的v128数据类型,函数能够返回多个值,以及大规模内存初始化/复制的能力。

核心特性

wasm主要有高性能、安全、开放和跨平台这几个核心的特性,这也是wasm设计之初的目标。

高性能

设计之初就充分考虑了性能的需求,其在性能方面的表现也非常出色

  • 接近机器语言
  • 运行产物是二进制文件,相比文本形式的js代码体积更小
  • 解析wasm代码速度比js速度也更快
  • 属于静态类型语言,无需运行时进行推导

以上特点都决定了wasm的性能表现相比js提升很多,这使得很多耗时类型任务放到浏览器上运行成为可能。

安全

安全也是wasm的一个特点,虽然因为浏览器权限和文件系统等问题对于开发者来说会收到一些约束,但对用户来说安全的应用是利好。WebAssembly 运行在一个沙箱化的执行环境中,甚至可以在现有的 JavaScript 虚拟机中实现。在web环境中,WebAssembly将会严格遵守同源策略以及浏览器安全策略。

开放可调试

WebAssembly 是一门低阶语言,但是它有确实有一种人类可读的文本格式(其标准即将得到最终版本),这允许通过手工来写代码,看代码以及调试代码。webassembly支持多种语言编译成wasm使用,包括主流的c++、 rust和 go等等。

跨平台

基于浏览器的特性,wasm的程序是完全跨平台的,这个跨平台借助浏览器可以实现跨操作系统平台、跨硬件平台。比一般的编程语言跨平台更彻底。可以说只要有支持主流浏览器的设备上都可以运行wasm程序。

应用场景

借助wasm优秀的设计特性,wasm在很多领域的web端都有所应用。目前行业上很多web端程序已经开始逐步使用wasm开发程序了,很多典型的就是把以前只能在桌面系统层级的比较耗时、复杂又专业的软件给搬到web端。

音视频

  • photoshop网页版
  • 剪映网页版

ps和剪映这种修图、视频剪辑工具是典型的高耗时处理任务,图片和视频都是需要非常大的计算量。从js切换到wasm实现也是极大提升工具的处理速度,使用体验。基于wasm开发,还使得有很多以前js很难放到web端实现的功能也有了可能,比如说人脸关键点检测、人像分割等。

游戏

  • wasmboy

https://wasmboy.app/

设计

  • figma

figma网页工具从js切换到wasm,网页的加载速度提升了3倍。

其他

  • 谷歌地球。

如何看待wasm

wasm虽然在很多方面相比js有突出的优点,但wasm对js不是替代的关系,而是一个互补。是对js原来不擅长的高耗时、密集计算行等任务场景的一个补充,也是更好地将c、c++和rust等其他语言的生态积累迁移到web端。在利用好wasm的优势下,对未来web生态将是一个非常大的补充和提升。

参考

1-webassembly 2-webassembly-wikipedia


微信公众号