WebAssembly 入门实战

SunnyFan大约 14 分钟约 4229 字

WebAssembly 入门实战

简介

WebAssembly（简称 WASM）是一种低级的二进制指令格式，可以在现代浏览器中以接近原生的速度运行。它不是用来替代 JavaScript 的，而是作为 JavaScript 的补充，让性能关键的代码（如图像处理、加密运算、游戏引擎）可以在浏览器中高效执行。WASM 支持多种源语言编译，包括 C/C++、Rust、Go 和 C#。

2025 年，WASM 生态迎来了爆发式增长：Component Model 标准化了模块间互操作，WASI（WebAssembly System Interface）让 WASM 走出了浏览器，运行在服务器端。本文将从实战角度出发，带领读者入门 WebAssembly 的核心概念、开发流程和应用场景。

特点

接近原生性能：二进制格式，经过优化编译，执行速度接近本地代码
多语言支持：C/C++、Rust、Go、C#、AssemblyScript 等均可编译为 WASM
沙箱安全：运行在内存安全的沙箱环境中，无法直接访问宿主系统
可移植性：一次编译，到处运行（浏览器、服务器、嵌入式设备）
与 JS 互操作：WASM 模块可以导入/导出函数，与 JavaScript 无缝协作

核心概念与实现

一、WASM 基础概念

源代码 (Rust/C/C#/Go)
        |
   [编译器编译]
        |
   WASM 二进制 (.wasm)
        |
   [浏览器加载/实例化]
        |
   WebAssembly 实例
        |
   JS 调用导出函数 <---> WASM 调用导入函数

WASM 模块的关键概念：

线性内存（Linear Memory）：一块连续的可增长字节数组，WASM 与 JS 共享
表（Table）：存储函数引用的可变数组，用于间接调用
导入（Imports）：WASM 从宿主环境获取的函数和内存
导出（Exports）：WASM 暴露给宿主环境的函数和内存

二、从 JavaScript 加载和运行 WASM 模块

// ============ 最基础的 WASM 加载 ============
async function loadWasmModule(wasmUrl: string): Promise<WebAssembly.Instance> {
  // 方式一：流式编译（推荐）
  const response = await fetch(wasmUrl);
  const { instance } = await WebAssembly.instantiateStreaming(response);

  console.log('WASM 导出:', Object.keys(instance.exports));
  return instance;
}

// 方式二：带导入对象的加载
async function loadWasmWithImports(wasmUrl: string): Promise<WebAssembly.Instance> {
  const response = await fetch(wasmUrl);
  const wasmBytes = await response.arrayBuffer();

  // 定义导入对象
  const importObject = {
    env: {
      // 提供给 WASM 调用的函数
      consoleLog: (ptr: number, len: number) => {
        const memory = instance.exports.memory as WebAssembly.Memory;
        const bytes = new Uint8Array(memory.buffer, ptr, len);
        const message = new TextDecoder().decode(bytes);
        console.log('[WASM]', message);
      },
      // 提供时间函数
      getTime: () => Date.now(),
    },
    // 导入共享内存
    js: {
      memory: new WebAssembly.Memory({ initial: 256, maximum: 1024 }),
    },
  };

  const { instance } = await WebAssembly.instantiate(wasmBytes, importObject);
  return instance;
}

// ============ WASM 模块管理器 ============
class WasmModuleManager {
  private modules = new Map<string, WebAssembly.Instance>();
  private memoryViews = new Map<string, DataView>();

  /**
   * 加载 WASM 模块
   */
  async load(name: string, url: string, imports?: WebAssembly.Imports): Promise<void> {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`加载 WASM 模块失败: ${url}`);
    }

    const { instance } = await WebAssembly.instantiateStreaming(response, imports);
    this.modules.set(name, instance);

    // 如果模块导出了内存，创建视图
    if (instance.exports.memory) {
      const memory = instance.exports.memory as WebAssembly.Memory;
      this.memoryViews.set(name, new DataView(memory.buffer));
    }
  }

  /**
   * 调用导出函数
   */
  call(name: string, functionName: string, ...args: number[]): number {
    const instance = this.modules.get(name);
    if (!instance) throw new Error(`模块未加载: ${name}`);

    const func = instance.exports[functionName] as CallableFunction;
    if (!func) throw new Error(`函数不存在: ${functionName}`);

    return func(...args);
  }

  /**
   * 从 WASM 内存读取字符串
   */
  readString(name: string, ptr: number, len: number): string {
    const instance = this.modules.get(name);
    if (!instance) throw new Error(`模块未加载: ${name}`);

    const memory = instance.exports.memory as WebAssembly.Memory;
    const bytes = new Uint8Array(memory.buffer, ptr, len);
    return new TextDecoder().decode(bytes);
  }

  /**
   * 向 WASM 内存写入字符串
   */
  writeString(name: string, str: string): number {
    const instance = this.modules.get(name);
    if (!instance) throw new Error(`模块未加载: ${name}`);

    const memory = instance.exports.memory as WebAssembly.Memory;
    const encoded = new TextEncoder().encode(str);

    // 调用模块导出的分配函数
    const allocate = instance.exports.allocate as CallableFunction;
    const ptr = allocate(encoded.length);

    const view = new Uint8Array(memory.buffer);
    view.set(encoded, ptr);

    return ptr;
  }
}

三、Rust 编写 WASM 模块

// ============ 使用 wasm-pack 构建 Rust WASM 项目 ============
// 安装: cargo install wasm-pack
// 创建项目: cargo new --lib my-wasm-lib
// 构建: wasm-pack build --target web

// Cargo.toml
// [package]
// name = "my-wasm-lib"
// version = "0.1.0"
// edition = "2021"
//
// [lib]
// crate-type = ["cdylib"]
//
// [dependencies]
// wasm-bindgen = "0.2"
// js-sys = "0.3"
// web-sys = { version = "0.3", features = ["Window", "Document", "Element"] }

// src/lib.rs
use wasm_bindgen::prelude::*;

// 导出函数给 JavaScript 调用
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    if n <= 1 {
        return n as u64;
    }
    let mut a = 0u64;
    let mut b = 1u64;
    for _ in 2..=n {
        let temp = a + b;
        a = b;
        b = temp;
    }
    b
}

// 导出带字符串参数的函数
#[wasm_bindgen]
pub fn reverse_string(s: &str) -> String {
    s.chars().rev().collect()
}

// 导出结构体
#[wasm_bindgen]
pub struct ImageProcessor {
    width: u32,
    height: u32,
    data: Vec<u8>,
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: u32, height: u32) -> Self {
        let size = (width * height * 4) as usize;
        ImageProcessor {
            width,
            height,
            data: vec![0u8; size],
        }
    }

    /// 灰度化处理
    pub fn grayscale(&mut self) -> *const u8 {
        for i in (0..self.data.len()).step_by(4) {
            let r = self.data[i] as f32;
            let g = self.data[i + 1] as f32;
            let b = self.data[i + 2] as f32;
            let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
            self.data[i] = gray;
            self.data[i + 1] = gray;
            self.data[i + 2] = gray;
            // alpha 保持不变
        }
        self.data.as_ptr()
    }

    /// 高斯模糊（简化版）
    pub fn blur(&mut self, radius: u32) -> *const u8 {
        let kernel_size = (2 * radius + 1) as usize;
        let sigma = radius as f32 / 3.0;
        let mut kernel = Vec::with_capacity(kernel_size * kernel_size);

        let sum: f32 = (0..kernel_size)
            .flat_map(|y| {
                (0..kernel_size).map(move |x| {
                    let dx = x as f32 - radius as f32;
                    let dy = y as f32 - radius as f32;
                    (-((dx * dx + dy * dy) / (2.0 * sigma * sigma))).exp()
                })
            })
            .sum();

        for y in 0..kernel_size {
            for x in 0..kernel_size {
                let dx = x as f32 - radius as f32;
                let dy = y as f32 - radius as f32;
                let value = (-((dx * dx + dy * dy) / (2.0 * sigma * sigma))).exp() / sum;
                kernel.push(value);
            }
        }

        // 应用卷积核（简化实现）
        let mut output = self.data.clone();
        let w = self.width as usize;

        for y in radius as usize..(self.height as usize - radius as usize) {
            for x in radius as usize..(w - radius as usize) {
                let mut r_sum = 0.0f32;
                let mut g_sum = 0.0f32;
                let mut b_sum = 0.0f32;

                for ky in 0..kernel_size {
                    for kx in 0..kernel_size {
                        let px = x + kx - radius as usize;
                        let py = y + ky - radius as usize;
                        let idx = (py * w + px) * 4;
                        let weight = kernel[ky * kernel_size + kx];
                        r_sum += self.data[idx] as f32 * weight;
                        g_sum += self.data[idx + 1] as f32 * weight;
                        b_sum += self.data[idx + 2] as f32 * weight;
                    }
                }

                let out_idx = (y * w + x) * 4;
                output[out_idx] = r_sum.min(255.0) as u8;
                output[out_idx + 1] = g_sum.min(255.0) as u8;
                output[out_idx + 2] = b_sum.min(255.0) as u8;
            }
        }

        self.data = output;
        self.data.as_ptr()
    }

    /// 设置像素数据
    pub fn set_data(&mut self, data: &[u8]) {
        self.data = data.to_vec();
    }

    /// 获取数据指针和长度
    pub fn data_ptr(&self) -> *const u8 {
        self.data.as_ptr()
    }

    pub fn data_len(&self) -> usize {
        self.data.len()
    }
}

四、JavaScript 调用 Rust WASM

<!-- ============ 前端集成 ============ -->
<!--
<script type="module">
  import init, { fibonacci, ImageProcessor, reverse_string } from './pkg/my_wasm_lib.js';

  async function main() {
    // 初始化 WASM 模块
    await init();
    console.log('WASM 模块加载完成');

    // 调用简单函数
    console.log('fibonacci(30) =', fibonacci(30));
    console.log('reverse("Hello") =', reverse_string('Hello WASM'));

    // 图像处理示例
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    const processor = new ImageProcessor(canvas.width, canvas.height);
    processor.set_data(imageData.data);

    // 灰度化
    const start = performance.now();
    processor.grayscale();
    const duration = performance.now() - start;
    console.log(`WASM 灰度化耗时: ${duration.toFixed(2)}ms`);

    // 读取处理后的数据
    const ptr = processor.data_ptr();
    const len = processor.data_len();
    const memory = new Uint8Array(wasm_memory.buffer, ptr, len);

    const newImageData = new ImageData(
      new Uint8ClampedArray(memory),
      canvas.width,
      canvas.height
    );
    ctx.putImageData(newImageData, 0, 0);
  }

  main();
</script>
-->

五、C# Blazor WebAssembly

// ============ Blazor WASM 项目结构 ============
// dotnet new blazorwasm -o MyBlazorApp

// Pages/ImageProcessing.razor
@page "/image-processing"
@inject IJSRuntime JS

<h3>图像处理 (WASM)</h3>

<div>
    <input type="file" @ref="fileInput" @onchange="OnFileSelected" accept="image/*" />
    <button @onclick="ApplyGrayscale" disabled="@isProcessing">
        @(isProcessing ? "处理中..." : "灰度化")
    </button>
    <button @onclick="ApplyBlur" disabled="@isProcessing">模糊</button>
</div>

<div style="display: flex; gap: 20px;">
    <div>
        <h4>原始图片</h4>
        <canvas @ref="originalCanvas" width="640" height="480"></canvas>
    </div>
    <div>
        <h4>处理后</h4>
        <canvas @ref="processedCanvas" width="640" height="480"></canvas>
    </div>
</div>

<p>处理耗时: @processingTime ms</p>

@code {
    private ElementReference originalCanvas;
    private ElementReference processedCanvas;
    private ElementReference fileInput;
    private bool isProcessing = false;
    private double processingTime = 0;

    private async Task OnFileSelected(ChangeEventArgs e)
    {
        // 加载图片到 Canvas
        await JS.InvokeVoidAsync(" loadImageToCanvas", fileInput, originalCanvas);
    }

    private async Task ApplyGrayscale()
    {
        isProcessing = true;
        processingTime = 0;

        try
        {
            var sw = System.Diagnostics.Stopwatch.StartNew();

            // 获取图像数据
            var imageData = await JS.InvokeAsync<byte[]>("getImageData", originalCanvas);

            // C# 端处理（在 WASM 中运行）
            var processed = GrayscaleProcess(imageData);

            // 写回 Canvas
            await JS.InvokeVoidAsync("putImageData", processedCanvas, processed,
                640, 480);

            sw.Stop();
            processingTime = sw.Elapsed.TotalMilliseconds;
        }
        finally
        {
            isProcessing = false;
        }
    }

    private byte[] GrayscaleProcess(byte[] rgbaData)
    {
        for (var i = 0; i < rgbaData.Length; i += 4)
        {
            var gray = (byte)(0.299 * rgbaData[i] +
                              0.587 * rgbaData[i + 1] +
                              0.114 * rgbaData[i + 2]);
            rgbaData[i] = gray;
            rgbaData[i + 1] = gray;
            rgbaData[i + 2] = gray;
        }
        return rgbaData;
    }

    private async Task ApplyBlur()
    {
        isProcessing = true;
        try
        {
            var sw = System.Diagnostics.Stopwatch.StartNew();

            var imageData = await JS.InvokeAsync<byte[]>("getImageData", originalCanvas);
            var processed = BoxBlurProcess(imageData, 640, 480, 5);

            await JS.InvokeVoidAsync("putImageData", processedCanvas, processed,
                640, 480);

            sw.Stop();
            processingTime = sw.Elapsed.TotalMilliseconds;
        }
        finally
        {
            isProcessing = false;
        }
    }

    private byte[] BoxBlurProcess(byte[] data, int width, int height, int radius)
    {
        var output = new byte[data.Length];
        Array.Copy(data, output, data.Length);

        for (var y = radius; y < height - radius; y++)
        {
            for (var x = radius; x < width - radius; x++)
            {
                var rSum = 0; var gSum = 0; var bSum = 0; var count = 0;

                for (var dy = -radius; dy <= radius; dy++)
                {
                    for (var dx = -radius; dx <= radius; dx++)
                    {
                        var idx = ((y + dy) * width + (x + dx)) * 4;
                        rSum += data[idx];
                        gSum += data[idx + 1];
                        bSum += data[idx + 2];
                        count++;
                    }
                }

                var outIdx = (y * width + x) * 4;
                output[outIdx] = (byte)(rSum / count);
                output[outIdx + 1] = (byte)(gSum / count);
                output[outIdx + 2] = (byte)(bSum / count);
                output[outIdx + 3] = data[outIdx + 3];
            }
        }

        return output;
    }
}

六、WASM + Web Worker

// ============ 在 Web Worker 中运行 WASM（避免阻塞主线程） ============

// worker.ts
let wasmModule: WebAssembly.Instance | null = null;

self.onmessage = async (event: MessageEvent) => {
  const { type, payload } = event.data;

  switch (type) {
    case 'init': {
      const response = await fetch(payload.wasmUrl);
      const { instance } = await WebAssembly.instantiateStreaming(response);
      wasmModule = instance;
      self.postMessage({ type: 'ready' });
      break;
    }

    case 'process_image': {
      if (!wasmModule) {
        self.postMessage({ type: 'error', error: 'WASM 模块未初始化' });
        return;
      }

      const { imageData, operation, params } = payload;
      const startTime = performance.now();

      // 将图像数据写入 WASM 内存
      const memory = wasmModule.exports.memory as WebAssembly.Memory;
      const allocate = wasmModule.exports.allocate as CallableFunction;
      const ptr = allocate(imageData.length);

      const view = new Uint8Array(memory.buffer);
      view.set(new Uint8Array(imageData), ptr);

      // 执行处理
      const processFunc = wasmModule.exports[operation] as CallableFunction;
      processFunc(ptr, params?.width ?? 0, params?.height ?? 0, ...(params?.extra ?? []));

      // 读取结果
      const result = new Uint8Array(memory.buffer, ptr, imageData.length);

      const duration = performance.now() - startTime;
      self.postMessage({
        type: 'result',
        data: result.buffer,
        duration,
      }, [result.buffer]);
      break;
    }

    case 'compute': {
      if (!wasmModule) {
        self.postMessage({ type: 'error', error: 'WASM 模块未初始化' });
        return;
      }

      const func = wasmModule.exports[payload.function] as CallableFunction;
      const result = func(...payload.args);
      self.postMessage({ type: 'result', data: result });
      break;
    }
  }
};

// ============ 主线程使用 Worker ============
class WasmWorkerPool {
  private workers: Worker[] = [];
  private taskQueue: Array<{
    task: unknown;
    resolve: (value: unknown) => void;
    reject: (reason?: unknown) => void;
  }> = [];

  constructor(private wasmUrl: string, poolSize: number = navigator.hardwareConcurrency ?? 4) {
    for (let i = 0; i < poolSize; i++) {
      const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
      worker.onmessage = this.handleMessage.bind(this);
      this.workers.push(worker);
    }
  }

  async init(): Promise<void> {
    await Promise.all(
      this.workers.map(
        (worker) =>
          new Promise<void>((resolve) => {
            const handler = (e: MessageEvent) => {
              if (e.data.type === 'ready') {
                worker.removeEventListener('message', handler);
                resolve();
              }
            };
            worker.addEventListener('message', handler);
            worker.postMessage({ type: 'init', payload: { wasmUrl: this.wasmUrl } });
          })
      )
    );
  }

  async processImage(
    imageData: ArrayBuffer,
    operation: string,
    params?: Record<string, unknown>
  ): Promise<{ data: ArrayBuffer; duration: number }> {
    return this.enqueue({ type: 'process_image', payload: { imageData, operation, params } });
  }

  private enqueue(task: unknown): Promise<any> {
    return new Promise((resolve, reject) => {
      const idleWorker = this.workers.find((w) => !(w as any)._busy);
      if (idleWorker) {
        (idleWorker as any)._busy = true;
        (idleWorker as any)._resolve = resolve;
        (idleWorker as any)._reject = reject;
        idleWorker.postMessage(task);
      } else {
        this.taskQueue.push({ task, resolve, reject });
      }
    });
  }

  private handleMessage(e: MessageEvent): void {
    const worker = e.target as Worker;
    (worker as any)._busy = false;

    if (e.data.type === 'error') {
      (worker as any)._reject?.(new Error(e.data.error));
    } else {
      (worker as any)._resolve?.(e.data);
    }

    // 处理队列中的下一个任务
    const next = this.taskQueue.shift();
    if (next) {
      (worker as any)._busy = true;
      (worker as any)._resolve = next.resolve;
      (worker as any)._reject = next.reject;
      worker.postMessage(next.task);
    }
  }
}

七、性能基准测试

// ============ WASM vs JS 性能对比 ============
class WasmBenchmark {
  /**
   * 斐波那契数列对比
   */
  static fibJS(n: number): number {
    if (n <= 1) return n;
    let a = 0, b = 1;
    for (let i = 2; i <= n; i++) {
      [a, b] = [b, a + b];
    }
    return b;
  }

  static async runBenchmark(
    wasmFib: (n: number) => number,
    iterations: number = 1000
  ): Promise<void> {
    const testCases = [30, 40, 50, 70];

    for (const n of testCases) {
      // JS 基准
      const jsStart = performance.now();
      for (let i = 0; i < iterations; i++) {
        this.fibJS(n);
      }
      const jsDuration = performance.now() - jsStart;

      // WASM 基准
      const wasmStart = performance.now();
      for (let i = 0; i < iterations; i++) {
        wasmFib(n);
      }
      const wasmDuration = performance.now() - wasmStart;

      console.log(
        `fib(${n}) x${iterations}: JS=${jsDuration.toFixed(2)}ms, ` +
        `WASM=${wasmDuration.toFixed(2)}ms, ` +
        `加速比=${(jsDuration / wasmDuration).toFixed(2)}x`
      );
    }
  }

  /**
   * 图像处理对比
   */
  static async imageProcessBenchmark(
    processJS: (data: Uint8ClampedArray) => void,
    processWASM: (data: Uint8ClampedArray) => void,
    width: number = 1920,
    height: number = 1080
  ): Promise<void> {
    const dataSize = width * height * 4;
    const dataJS = new Uint8ClampedArray(dataSize).fill(128);
    const dataWASM = new Uint8ClampedArray(dataSize).fill(128);

    // JS
    const jsStart = performance.now();
    processJS(dataJS);
    const jsDuration = performance.now() - jsStart;

    // WASM
    const wasmStart = performance.now();
    processWASM(dataWASM);
    const wasmDuration = performance.now() - wasmStart;

    console.log(
      `图像灰度化 (${width}x${height}): JS=${jsDuration.toFixed(2)}ms, ` +
      `WASM=${wasmDuration.toFixed(2)}ms, ` +
      `加速比=${(jsDuration / wasmDuration).toFixed(2)}x`
    );
  }
}

八、调试 WASM

// ============ WASM 调试技巧 ============

// 1. 开启 Chrome 的 WASM 调试支持
// Chrome DevTools -> Settings -> Experiments -> WebAssembly Debugging

// 2. 查看 WASM 模块信息
async function inspectWasmModule(wasmUrl: string): Promise<void> {
  const response = await fetch(wasmUrl);
  const buffer = await response.arrayBuffer();

  // 验证模块
  const validated = await WebAssembly.validate(buffer);
  console.log('WASM 模块有效:', validated);

  // 编译并查看详细信息
  const module = await WebAssembly.compile(buffer);
  const sections = WebAssembly.Module.customSections(module, 'name');
  console.log('自定义段:', sections);

  // 查看导出
  const exports = WebAssembly.Module.exports(module);
  console.log('导出:', exports);

  // 查看导入
  const imports = WebAssembly.Module.imports(module);
  console.log('导入:', imports);
}

// 3. Rust WASM 调试日志
// 在 Rust 代码中使用 console_log 宏
/*
use web_sys::console;

macro_rules! console_log {
    ($($t:tt)*) => {
        console::log_1(&format!($($t)*).into())
    }
}
*/

// 4. 性能分析
async function profileWasm(
  name: string,
  fn: () => void,
  iterations: number = 100
): Promise<void> {
  // 使用 User Timing API
  performance.mark(`${name}-start`);

  for (let i = 0; i < iterations; i++) {
    fn();
  }

  performance.mark(`${name}-end`);
  performance.measure(name, `${name}-start`, `${name}-end`);

  const measure = performance.getEntriesByName(name)[0];
  console.log(
    `${name}: 总计 ${measure.duration.toFixed(2)}ms, ` +
    `平均 ${(measure.duration / iterations).toFixed(4)}ms/次`
  );
}

九、WASI 概述

WASI (WebAssembly System Interface)
         |
    [标准化系统接口]
         |
   +-----+------+
   |             |
 浏览器端      服务器端
   |             |
 WASI Preview  Wasmtime
   |             |
 标准化 API    Wasmer
   |             |
 文件系统      WasmEdge
 网络
 环境变量

// WASI 在 Node.js 中的使用示例
// npm install @bytecodealliance/wizer 或 wasmtime

/*
import { Wasmtime } from 'wasmtime';

const engine = new Wasmtime();
const module = await engine.Module.fromFile('./server_wasm.wasm');
const instance = await engine.instantiate(module);

// 调用 WASI 模块中的函数
const result = instance.exports.process_request('{"method":"GET","path":"/api"}');
console.log(result);
*/

优点

性能优异：计算密集型任务比 JavaScript 快 2-10 倍
多语言复用：可以将现有的 C/C++/Rust 库编译到浏览器中运行
安全沙箱：WASM 代码无法直接访问 DOM 或系统资源
体积小：二进制格式比 JavaScript 源码更紧凑，加载更快

缺点

无法直接操作 DOM：必须通过 JavaScript 桥接
调试体验差：虽然 Chrome 支持源码映射，但调试体验不如原生 JS
二进制不可读：出了问题需要回到源语言排查
GC 集成尚未成熟：带垃圾回收的语言（如 C#）生成的 WASM 体积较大
线程支持有限：SharedArrayBuffer 需要特定的安全头

性能注意事项

首次加载开销：WASM 需要下载、编译、实例化，首次调用有延迟
内存拷贝：JS 与 WASM 之间传递大量数据时，内存拷贝是性能瓶颈
函数调用开销：JS 调用 WASM 函数有固定开销（约 100ns），避免高频细粒度调用
SharedArrayBuffer：使用共享内存避免数据拷贝，但需要配置 COOP/COEP 头
Streaming 编译：始终使用 instantiateStreaming 流式编译

# Nginx 配置 WASM MIME 类型和安全头
types {
    application/wasm wasm;
}

# 启用 SharedArrayBuffer 所需的安全头
add_header Cross-Origin-Opener-Policy "same-origin";
add_header Cross-Origin-Embedder-Policy "require-corp";

总结

WebAssembly 为浏览器带来了接近原生的计算能力，是 JavaScript 生态的重要补充。对于计算密集型场景（图像处理、加密、音视频编解码），WASM 的性能优势明显；对于常规 UI 交互，JavaScript 仍然是更好的选择。WASI 的出现让 WASM 走出了浏览器，成为跨平台运行时的新选择。

关键知识点

知识点	要点
线性内存	WASM 与 JS 共享的连续字节数组
导入/导出	WASM 与宿主环境的函数交互机制
wasm-bindgen	Rust 与 JS 的互操作工具链
Blazor WASM	C# 编写的 WASM 前端框架
Web Worker	在后台线程运行 WASM，避免阻塞 UI
WASI	WASM 的系统接口标准
instantiateStreaming	流式编译，减少加载延迟
Component Model	WASM 模块间的标准化互操作

常见误区

误区：WASM 将取代 JavaScript
- 事实：WASM 是 JS 的补充，不是替代，UI 操作仍需要 JS
误区：WASM 总是比 JS 快
- 事实：对于简单的 DOM 操作，JS 反而更快；WASM 在计算密集型场景才有优势
误区：WASM 模块可以访问系统资源
- 事实：WASM 运行在沙箱中，不能直接访问文件系统或网络
误区：所有语言编译为 WASM 效果相同
- 事实：带 GC 的语言（C#/Java）生成的 WASM 更大，Rust/C++ 更精简
误区：WASM 文件不需要优化
- 事实：应使用 wasm-opt、wasm-snip 等工具优化二进制体积

进阶路线

WASM Component Model：标准化的模块组合和互操作
WASI Preview 2：基于 Component Model 的新版系统接口
Emscripten：将 C/C++ 项目编译为 WASM 的完整工具链
AssemblyScript：TypeScript 语法的 WASM 开发语言
Extism：用 WASM 插件扩展任何应用的框架
Spin：基于 WASM 的 serverless 应用框架

适用场景

场景	推荐语言	原因
图像/视频处理	Rust/C++	计算密集，需要 SIMD
加密/哈希	Rust	安全敏感，需要高性能
游戏引擎	C++/Rust	实时渲染，物理计算
数据可视化	Rust/C++	大数据集的实时计算
PDF/文档处理	C++	复用现有 C++ 库
全栈 Web	C# Blazor	C# 开发者的前端方案

落地建议

第一步：识别场景。找出应用中的计算瓶颈，评估是否适合用 WASM 优化
第二步：选择语言。新项目推荐 Rust（体积小、性能好），复用现有库选 C++
第三步：构建工具链。配置 wasm-pack / Emscripten 构建流程
第四步：集成前端。实现 WASM 模块的加载、初始化和调用
第五步：性能对比。使用基准测试验证 WASM 的实际加速效果
第六步：Worker 化。将 WASM 计算移到 Web Worker，避免阻塞 UI
第七步：优化体积。使用 wasm-opt 和 Tree Shaking 减小 WASM 文件大小

排错清单

WASM 加载失败：检查 MIME 类型是否为 application/wasm
编译错误：检查浏览器是否支持所需 WASM 特性
内存增长失败：检查 Memory 的 maximum 设置
函数调用崩溃：检查参数类型是否匹配
SharedArrayBuffer 不可用：检查 COOP/COEP 安全头
调试看不到源码：检查是否生成了 DWARF 调试信息

复盘问题

我们的应用中有哪些计算密集型操作适合用 WASM 优化？
WASM 模块的加载时间是多少？是否影响了首屏性能？
WASM 与 JS 之间的数据传输是否成为瓶颈？
我们是否需要在 Worker 中运行 WASM？
WASM 模块的更新策略是什么？如何处理版本兼容？