红宝书第二十七讲：详解WebAssembly与asm.js如何实现高效执行

---

红宝书第二十七讲：详解WebAssembly与asm.js如何实现高效执行

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、asm.js：让JS跑得更快的秘密

JavaScript的性能优化方案，通过 提前明确类型 减少引擎负担，可提升运行速度¹。

核心原理

flowchart LR
    C/C++源码 --> 编译器(Emscripten) --> asm.js代码 --> JS引擎优化执行

示例1：强制类型声明

// asm.js风格代码（用 |0 强制转换为整数）
function calc(a, b) {
    "use asm"; // 声明是asm.js代码
    a = a|0; // 转换为整数类型
    b = b|0;
    return (a + b)|0;
}

console.log(calc(2.5, 3.7)); // 输出5（自动取整）

优化点：

1. 使用|0提示JS引擎该变量为整数
2. 通过TypedArray代替普通数组提升内存效率

---

二、WebAssembly：接近原生速度的二进制

编译型低层语言（如C/C++、Rust）转成的 二进制格式（.wasm文件），速度比JS快得多²。

执行流程

flowchart LR
    C/C++源码 --> 编译器(Emscripten+LLVM) --> .wasm文件 --> 浏览器运行

示例2：在JS中调用Wasm模块

// 编译C代码: int add(int a, int b){ return a + b; }
WebAssembly.instantiateStreaming(fetch('math.wasm'))
    .then(result => {
        const add = result.instance.exports.add;
        console.log(add(2, 3)); // 输出5（快速计算）
    });

速度优势：

1. 二进制文件更小，加载/解析更快
2. 直接编译为机器码，无JS引擎解释开销²

---

三、两者对比：用对场景是关键

维度	asm.js	WebAssembly
文件类型	JS文本文件	二进制 .wasm文件
运行速度	提高JS的2~8倍	接近原生代码（更快95%以上）
兼容性	支持旧浏览器（如IE11）	需较新浏览器（Chrome/Firefox）
开发成本	需手动优化JS代码	可复用C/C++等现有代码

---

四、实际应用场景

案例1：三维游戏引擎

• WebAssembly：处理3D渲染中复杂的矩阵运算

  // C++编写的图形计算模块
  emcc physics_engine.cpp -O3 -s WASM=1 -o physics.wasm

案例2：老旧项目迁移

• asm.js：将现有C代码快速转为网页可用的库

  emcc legacy_lib.c -o legacy.js

---

五、如何使用？工具推荐

1. Emscripten编译器：将C代码转为asm.js或wasm（资料1）
2. Rust+wasm-pack：现代前端开发高效组合
3. 浏览器DevTools：Chrome的Sources面板支持调试wasm

---

目录：总目录

上篇文章：红宝书第二十六讲：详解Web Workers：专用、共享、Service Worker

脚注

---

1. 《JavaScript高级程序设计（第5版）》指出asm.js使用TypedArray提升性能 ↩
2. 《JavaScript高级程序设计（第5版）》说明WebAssembly运行在独立虚拟机 ↩