⚙️ WebAssembly(WASM)

一句话定性

WebAssembly 是 Web 平台史上少有的一次**“平台补上了框架根本给不了的东西”——它打破了 JavaScript 把守了二十年的天花板:“浏览器里只能跑 JS”**。它让 C/C++/Rust 编译成接近原生速度的字节码在浏览器运行,从此 Figma、Photoshop Web、浏览器端 AI 推理这类”重应用”才成为可能。它不是来取代 JS 的,而是来做 JS 做不好的那部分——CPU 密集的重计算。

一、它是什么 & 出现的时代

WebAssembly(WASM)是一种为 Web 设计的、紧凑的二进制指令格式,作为编译目标:你用 C/C++/Rust/Go 等写代码,编译成 .wasm,浏览器以接近原生的速度执行它。

它不是一门语言,而是一个编译目标 / 虚拟指令集(类似 JVM 字节码,但为 Web 沙箱设计)。
2017 年,四大浏览器(Chrome/Firefox/Safari/Edge)同时支持 WASM 1.0(MVP)——这是罕见的”一步到位的多厂商共识”,因为它由各厂商联合设计(WASM 是 asm.js 的继任者,asm.js 是 Mozilla 用 JS 子集逼近原生性能的前身实验)。

时代背景:2013-2018 SPA时代末期,Web 应用越来越重,JS 的性能天花板在游戏、音视频处理、3D/CAD、科学计算等场景下成了硬约束。

二、为什么会出现(解决上一代什么痛点)

痛点:JavaScript 触到了它的性能天花板

JS 是动态类型、即时编译(JIT)的语言。V8 已经把它优化到了极致(详见 Chrome),但动态语言有无法绕过的开销:类型推断、垃圾回收停顿、JIT 预热、去优化(deopt)抖动。对于以下场景,这些开销是致命的:

场景为什么 JS 扛不住
游戏引擎 / 3D 每帧数百万次浮点运算,GC 停顿会丢帧
音视频编解码 重 CPU 计算,需要确定性高性能
图形/CAD/设计工具 海量几何运算、自定义渲染管线(Figma)
科学计算 / 加密 紧密数值循环,JS 的装箱开销难以接受
AI 推理 矩阵运算密集,需要接近原生的吞吐

场景	为什么 JS 扛不住
游戏引擎 / 3D	每帧数百万次浮点运算,GC 停顿会丢帧
音视频编解码	重 CPU 计算,需要确定性高性能
图形/CAD/设计工具	海量几何运算、自定义渲染管线(Figma)
科学计算 / 加密	紧密数值循环,JS 的装箱开销难以接受
AI 推理	矩阵运算密集,需要接近原生的吞吐

母题视角:这一次,平台没在"追认框架",而在"突破语言"

Web平台能力演进史的常见剧本是”平台收编框架功能”。WASM 是个变体:它要追认的不是某个 JS 库,而是整个”原生编译型语言”的能力——把 C/C++/Rust 的性能引进浏览器。所以它的意义比 Web Components/PWA 更”硬”:它给了前端一个 JS 永远给不了的东西,而不是把 JS 已经能做的事换种方式做。

三、核心机制 & 为什么重要

   C / C++ / Rust / Go 源码
            │  编译(LLVM / Emscripten / wasm-pack)
            ↓
        .wasm 二进制(紧凑、可流式编译)
            │  浏览器加载,在与 JS 共享的沙箱里运行
            ↓
   接近原生速度执行(无 JIT 预热抖动、可预测性能)
            │
            └──► 通过 JS "胶水"与页面交互(见下方局限)

为什么重要:它重新定义了"前端能做什么"

性能可预测:WASM 是静态类型、提前编译(AOT 思路),没有 JS 那种”预热-去优化”的抖动,适合对性能有硬要求的重计算。

语言自由:前端第一次不再被锁死在 JS。Rust 写的图像处理库、C++ 写的几十年成熟代码库,都能搬进浏览器。

可移植安全沙箱:WASM 的沙箱模型让”把原生代码放进浏览器跑”在安全上可控——这也让它后来溢出到了浏览器之外(边缘计算、插件系统、WASI)。

四、带来的新问题 / 局限

它不是银弹,且有一道结构性的"墙"

局限说明
不能直接碰 DOM WASM 没有直接操作 DOM 的能力,所有 UI 交互都要经过 JS 胶水层来回调用。频繁的 JS↔WASM 边界调用本身有开销,抵消部分性能收益
不适合”轻”任务 对普通 UI 逻辑,WASM 的加载+胶水开销往往比直接写 JS 更慢更重。它只在重计算时才划算
生态早期、工具链重 调试、source map、包体积、与 npm 生态的整合都不如 JS 成熟;Emscripten 等工具链有学习曲线
包体积 .wasm + 运行时(尤其带 GC 语言)可能很大,影响首屏

局限	说明
不能直接碰 DOM	WASM 没有直接操作 DOM 的能力,所有 UI 交互都要经过 JS 胶水层来回调用。频繁的 JS↔WASM 边界调用本身有开销,抵消部分性能收益
不适合”轻”任务	对普通 UI 逻辑,WASM 的加载+胶水开销往往比直接写 JS 更慢更重。它只在重计算时才划算
生态早期、工具链重	调试、source map、包体积、与 npm 生态的整合都不如 JS 成熟;Emscripten 等工具链有学习曲线
包体积	`.wasm` + 运行时(尤其带 GC 语言)可能很大,影响首屏

二阶效应:WASM 越强,DOM 边界越成为瓶颈

正因为 WASM 算得快但碰不到 DOM,催生了一个新方向:让 WASM 拥有更直接的宿主能力(WASM GC 提案、Component Model、未来可能的直接 DOM 访问)。这反过来又推动平台继续演进——能力补齐永远会暴露下一个瓶颈,这正是 Web 平台螺旋上升的常态。

五、为什么没有彻底成功 / 现状(客观)

WASM 的”没有彻底成功”,和 Web Components/PWA 不同——它从一开始就没打算取代 JS,所以用”成败”框它是个误解。客观地说:

它赢在该赢的地方,没去抢不该抢的地方

它没有取代 JS 写业务逻辑——这本就不是它的目标。普通前端开发依然 100% 是 JS/TS 的天下。

它在”重计算”这个利基里几乎不可替代——这是它的真正主场,而它赢得很彻底。

现状:重应用的隐形基石

WASM 安静地成了一整类”以前 Web 做不了”的应用的底座:

Figma:用 C++ 写渲染引擎,编译成 WASM 在浏览器跑——这是 WASM 最著名的代言,证明了浏览器能承载专业级设计工具。

Photoshop Web、AutoCAD Web、Google Earth:把数十年的 C++ 代码库搬上 Web。

音视频:ffmpeg.wasm 让浏览器端做转码/剪辑成为可能。

浏览器端 AI 推理(最新、最重要的增量):ONNX Runtime Web、TensorFlow.js 的 WASM 后端、以及 LLM 在浏览器本地运行——WASM(配合 WebGPU)是模型在端侧推理的关键执行层。这把它直接接入了 2023-未来 AI时代。

Web 之外的溢出:WASM + WASI 已经长成边缘计算、插件沙箱、Serverless 的通用运行时——它早已”逃出浏览器”。

对前端的真正意义

WASM 给前端的最大礼物,不是性能数字,而是心智的解放:“前端 = 只能用 JS” 这个二十年的铁律,被打破了。 它让前端的能力边界从”网页交互”扩张到”任何能编译成 WASM 的东西”——重应用、专业工具、端侧 AI。这是 Web平台能力演进史里**平台真正”做加法”而非”换写法”**的少数案例。

六、对后续技术的影响(因果链)

JS 性能天花板(动态类型 + GC + JIT 抖动)
        │  游戏/音视频/CAD/科学计算/AI 扛不住
        ↓
Mozilla asm.js 实验(用 JS 子集逼近原生)
        │
        ↓
四大浏览器联合设计 ──► WebAssembly 1.0(2017,罕见的一步到位共识)
        │
        ├──► 语言自由:前端不再只能用 JS(C/C++/Rust 进浏览器)
        │
        ├──► 重应用基石:Figma / Photoshop Web / AutoCAD Web / ffmpeg.wasm
        │
        ├──► 局限暴露:不能直碰 DOM → 推动 WASM GC / Component Model / 直接 DOM 访问提案
        │
        ├──► 浏览器端 AI 推理:ONNX Runtime Web / TF.js WASM 后端 / 端侧 LLM
        │            │  (配合 WebGPU)
        │            └──► 接入 [[2023-未来 AI时代]]:模型在端侧跑
        │
        └──► 溢出浏览器:WASI / 边缘计算 / 插件沙箱 / Serverless 通用运行时
                  │
                  ↓
        指向 [[未来5到10年前端发展方向]]:Web 平台能力的硬边界被持续推开

历史地位:平台少有的"真加法"

在 Web平台能力演进史一连串”理念先进却赢不了生态”的故事里,WebAssembly 是个异类的成功——因为它没去和框架抢”组件/路由/状态”这些 JS 已经做得很好的地盘,而是补上了 JS 结构性做不到的那块(原生级重计算)。它证明了一个朴素道理:平台能力要赢,最好的方式不是把别人做过的事再做一遍(那要拼生态),而是去做别人根本做不了的事。 而它最深远的影响,可能还在前方——当 AI 模型越来越多地要在端侧、离线、隐私优先地运行时,WASM 是那个把模型”装进浏览器”的执行底座。

前端技术演化史

探索

WebAssembly

⚙️ WebAssembly(WASM)

一、它是什么 & 出现的时代

二、为什么会出现(解决上一代什么痛点)

三、核心机制 & 为什么重要

四、带来的新问题 / 局限

五、为什么没有彻底成功 / 现状(客观)

六、对后续技术的影响(因果链)

关系图谱

目录

反向链接