WebAssembly 入门分享

（全文已分段、润色，保留全部代码并补中文注释）

一、开场：为什么聊 WebAssembly？

想跟大家聊聊 WebAssembly（简称 WASM）。

它已经问世好几年，却一直低调------其实是"下一代 Web 技术"的王牌。今天把课程拆成两段：

快速了解：它到底是什么？
动手实验：用一段小代码直观感受性能差距。

一节课讲不完，但能让你先"眼熟"它，日后再深入。

二、WebAssembly 是什么？

官方定义：

"一套完整的语义 + 二进制指令格式，体积小、加载快，可接近原生性能运行在现代浏览器中。"

我的大白话：

浏览器不再只能跑 JavaScript。
C / C++ / Rust / Go 等"老炮语言"借助 WASM 也能在网页里飞奔。
计算密集型场景（视频解码、游戏物理、加密算法）直接起飞。

三、浏览器的"第四语言"

HTML、CSS、JavaScript 是 Web 三剑客。

WASM 正成为第四大标配------主流浏览器均已内置支持，无需任何插件。

打开控制台敲一行：

javascript 复制代码

WebAssembly

看到原生对象即证明：你的浏览器已经就绪。

四、工作流程一张图看懂

复制代码

C/C++ / Rust / Go
       ↓ 编译器 (emcc / rustc / ...)
   *.wasm 二进制文件
       ↓ 浏览器瞬时编译
接近原生的机器码执行

与 JavaScript 并行不悖：JS 负责 UI 与胶水逻辑，WASM 负责重计算，二者还能互相调用。

五、实测：斐波那契数列性能对比

1. JavaScript 版

javascript 复制代码

const fib = (n) => {
  if (n <= 1) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
};
console.time("fib");
console.log(fib(40));      // 计算第 40 项
console.timeEnd("fib");    // ≈ 720 ms

2. C++ 版（同样算法）

cpp 复制代码

#include <ctime>
#include <iostream>
using namespace std;

int fib(int n) {
  if (n <= 1) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

int main() {
  int t1, t2;
  t1 = clock();
  cout << fib(40) << endl;
  t2 = clock();
  cout << "time: " << t2 - t1 << endl;  // ≈ 186 ms（-O4 优化后）
  return 0;
}

3. 把 C++ 编译成 WASM

仅保留计算函数，无需 main：

cpp 复制代码

int fib(int n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
}

编译命令（Emscripten 工具链已配置好）：

bash 复制代码

emcc c.cpp -o c.wasm -s STANDALONE_WASM --no-entry -O4

4. 在浏览器加载并执行

javascript 复制代码

fetch("/c.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes))
  .then((results) => {
    const { instance } = results;
    const { exports } = instance;
    console.time("fib-wasm");
    console.log(exports.fib(40));   // 计算第 40 项
    console.timeEnd("fib-wasm");    // ≈ 570 ms
  });

六、结果一览

实现版本	耗时 (ms)	备注
JavaScript	720	原生 JS，Chrome 本地测试
C++ 原生	186	-O4 优化，本地可执行文件
WASM	570	浏览器内运行，仍比 JS 快约 20%

注：数字会因机器、浏览器版本、优化等级波动，但"C++ > WASM > JS"的大趋势不变。

七、小结与展望

WebAssembly 让"老炮语言"在浏览器里跑出接近原生的速度。
文件小、解析快、沙箱安全，与 JS 共存而非替代。
今天只是"尝个鲜"：编译、加载、调用一条龙跑通。
真正落地还需关注：内存管理、工具链、调试、安全模型等------留待后续深入。

希望能让你对 WASM 有一个干净、清晰的初印象。下次见！