WebAssembly 深入教程

欢迎来到 WebAssembly 的世界！这是一份由浅入深的 WebAssembly 完整教程，专为想要掌握这项革命性技术的开发者而设计。

⚠️ 重要提醒
本教程由 AI 生成，内容尚未经过专业评审和充分测试。在学习过程中，建议：

• 对照官方文档验证重要概念
• 在实际项目中谨慎应用所学内容
• 发现错误或疑问时，欢迎通过 GitHub Issues 反馈
• 持续关注教程更新，我们会不断改进内容质量

关于本教程

WebAssembly (WASM) 作为一种新的网页技术标准，正在改变我们构建 Web 应用的方式。它不仅为高性能计算带来了可能，也为传统桌面应用向 Web 平台迁移提供了桥梁。

教程特色

• 由浅入深：从基础概念开始，逐步深入到实践应用
• 大量练习：每章都配有丰富的练习题和详细解答
• 实战导向：注重实际应用，包含完整的项目案例
• 工具齐全：涵盖完整的开发工具链和调试技巧

学习路径

本教程分为三个主要部分：

1. 基础篇：WebAssembly 概念、环境搭建、第一个程序
2. 核心篇：WAT 语法、内存管理、JavaScript 交互
3. 实践篇：从高级语言编译、性能优化、调试与实战项目

适用对象

• 有一定编程基础的开发者
• 希望提升 Web 应用性能的前端工程师
• 对系统编程感兴趣的学习者
• 需要将现有 C/C++/Rust 代码移植到 Web 的开发者

如何使用本教程

1. 按顺序学习：建议按章节顺序学习，每章的知识都建立在前面的基础上
2. 动手实践：务必完成每章的练习题，实践是最好的学习方式
3. 参考答案：练习题的参考答案默认折叠，请先尝试独立完成
4. 深入思考：遇到问题时，可以参考教程中的深入解析部分

让我们开始这段 WebAssembly 的学习之旅吧！

第1章 WebAssembly 简介

什么是 WebAssembly

WebAssembly（缩写为 WASM）是一种低级的类汇编语言，具有紧凑的二进制格式，可以以接近原生的性能在现代网络浏览器中运行。它为 C、C++、Rust 等语言提供了一个编译目标，使这些语言编写的程序能够在 Web 上运行。

核心特性

WebAssembly 具有以下四个核心设计目标：

1. 快速：以接近原生代码的速度执行
2. 安全：在安全的沙箱环境中运行
3. 开放：作为开放的 Web 标准设计和实现
4. 可调试：支持人类可读的文本格式

技术架构

WebAssembly 采用栈式虚拟机架构，主要组件包括：

• 模块（Module）：WASM 的基本部署单元
• 实例（Instance）：模块的运行时表示
• 内存（Memory）：线性内存数组
• 表（Table）：引用类型的数组
• 函数（Functions）：可调用的代码单元

;; 一个简单的 WASM 模块示例
(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  (export "add" (func $add)))

WASM 的历史与发展

发展历程

• 2015年：Mozilla、Google、Microsoft、Apple 联合宣布 WebAssembly 项目
• 2017年：WebAssembly MVP (Minimum Viable Product) 发布
• 2018年：W3C WebAssembly Working Group 成立
• 2019年：WebAssembly 1.0 成为 W3C 推荐标准
• 2020年：WASI (WebAssembly System Interface) 规范发布
• 2021年：WebAssembly 2.0 规范开始制定

推动因素

WebAssembly 的诞生解决了以下 Web 开发痛点：

1. 性能瓶颈：JavaScript 在计算密集型任务上的性能限制
2. 语言多样性：让更多编程语言能够在 Web 上运行
3. 代码复用：现有桌面应用代码能够移植到 Web 平台
4. 安全隔离：提供比 JavaScript 更强的安全保障

生态发展

目前 WebAssembly 生态系统包括：

• 编译器工具链：Emscripten、wasm-pack、TinyGo 等
• 运行时环境：浏览器、Node.js、Wasmtime、Wasmer 等
• 开发工具：调试器、性能分析器、包管理器
• 框架和库：游戏引擎、科学计算库、图像处理库

WASM vs JavaScript 性能对比

性能优势

WebAssembly 在以下场景中表现出显著的性能优势：

1. 数值计算：数学运算、科学计算
2. 图像/视频处理：滤镜、编解码、图形渲染
3. 游戏引擎：物理模拟、碰撞检测
4. 加密算法：哈希、加密、数字签名
5. 数据压缩：压缩/解压缩算法

性能对比测试

以下是一个计算斐波那契数列的性能对比：

JavaScript 版本：

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.time('JavaScript');
console.log(fibonacci(40));
console.timeEnd('JavaScript');

WebAssembly 版本：

(module
  (func $fibonacci (param $n i32) (result i32)
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (local.get $n))
      (else
        (i32.add
          (call $fibonacci
            (i32.sub (local.get $n) (i32.const 1)))
          (call $fibonacci
            (i32.sub (local.get $n) (i32.const 2)))))))
  (export "fibonacci" (func $fibonacci)))

性能结果对比：

适用场景分析

选择 WebAssembly 的场景：

• CPU 密集型计算
• 需要接近原生性能
• 现有 C/C++/Rust 代码库
• 对启动时间不敏感

选择 JavaScript 的场景：

• DOM 操作频繁
• 快速原型开发
• 代码体积敏感
• 需要动态特性

互补关系

WebAssembly 并不是要取代 JavaScript，而是与之互补：

// JavaScript 负责 UI 交互和 DOM 操作
class ImageProcessor {
    constructor() {
        this.wasmModule = null;
    }
    
    async init() {
        // 加载 WebAssembly 模块
        const wasmCode = await fetch('image-processor.wasm');
        this.wasmModule = await WebAssembly.instantiate(wasmCode);
    }
    
    processImage(imageData) {
        // WebAssembly 负责计算密集型处理
        return this.wasmModule.instance.exports.applyFilter(imageData);
    }
    
    updateUI(processedData) {
        // JavaScript 负责更新用户界面
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.putImageData(processedData, 0, 0);
    }
}

本章小结

WebAssembly 是一项革命性的 Web 技术，它：

1. 填补了性能空白：为 Web 平台带来了接近原生的执行性能
2. 扩展了语言生态：让更多编程语言能够在 Web 上发挥作用
3. 保持了 Web 特性：安全、开放、跨平台的优势得以保留
4. 促进了创新：为复杂应用的 Web 化提供了可能

在下一章中，我们将学习如何搭建 WebAssembly 开发环境，为实际编程做好准备。

📝 进入下一步：第2章 开发环境搭建

🔗 相关资源：

• WebAssembly 官方网站
• MDN WebAssembly 文档
• W3C WebAssembly 规范

第1章 练习题

理论题

1. 基础概念 (10分)

题目：请简述 WebAssembly 的四个核心设计目标，并解释每个目标的重要性。

2. 架构理解 (15分)

题目：WebAssembly 采用栈式虚拟机架构。请解释栈式虚拟机与寄存器虚拟机的区别，并分析 WebAssembly 选择栈式架构的原因。

3. 历史发展 (10分)

题目：WebAssembly 的发展经历了哪些重要里程碑？请列出至少5个关键时间点及其意义。

实践题

4. 性能分析 (20分)

题目：创建一个 HTML 页面，实现 JavaScript 和 WebAssembly 版本的阶乘计算函数，并比较其性能差异。

要求：

• 计算 factorial(20)
• 使用 performance.now() 测量执行时间
• 重复执行 10000 次取平均值
• 显示性能对比结果

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly vs JavaScript 性能对比</title>
</head>
<body>
    <h1>阶乘计算性能对比</h1>
    <button onclick="runPerformanceTest()">开始测试</button>
    <div id="results"></div>

    <script>
        // JavaScript 版本
        function factorialJS(n) {
            if (n <= 1) return 1;
            return n * factorialJS(n - 1);
        }

        // WebAssembly 版本（需要先加载模块）
        let wasmModule;

        async function loadWasm() {
            // 这里应该加载实际的 WASM 文件
            // 为了演示，我们使用 WAT 格式的内联代码
            const wasmCode = `
                (module
                  (func $factorial (param $n i32) (result i32)
                    (if (result i32)
                      (i32.le_s (local.get $n) (i32.const 1))
                      (then (i32.const 1))
                      (else
                        (i32.mul
                          (local.get $n)
                          (call $factorial
                            (i32.sub (local.get $n) (i32.const 1)))))))
                  (export "factorial" (func $factorial)))
            `;
            
            // 编译 WAT 到 WASM（实际开发中应使用预编译的 .wasm 文件）
            const wasmBuffer = wabtModule.parseWat('inline', wasmCode);
            const wasmBinary = wasmBuffer.toBinary({}).buffer;
            wasmModule = await WebAssembly.instantiate(wasmBinary);
        }

        async function runPerformanceTest() {
            if (!wasmModule) {
                await loadWasm();
            }

            const iterations = 10000;
            const n = 20;

            // 测试 JavaScript 版本
            const jsStart = performance.now();
            for (let i = 0; i < iterations; i++) {
                factorialJS(n);
            }
            const jsEnd = performance.now();
            const jsTime = (jsEnd - jsStart) / iterations;

            // 测试 WebAssembly 版本
            const wasmStart = performance.now();
            for (let i = 0; i < iterations; i++) {
                wasmModule.instance.exports.factorial(n);
            }
            const wasmEnd = performance.now();
            const wasmTime = (wasmEnd - wasmStart) / iterations;

            // 显示结果
            const speedup = jsTime / wasmTime;
            document.getElementById('results').innerHTML = `
                <h2>性能测试结果（${iterations} 次迭代）</h2>
                <p>JavaScript 平均时间: ${jsTime.toFixed(4)} ms</p>
                <p>WebAssembly 平均时间: ${wasmTime.toFixed(4)} ms</p>
                <p>性能提升: ${speedup.toFixed(2)}x</p>
                <p>计算结果: ${factorialJS(n)}</p>
            `;
        }
    </script>
</body>
</html>

(module
  (func $factorial (param $n i32) (result i32)
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (i32.const 1))
      (else
        (i32.mul
          (local.get $n)
          (call $factorial
            (i32.sub (local.get $n) (i32.const 1)))))))
  (export "factorial" (func $factorial)))

wat2wasm factorial.wat -o factorial.wasm

5. 应用场景分析 (15分)

题目：给定以下几个应用场景，分析每个场景是否适合使用 WebAssembly，并说明理由：

1. 实时聊天应用的消息展示
2. 在线图片编辑器的滤镜处理
3. 电商网站的商品搜索
4. 在线代码编辑器的语法高亮
5. 3D 游戏的物理引擎

6. 工具链调研 (15分)

题目：调研并比较至少3种将高级语言编译到 WebAssembly 的工具链，包括支持的语言、特点、使用场景等。

7. 思考题 (15分)

题目：假设你正在开发一个在线视频编辑应用，需要实现视频帧的实时滤镜效果。请设计一个 WebAssembly 和 JavaScript 协作的架构方案，并说明各自的职责分工。

┌─────────────────────────────────────────────────────────┐
│                     用户界面层                          │
│  JavaScript: DOM 操作、用户交互、播放控制                │
└─────────────────────┬───────────────────────────────────┘
                      │
┌─────────────────────┼───────────────────────────────────┐
│                 业务逻辑层                              │
│  JavaScript: 视频加载、时间轴管理、效果参数调整           │
└─────────────────────┬───────────────────────────────────┘
                      │
┌─────────────────────┼───────────────────────────────────┐
│                 计算处理层                              │
│  WebAssembly: 图像滤镜算法、像素处理、数值计算           │
└─────────────────────┼───────────────────────────────────┘
                      │
┌─────────────────────┼───────────────────────────────────┐
│                  数据存储层                             │
│  共享内存: 视频帧数据、处理结果缓存                      │
└─────────────────────────────────────────────────────────┘

class VideoEditor {
    constructor() {
        this.wasmModule = null;
        this.videoElement = document.getElementById('video');
        this.canvas = document.getElementById('preview');
        this.ctx = this.canvas.getContext('2d');
    }

    async initWasm() {
        // 加载 WebAssembly 滤镜模块
        this.wasmModule = await WebAssembly.instantiateStreaming(
            fetch('video-filters.wasm')
        );
    }

    // 用户交互处理
    onFilterSelect(filterType, params) {
        this.currentFilter = { type: filterType, params };
        this.applyFilterToCurrentFrame();
    }

    // 视频播放控制
    onTimeUpdate() {
        this.captureCurrentFrame();
        this.applyFilterToCurrentFrame();
        this.renderToCanvas();
    }

    // 帧数据管理
    captureCurrentFrame() {
        this.ctx.drawImage(this.videoElement, 0, 0);
        this.imageData = this.ctx.getImageData(0, 0, 
            this.canvas.width, this.canvas.height);
    }
}

(module
  (memory (export "memory") 100)
  
  ;; 亮度调节滤镜
  (func $brightness (param $data i32) (param $length i32) (param $factor f32)
    (local $i i32)
    (local $pixel i32)
    
    (loop $pixel_loop
      ;; 处理每个像素的 RGB 值
      (local.set $pixel (i32.load (local.get $data)))
      
      ;; 应用亮度调节算法
      ;; ... 具体像素处理逻辑
      
      (local.set $i (i32.add (local.get $i) (i32.const 4)))
      (br_if $pixel_loop (i32.lt_u (local.get $i) (local.get $length)))
    ))
  
  ;; 模糊滤镜
  (func $blur (param $data i32) (param $width i32) (param $height i32) 
             (param $radius i32)
    ;; 高斯模糊算法实现
    ;; ...
  )
  
  (export "brightness" (func $brightness))
  (export "blur" (func $blur)))

class FilterProcessor {
    applyFilterToCurrentFrame() {
        // 将图像数据传递给 WebAssembly
        const memory = new Uint8Array(this.wasmModule.instance.exports.memory.buffer);
        const dataPtr = this.allocateMemory(this.imageData.data.length);
        memory.set(this.imageData.data, dataPtr);

        // 调用 WebAssembly 滤镜函数
        switch(this.currentFilter.type) {
            case 'brightness':
                this.wasmModule.instance.exports.brightness(
                    dataPtr, 
                    this.imageData.data.length, 
                    this.currentFilter.params.value
                );
                break;
            case 'blur':
                this.wasmModule.instance.exports.blur(
                    dataPtr,
                    this.canvas.width,
                    this.canvas.height,
                    this.currentFilter.params.radius
                );
                break;
        }

        // 获取处理结果
        this.imageData.data.set(
            memory.subarray(dataPtr, dataPtr + this.imageData.data.length)
        );
    }
}

评分标准

• 理论题 (40分)：概念理解准确性、分析深度
• 实践题 (40分)：代码实现正确性、性能测试有效性
• 思考题 (20分)：架构设计合理性、技术选型正确性

总分：100分 及格线：60分

📚 学习提示：

• 完成练习后，建议实际动手验证答案
• 可以尝试修改参数观察性能变化
• 思考题的答案没有标准，重点在于分析过程

第2章 开发环境搭建

本章将指导你搭建完整的 WebAssembly 开发环境，包括必要的工具安装、编辑器配置和调试工具设置。

必要工具安装

2.1.1 WebAssembly 工具链

1. WABT (WebAssembly Binary Toolkit)

WABT 是 WebAssembly 的官方工具集，提供了二进制格式和文本格式之间的转换工具。

# Ubuntu/Debian
sudo apt-get install wabt

# macOS
brew install wabt

# 从源码编译
git clone --recursive https://github.com/WebAssembly/wabt
cd wabt
mkdir build && cd build
cmake .. && make

# 验证安装
wat2wasm --version
wasm2wat --version

主要工具说明：

• wat2wasm：将 WAT 文本格式编译为 WASM 二进制格式
• wasm2wat：将 WASM 二进制格式反编译为 WAT 文本格式
• wasm-validate：验证 WASM 文件的有效性
• wasm-objdump：查看 WASM 文件的详细信息

2. Emscripten SDK

Emscripten 是将 C/C++ 代码编译为 WebAssembly 的完整工具链。

# 下载 emsdk
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# 安装最新版本
./emsdk install latest
./emsdk activate latest

# 设置环境变量
source ./emsdk_env.sh

# 验证安装
emcc --version
em++ --version

3. wasm-pack (Rust 工具链)

wasm-pack 是 Rust 生态系统中最重要的 WebAssembly 工具。

# 安装 Rust (如果尚未安装)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 添加 wasm32 目标
rustup target add wasm32-unknown-unknown

# 安装 wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 验证安装
wasm-pack --version

2.1.2 Node.js 环境

Node.js 提供了服务器端的 WebAssembly 运行时环境。

# 安装 Node.js (建议使用 LTS 版本)
# 方法1: 使用包管理器
# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# macOS
brew install node

# 方法2: 使用 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install --lts
nvm use --lts

# 验证安装
node --version
npm --version

2.1.3 HTTP 服务器

由于 CORS 限制，WebAssembly 文件需要通过 HTTP 服务器加载。

# 方法1: 使用 Python 内置服务器
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# 方法2: 使用 Node.js 工具
npm install -g http-server
http-server -p 8000

# 方法3: 使用 Live Server (VS Code 插件)
# 在 VS Code 中安装 Live Server 扩展

编辑器配置

2.2.1 Visual Studio Code 配置

VS Code 是 WebAssembly 开发的首选编辑器，提供了丰富的插件支持。

推荐插件：

1. WebAssembly

   # 扩展ID: ms-vscode.vscode-wasm
   

   • 提供 WAT 语法高亮
   • 支持 WASM 文件查看

2. Rust Analyzer

   # 扩展ID: rust-lang.rust-analyzer
   

   • Rust 语言服务器
   • 智能补全和错误检查

3. C/C++

   # 扩展ID: ms-vscode.cpptools
   

   • C/C++ 语言支持
   • 调试功能

4. Live Server

   # 扩展ID: ritwickdey.liveserver
   

   • 本地开发服务器
   • 自动刷新功能

配置文件示例：

// .vscode/settings.json
{
    "files.associations": {
        "*.wat": "wasm",
        "*.wast": "wasm"
    },
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "rust-analyzer.cargo.allFeatures": true,
    "rust-analyzer.checkOnSave.command": "clippy"
}

// .vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build WAT",
            "type": "shell",
            "command": "wat2wasm",
            "args": ["${file}", "-o", "${fileDirname}/${fileBasenameNoExtension}.wasm"],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "panel": "new"
            }
        },
        {
            "label": "Build Rust WASM",
            "type": "shell",
            "command": "wasm-pack",
            "args": ["build", "--target", "web"],
            "group": "build",
            "options": {
                "cwd": "${workspaceFolder}"
            }
        }
    ]
}

2.2.2 其他编辑器配置

Vim/Neovim 配置：

" ~/.vimrc 或 ~/.config/nvim/init.vim
" WebAssembly 语法高亮
au BufRead,BufNewFile *.wat set filetype=wasm
au BufRead,BufNewFile *.wast set filetype=wasm

" 安装 vim-wasm 插件 (使用 vim-plug)
Plug 'rhysd/vim-wasm'

Emacs 配置：

;; ~/.emacs.d/init.el
(use-package wasm-mode
  :ensure t
  :mode "\\.wat\\'")

浏览器调试工具

2.3.1 Chrome DevTools

Chrome 提供了最完善的 WebAssembly 调试支持。

启用 WebAssembly 调试：

1. 打开 Chrome DevTools (F12)
2. 进入 Settings (F1)
3. 启用 “Enable WebAssembly Debugging”
4. 重启 DevTools

调试功能：

• Sources 面板：查看 WAT 源码
• Memory 面板：检查 WebAssembly 内存
• Performance 面板：性能分析
• Console：执行 WebAssembly 函数

使用示例：

// 在控制台中调试 WebAssembly
const wasmModule = await WebAssembly.instantiateStreaming(fetch('module.wasm'));

// 检查导出的函数
console.log(wasmModule.instance.exports);

// 调用函数并设置断点
const result = wasmModule.instance.exports.add(5, 3);
console.log('Result:', result);

// 检查内存
const memory = wasmModule.instance.exports.memory;
const view = new Int32Array(memory.buffer, 0, 10);
console.log('Memory view:', view);

2.3.2 Firefox Developer Tools

Firefox 也提供了 WebAssembly 调试支持。

启用方法：

1. 打开 about:config
2. 设置 devtools.debugger.features.wasm 为 true
3. 重启浏览器

2.3.3 专用调试工具

1. wasm-objdump

# 查看 WASM 文件信息
wasm-objdump -x module.wasm

# 反汇编到 WAT 格式
wasm-objdump -d module.wasm

# 查看导入/导出
wasm-objdump -j import module.wasm
wasm-objdump -j export module.wasm

2. Wasmtime

Wasmtime 是一个独立的 WebAssembly 运行时，支持命令行调试。

# 安装 Wasmtime
curl https://wasmtime.dev/install.sh -sSf | bash

# 运行 WASM 文件
wasmtime module.wasm

# 启用调试模式
wasmtime --debug module.wasm

开发环境验证

2.4.1 创建测试项目

创建一个简单的项目来验证环境配置：

mkdir wasm-test-project
cd wasm-test-project

1. WAT 测试文件 (hello.wat)：

(module
  (import "console" "log" (func $log (param i32)))
  (func $hello
    i32.const 42
    call $log)
  (export "hello" (func $hello)))

2. 编译 WAT 文件：

wat2wasm hello.wat -o hello.wasm

3. HTML 测试页面 (index.html)：

<!DOCTYPE html>
<html>
<head>
    <title>WASM 环境测试</title>
</head>
<body>
    <h1>WebAssembly 环境测试</h1>
    <button onclick="testWasm()">测试 WASM</button>
    <div id="output"></div>

    <script>
        const imports = {
            console: {
                log: (arg) => {
                    const output = document.getElementById('output');
                    output.innerHTML += `<p>WASM 输出: ${arg}</p>`;
                    console.log('从 WASM 调用:', arg);
                }
            }
        };

        async function testWasm() {
            try {
                const wasmModule = await WebAssembly.instantiateStreaming(
                    fetch('hello.wasm'), 
                    imports
                );
                
                wasmModule.instance.exports.hello();
                
                const output = document.getElementById('output');
                output.innerHTML += '<p style="color: green;">✓ WebAssembly 环境配置成功！</p>';
            } catch (error) {
                console.error('WASM 加载失败:', error);
                const output = document.getElementById('output');
                output.innerHTML += `<p style="color: red;">✗ 错误: ${error.message}</p>`;
            }
        }
    </script>
</body>
</html>

4. 启动服务器测试：

# 启动 HTTP 服务器
python -m http.server 8000

# 在浏览器中打开 http://localhost:8000
# 点击 "测试 WASM" 按钮

2.4.2 Rust WASM 测试

1. 创建 Rust 项目：

cargo new --lib rust-wasm-test
cd rust-wasm-test

2. 配置 Cargo.toml：

[package]
name = "rust-wasm-test"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
]

3. 编写 Rust 代码 (src/lib.rs)：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

// 绑定 console.log 函数
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// 定义 console_log 宏
macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 导出函数到 JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) {
    console_log!("Hello, {}!", name);
}

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}
}

4. 构建项目：

wasm-pack build --target web

5. 测试生成的文件：

<!DOCTYPE html>
<html>
<head>
    <title>Rust WASM 测试</title>
</head>
<body>
    <h1>Rust WebAssembly 测试</h1>
    <script type="module">
        import init, { greet, add } from './pkg/rust_wasm_test.js';
        
        async function run() {
            await init();
            
            greet('WebAssembly');
            const result = add(5, 3);
            console.log('5 + 3 =', result);
            
            document.body.innerHTML += `<p>Rust WASM 计算结果: 5 + 3 = ${result}</p>`;
        }
        
        run();
    </script>
</body>
</html>

环境诊断与故障排除

2.5.1 常见问题

1. CORS 错误

错误: Access to fetch at 'file:///path/to/module.wasm' from origin 'null' has been blocked by CORS policy

解决方案： 使用 HTTP 服务器而不是直接打开 HTML 文件

2. WebAssembly 不支持

错误: WebAssembly is not supported in this browser

解决方案： 更新浏览器到支持 WebAssembly 的版本

3. 模块加载失败

错误: WebAssembly.instantiate(): Wasm decoding failured

解决方案： 检查 WASM 文件是否正确编译

2.5.2 诊断脚本

创建一个环境诊断脚本：

// diagnostic.js
async function diagnoseEnvironment() {
    const results = {
        webassemblySupport: false,
        streamingSupport: false,
        memorySupport: false,
        simdSupport: false,
        threadsSupport: false
    };

    // 检查基本 WebAssembly 支持
    if (typeof WebAssembly === 'object') {
        results.webassemblySupport = true;
        
        // 检查流式编译支持
        if (typeof WebAssembly.instantiateStreaming === 'function') {
            results.streamingSupport = true;
        }
        
        // 检查内存支持
        try {
            new WebAssembly.Memory({ initial: 1 });
            results.memorySupport = true;
        } catch (e) {}
        
        // 检查 SIMD 支持
        try {
            WebAssembly.validate(new Uint8Array([
                0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00,
                0x01, 0x05, 0x01, 0x60, 0x00, 0x01, 0x7b
            ]));
            results.simdSupport = true;
        } catch (e) {}
    }

    return results;
}

// 在页面中显示诊断结果
diagnoseEnvironment().then(results => {
    console.log('WebAssembly 环境诊断结果:', results);
    
    Object.entries(results).forEach(([feature, supported]) => {
        const status = supported ? '✓' : '✗';
        const color = supported ? 'green' : 'red';
        console.log(`%c${status} ${feature}`, `color: ${color}`);
    });
});

本章小结

通过本章学习，你已经：

1. 安装了完整的工具链：WABT、Emscripten、wasm-pack 等
2. 配置了开发环境：编辑器插件、调试工具
3. 验证了环境设置：通过实际项目测试
4. 掌握了故障排除：常见问题的解决方案

现在你已经具备了 WebAssembly 开发的基础环境，可以开始编写第一个完整的 WASM 程序了。

📝 进入下一步：第3章 第一个 WASM 程序

🔧 工具清单：

• ✅ WABT 工具集
• ✅ Emscripten SDK
• ✅ wasm-pack (Rust)
• ✅ 编辑器配置
• ✅ 浏览器调试工具

第2章 练习题

环境配置验证题

1. 工具链安装验证 (15分)

题目：请在你的系统上安装 WABT 工具集，并完成以下任务：

1. 验证 wat2wasm 和 wasm2wat 命令是否可用
2. 创建一个简单的 WAT 文件，包含一个返回常数的函数
3. 编译为 WASM 并反编译验证结果一致性

要求：提供完整的命令行输出截图或文本记录

# 检查工具版本
$ wat2wasm --version
1.0.34

$ wasm2wat --version  
1.0.34

$ wasm-validate --version
1.0.34

(module
  (func $getAnswer (result i32)
    i32.const 42)
  (export "getAnswer" (func $getAnswer)))

# 编译 WAT 到 WASM
$ wat2wasm simple.wat -o simple.wasm
$ echo "编译成功，生成 simple.wasm"

# 验证 WASM 文件有效性
$ wasm-validate simple.wasm
$ echo "WASM 文件验证通过"

# 反编译 WASM 到 WAT
$ wasm2wat simple.wasm -o simple_decompiled.wat

# 比较原始文件和反编译文件
$ diff simple.wat simple_decompiled.wat
# 注意：格式可能略有不同，但语义应该相同

(module
  (type (;0;) (func (result i32)))
  (func $getAnswer (type 0) (result i32)
    i32.const 42)
  (export "getAnswer" (func $getAnswer)))

2. Emscripten 环境配置 (20分)

题目：安装并配置 Emscripten 开发环境，完成以下任务：

1. 安装 Emscripten SDK
2. 编写一个简单的 C 程序计算两个数的乘积
3. 使用 Emscripten 编译为 WebAssembly
4. 创建 HTML 页面调用编译后的函数

# 克隆 emsdk 仓库
$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk

# 安装最新版本
$ ./emsdk install latest
$ ./emsdk activate latest

# 设置环境变量
$ source ./emsdk_env.sh

# 验证安装
$ emcc --version
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.51

#include <emscripten.h>

// 导出函数到 JavaScript
EMSCRIPTEN_KEEPALIVE
int multiply(int a, int b) {
    return a * b;
}

// 主函数（可选）
int main() {
    return 0;
}

# 编译命令
$ emcc multiply.c -o multiply.html \
    -s EXPORTED_FUNCTIONS='["_multiply"]' \
    -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' \
    -s WASM=1

# 生成的文件
$ ls multiply.*
multiply.html  multiply.js  multiply.wasm

<!DOCTYPE html>
<html>
<head>
    <title>Emscripten WASM 测试</title>
</head>
<body>
    <h1>C 函数调用测试</h1>
    <button onclick="testMultiply()">测试乘法函数</button>
    <div id="result"></div>

    <script src="multiply.js"></script>
    <script>
        // 等待模块加载完成
        Module.onRuntimeInitialized = function() {
            console.log('Emscripten 模块已加载');
            
            // 包装 C 函数
            window.multiply = Module.cwrap('multiply', 'number', ['number', 'number']);
        };

        function testMultiply() {
            if (typeof window.multiply !== 'function') {
                document.getElementById('result').innerHTML = 
                    '<p style="color: red;">模块尚未加载完成</p>';
                return;
            }

            const a = 7;
            const b = 6;
            const result = window.multiply(a, b);
            
            document.getElementById('result').innerHTML = 
                `<p>C 函数计算结果: ${a} × ${b} = ${result}</p>`;
            
            console.log(`multiply(${a}, ${b}) = ${result}`);
        }
    </script>
</body>
</html>

# 启动 HTTP 服务器
$ python -m http.server 8000

# 在浏览器中访问 http://localhost:8000/test.html
# 点击按钮测试功能

3. Rust WASM 环境配置 (20分)

题目：配置 Rust WebAssembly 开发环境，并实现一个字符串处理函数：

1. 安装 Rust 和 wasm-pack
2. 创建一个 Rust 库项目
3. 实现一个函数来统计字符串中某个字符的出现次数
4. 编译为 WASM 并在网页中测试

# 安装 Rust（如果尚未安装）
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source ~/.cargo/env

# 添加 WASM 目标
$ rustup target add wasm32-unknown-unknown

# 安装 wasm-pack
$ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 验证安装
$ rustc --version
$ wasm-pack --version

$ cargo new --lib string-utils
$ cd string-utils

[package]
name = "string-utils"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
]

use wasm_bindgen::prelude::*;

// 导入 console.log
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// 便利宏
macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 统计字符出现次数
#[wasm_bindgen]
pub fn count_char(text: &str, target: char) -> usize {
    let count = text.chars().filter(|&c| c == target).count();
    console_log!("统计字符 '{}' 在 '{}' 中出现了 {} 次", target, text, count);
    count
}

// 字符串反转
#[wasm_bindgen]
pub fn reverse_string(text: &str) -> String {
    let reversed: String = text.chars().rev().collect();
    console_log!("原字符串: '{}', 反转后: '{}'", text, reversed);
    reversed
}

// 字符串长度（UTF-8 字符数）
#[wasm_bindgen]
pub fn char_length(text: &str) -> usize {
    let len = text.chars().count();
    console_log!("字符串 '{}' 的字符数: {}", text, len);
    len
}

// 初始化函数
#[wasm_bindgen(start)]
pub fn main() {
    console_log!("Rust WASM 字符串工具模块已加载");
}

$ wasm-pack build --target web

<!DOCTYPE html>
<html>
<head>
    <title>Rust WASM 字符串工具测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-group { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
        input, button { margin: 5px; padding: 8px; }
        .result { margin: 10px 0; font-weight: bold; color: #2196F3; }
    </style>
</head>
<body>
    <h1>Rust WebAssembly 字符串工具</h1>
    
    <div class="test-group">
        <h3>字符计数测试</h3>
        <input type="text" id="countText" placeholder="输入文本" value="Hello World">
        <input type="text" id="countChar" placeholder="要统计的字符" value="l" maxlength="1">
        <button onclick="testCountChar()">统计字符</button>
        <div id="countResult" class="result"></div>
    </div>
    
    <div class="test-group">
        <h3>字符串反转测试</h3>
        <input type="text" id="reverseText" placeholder="输入文本" value="Hello WebAssembly">
        <button onclick="testReverse()">反转字符串</button>
        <div id="reverseResult" class="result"></div>
    </div>
    
    <div class="test-group">
        <h3>字符长度测试</h3>
        <input type="text" id="lengthText" placeholder="输入文本" value="你好,WebAssembly!">
        <button onclick="testLength()">计算长度</button>
        <div id="lengthResult" class="result"></div>
    </div>

    <script type="module">
        import init, { count_char, reverse_string, char_length } from './pkg/string_utils.js';
        
        async function run() {
            await init();
            console.log('Rust WASM 模块加载完成');
            
            // 将函数绑定到全局作用域
            window.count_char = count_char;
            window.reverse_string = reverse_string;
            window.char_length = char_length;
        }
        
        window.testCountChar = function() {
            const text = document.getElementById('countText').value;
            const char = document.getElementById('countChar').value;
            
            if (char.length !== 1) {
                alert('请输入单个字符');
                return;
            }
            
            const count = window.count_char(text, char);
            document.getElementById('countResult').textContent = 
                `字符 '${char}' 在 "${text}" 中出现了 ${count} 次`;
        };
        
        window.testReverse = function() {
            const text = document.getElementById('reverseText').value;
            const reversed = window.reverse_string(text);
            document.getElementById('reverseResult').textContent = 
                `"${text}" 反转后: "${reversed}"`;
        };
        
        window.testLength = function() {
            const text = document.getElementById('lengthText').value;
            const length = window.char_length(text);
            document.getElementById('lengthResult').textContent = 
                `"${text}" 的字符长度: ${length}`;
        };
        
        run();
    </script>
</body>
</html>

# 启动服务器
$ python -m http.server 8000

# 在浏览器中打开 http://localhost:8000
# 测试各个功能

编辑器配置题

4. VS Code 工作区配置 (15分)

题目：为 WebAssembly 项目配置 VS Code 工作区，要求：

1. 安装必要的扩展插件
2. 配置自动构建任务
3. 设置调试配置
4. 创建代码片段模板

{
    "recommendations": [
        "ms-vscode.vscode-wasm",
        "rust-lang.rust-analyzer", 
        "ms-vscode.cpptools",
        "ritwickdey.liveserver",
        "ms-vscode.cmake-tools"
    ]
}

{
    "files.associations": {
        "*.wat": "wasm",
        "*.wast": "wasm"
    },
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.formatOnSave": true,
    "rust-analyzer.cargo.allFeatures": true,
    "rust-analyzer.checkOnSave.command": "clippy",
    "C_Cpp.default.cStandard": "c11",
    "C_Cpp.default.cppStandard": "c++17",
    "liveServer.settings.port": 8080,
    "liveServer.settings.CustomBrowser": "chrome"
}

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build WAT to WASM",
            "type": "shell",
            "command": "wat2wasm",
            "args": [
                "${file}",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}.wasm"
            ],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "panel": "new"
            },
            "problemMatcher": []
        },
        {
            "label": "Build Rust WASM",
            "type": "shell",
            "command": "wasm-pack",
            "args": ["build", "--target", "web"],
            "group": "build",
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "presentation": {
                "echo": true,
                "reveal": "always"
            }
        },
        {
            "label": "Build C/C++ with Emscripten",
            "type": "shell",
            "command": "emcc",
            "args": [
                "${file}",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}.html",
                "-s", "WASM=1",
                "-s", "EXPORTED_RUNTIME_METHODS=['ccall','cwrap']"
            ],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always"
            }
        },
        {
            "label": "Start HTTP Server",
            "type": "shell",
            "command": "python",
            "args": ["-m", "http.server", "8000"],
            "group": "test",
            "isBackground": true,
            "presentation": {
                "echo": true,
                "reveal": "always",
                "panel": "new"
            }
        }
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Debug WASM in Node.js",
            "program": "${workspaceFolder}/test.js",
            "console": "integratedTerminal"
        }
    ]
}

{
    "WAT Module Template": {
        "prefix": "wat-module",
        "body": [
            "(module",
            "  (func $$${1:function_name} (param $$${2:param} ${3:i32}) (result ${4:i32})",
            "    ${5:// function body}",
            "    local.get $$${2:param})",
            "  (export \"${1:function_name}\" (func $$${1:function_name})))"
        ],
        "description": "Basic WAT module template"
    },
    "Rust WASM Function": {
        "prefix": "rust-wasm-fn",
        "body": [
            "#[wasm_bindgen]",
            "pub fn ${1:function_name}(${2:param}: ${3:i32}) -> ${4:i32} {",
            "    ${5:// function body}",
            "    ${2:param}",
            "}"
        ],
        "description": "Rust WebAssembly function template"
    },
    "HTML WASM Loader": {
        "prefix": "html-wasm",
        "body": [
            "<!DOCTYPE html>",
            "<html>",
            "<head>",
            "    <title>${1:WASM Test}</title>",
            "</head>",
            "<body>",
            "    <script>",
            "        async function loadWasm() {",
            "            const wasmModule = await WebAssembly.instantiateStreaming(",
            "                fetch('${2:module.wasm}')",
            "            );",
            "            ",
            "            // Use wasmModule.instance.exports here",
            "            console.log(wasmModule.instance.exports);",
            "        }",
            "        ",
            "        loadWasm();",
            "    </script>",
            "</body>",
            "</html>"
        ],
        "description": "HTML template for loading WASM"
    }
}

调试工具题

5. 浏览器调试实践 (20分)

题目：使用浏览器开发者工具调试 WebAssembly，完成以下任务：

1. 创建一个有 bug 的 WASM 程序（例如数组越界）
2. 在 Chrome DevTools 中设置断点
3. 检查内存状态和变量值
4. 修复 bug 并验证修复效果

(module
  (memory (export "memory") 1)
  
  ;; 数组求和函数 - 包含越界访问 bug
  (func $sum_array (param $ptr i32) (param $len i32) (result i32)
    (local $i i32)
    (local $sum i32)
    
    (loop $loop
      ;; Bug: 没有检查边界，可能访问越界
      (local.set $sum
        (i32.add
          (local.get $sum)
          (i32.load (local.get $ptr))))
      
      ;; 递增指针和计数器
      (local.set $ptr (i32.add (local.get $ptr) (i32.const 4)))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      ;; Bug: 应该是 i32.lt_u 而不是 i32.le_u
      (br_if $loop (i32.le_u (local.get $i) (local.get $len)))
    )
    
    local.get $sum)
  
  ;; 初始化数组
  (func $init_array (param $ptr i32)
    ;; 在内存中写入测试数据: [1, 2, 3, 4, 5]
    (i32.store (local.get $ptr) (i32.const 1))
    (i32.store (i32.add (local.get $ptr) (i32.const 4)) (i32.const 2))
    (i32.store (i32.add (local.get $ptr) (i32.const 8)) (i32.const 3))
    (i32.store (i32.add (local.get $ptr) (i32.const 12)) (i32.const 4))
    (i32.store (i32.add (local.get $ptr) (i32.const 16)) (i32.const 5)))
  
  (export "sum_array" (func $sum_array))
  (export "init_array" (func $init_array)))

$ wat2wasm buggy.wat -o buggy.wasm

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly 调试练习</title>
</head>
<body>
    <h1>WebAssembly 调试练习</h1>
    <button onclick="testBuggyFunction()">测试有 bug 的函数</button>
    <button onclick="testFixedFunction()">测试修复后的函数</button>
    <div id="result"></div>

    <script>
        let wasmModule;
        
        async function loadWasm() {
            wasmModule = await WebAssembly.instantiateStreaming(fetch('buggy.wasm'));
            console.log('WASM 模块已加载');
        }
        
        function testBuggyFunction() {
            if (!wasmModule) {
                alert('WASM 模块尚未加载');
                return;
            }
            
            const { memory, init_array, sum_array } = wasmModule.instance.exports;
            
            // 在内存起始位置初始化数组
            const arrayPtr = 0;
            init_array(arrayPtr);
            
            // 设置断点的好位置
            debugger; // 浏览器会在这里停止
            
            // 调用有 bug 的求和函数
            const result = sum_array(arrayPtr, 5); // 期望结果: 1+2+3+4+5 = 15
            
            // 检查内存内容
            const view = new Int32Array(memory.buffer, 0, 10);
            console.log('内存内容:', view);
            console.log('求和结果:', result);
            
            document.getElementById('result').innerHTML = `
                <p>数组内容: [${Array.from(view.slice(0, 5)).join(', ')}]</p>
                <p>求和结果: ${result} (期望: 15)</p>
                <p style="color: ${result === 15 ? 'green' : 'red'}">
                    ${result === 15 ? '✓ 正确' : '✗ 有 bug'}
                </p>
            `;
        }
        
        async function testFixedFunction() {
            // 加载修复后的版本
            const fixedModule = await WebAssembly.instantiateStreaming(fetch('fixed.wasm'));
            const { memory, init_array, sum_array } = fixedModule.instance.exports;
            
            const arrayPtr = 0;
            init_array(arrayPtr);
            
            const result = sum_array(arrayPtr, 5);
            const view = new Int32Array(memory.buffer, 0, 5);
            
            document.getElementById('result').innerHTML += `
                <hr>
                <p><strong>修复后:</strong></p>
                <p>数组内容: [${Array.from(view).join(', ')}]</p>
                <p>求和结果: ${result} (期望: 15)</p>
                <p style="color: green">✓ 已修复</p>
            `;
        }
        
        loadWasm();
    </script>
</body>
</html>

(module
  (memory (export "memory") 1)
  
  ;; 修复后的数组求和函数
  (func $sum_array (param $ptr i32) (param $len i32) (result i32)
    (local $i i32)
    (local $sum i32)
    
    (loop $loop
      ;; 修复1: 添加边界检查
      (if (i32.ge_u (local.get $i) (local.get $len))
        (then (br $loop))) ;; 跳出循环
      
      (local.set $sum
        (i32.add
          (local.get $sum)
          (i32.load (local.get $ptr))))
      
      (local.set $ptr (i32.add (local.get $ptr) (i32.const 4)))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      ;; 修复2: 使用 i32.lt_u 而不是 i32.le_u
      (br_if $loop (i32.lt_u (local.get $i) (local.get $len)))
    )
    
    local.get $sum)
  
  (func $init_array (param $ptr i32)
    (i32.store (local.get $ptr) (i32.const 1))
    (i32.store (i32.add (local.get $ptr) (i32.const 4)) (i32.const 2))
    (i32.store (i32.add (local.get $ptr) (i32.const 8)) (i32.const 3))
    (i32.store (i32.add (local.get $ptr) (i32.const 12)) (i32.const 4))
    (i32.store (i32.add (local.get $ptr) (i32.const 16)) (i32.const 5)))
  
  (export "sum_array" (func $sum_array))
  (export "init_array" (func $init_array)))

6. 性能分析工具使用 (10分)

题目：使用浏览器性能分析工具比较不同 WebAssembly 实现的性能差异。

要求：

1. 实现同一算法的两个版本（优化前后）
2. 使用 Performance 面板进行性能分析
3. 对比并解释性能差异

(module
  ;; 计算斐波那契数列 - 递归版本（性能较差）
  (func $fibonacci_slow (param $n i32) (result i32)
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (local.get $n))
      (else
        (i32.add
          (call $fibonacci_slow
            (i32.sub (local.get $n) (i32.const 1)))
          (call $fibonacci_slow
            (i32.sub (local.get $n) (i32.const 2)))))))
  
  (export "fibonacci" (func $fibonacci_slow)))

(module
  ;; 计算斐波那契数列 - 迭代版本（性能较好）
  (func $fibonacci_fast (param $n i32) (result i32)
    (local $a i32)
    (local $b i32)
    (local $temp i32)
    (local $i i32)
    
    ;; 处理边界情况
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (local.get $n))
      (else
        ;; 初始化
        (local.set $a (i32.const 0))
        (local.set $b (i32.const 1))
        (local.set $i (i32.const 2))
        
        ;; 迭代计算
        (loop $loop
          (local.set $temp (i32.add (local.get $a) (local.get $b)))
          (local.set $a (local.get $b))
          (local.set $b (local.get $temp))
          (local.set $i (i32.add (local.get $i) (i32.const 1)))
          
          (br_if $loop (i32.le_s (local.get $i) (local.get $n)))
        )
        
        local.get $b)))
  
  (export "fibonacci" (func $fibonacci_fast)))

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly 性能分析</title>
    <style>
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
        .result { margin: 10px 0; font-family: monospace; }
        .fast { color: green; }
        .slow { color: red; }
    </style>
</head>
<body>
    <h1>WebAssembly 性能分析</h1>
    
    <div class="test-section">
        <h3>斐波那契数列计算性能对比</h3>
        <p>在 Performance 面板中录制性能数据</p>
        <button onclick="runPerformanceTest()">开始性能测试</button>
        <button onclick="runDetailedTest()">详细性能测试</button>
        <div id="results"></div>
    </div>

    <script>
        let slowModule, fastModule;
        
        async function loadModules() {
            try {
                slowModule = await WebAssembly.instantiateStreaming(fetch('slow.wasm'));
                fastModule = await WebAssembly.instantiateStreaming(fetch('fast.wasm'));
                console.log('两个模块都已加载成功');
            } catch (error) {
                console.error('模块加载失败:', error);
            }
        }
        
        function measureTime(fn, label) {
            const start = performance.now();
            const result = fn();
            const end = performance.now();
            const duration = end - start;
            
            console.log(`${label}: ${duration.toFixed(4)}ms, 结果: ${result}`);
            return { duration, result };
        }
        
        async function runPerformanceTest() {
            if (!slowModule || !fastModule) {
                alert('模块尚未加载完成');
                return;
            }
            
            const n = 35; // 足够大的数字来显示性能差异
            
            // 开始性能记录（告诉用户在 DevTools 中手动开始）
            console.log('开始性能测试 - 请在 DevTools Performance 面板中点击录制');
            
            // 测试慢速版本
            performance.mark('slow-start');
            const slowResult = measureTime(
                () => slowModule.instance.exports.fibonacci(n),
                `递归版本 fibonacci(${n})`
            );
            performance.mark('slow-end');
            performance.measure('Slow Fibonacci', 'slow-start', 'slow-end');
            
            // 短暂延迟
            await new Promise(resolve => setTimeout(resolve, 100));
            
            // 测试快速版本
            performance.mark('fast-start');
            const fastResult = measureTime(
                () => fastModule.instance.exports.fibonacci(n),
                `迭代版本 fibonacci(${n})`
            );
            performance.mark('fast-end');
            performance.measure('Fast Fibonacci', 'fast-start', 'fast-end');
            
            // 显示结果
            const speedup = slowResult.duration / fastResult.duration;
            document.getElementById('results').innerHTML = `
                <div class="result">
                    <h4>性能测试结果 (fibonacci(${n})):</h4>
                    <p class="slow">递归版本: ${slowResult.duration.toFixed(4)}ms</p>
                    <p class="fast">迭代版本: ${fastResult.duration.toFixed(4)}ms</p>
                    <p><strong>性能提升: ${speedup.toFixed(2)}x</strong></p>
                    <p>结果验证: ${slowResult.result === fastResult.result ? '✓ 一致' : '✗ 不一致'}</p>
                </div>
            `;
            
            console.log('性能测试完成 - 可以在 DevTools Performance 面板中停止录制并查看结果');
        }
        
        async function runDetailedTest() {
            if (!slowModule || !fastModule) {
                alert('模块尚未加载完成');
                return;
            }
            
            const testCases = [25, 30, 35, 40];
            let results = '<h4>详细性能对比:</h4><table border="1"><tr><th>n</th><th>递归版本(ms)</th><th>迭代版本(ms)</th><th>性能提升</th></tr>';
            
            for (const n of testCases) {
                console.log(`测试 fibonacci(${n})`);
                
                const slowResult = measureTime(
                    () => slowModule.instance.exports.fibonacci(n),
                    `递归 fibonacci(${n})`
                );
                
                const fastResult = measureTime(
                    () => fastModule.instance.exports.fibonacci(n),
                    `迭代 fibonacci(${n})`
                );
                
                const speedup = slowResult.duration / fastResult.duration;
                
                results += `<tr>
                    <td>${n}</td>
                    <td class="slow">${slowResult.duration.toFixed(4)}</td>
                    <td class="fast">${fastResult.duration.toFixed(4)}</td>
                    <td>${speedup.toFixed(2)}x</td>
                </tr>`;
                
                // 避免阻塞 UI
                await new Promise(resolve => setTimeout(resolve, 10));
            }
            
            results += '</table>';
            document.getElementById('results').innerHTML = results;
        }
        
        // 页面加载时自动加载模块
        loadModules();
    </script>
</body>
</html>

评分标准

总分：100分 及格线：60分

🎯 学习要点：

• 确保所有工具正常安装并可用
• 掌握基本的调试技能和工具使用
• 理解不同编译工具链的特点和适用场景
• 能够配置高效的开发环境

第3章 第一个 WASM 程序

在本章中，我们将创建并运行第一个 WebAssembly 程序，从最简单的 “Hello World” 开始，逐步理解 WAT (WebAssembly Text Format) 的语法结构。

Hello World 示例

3.1.1 最简单的 WASM 模块

让我们从一个最基础的 WebAssembly 模块开始：

;; hello.wat - 最简单的 WASM 模块
(module
  (func $hello (result i32)
    i32.const 42)
  (export "hello" (func $hello)))

这个模块定义了一个函数，返回常数 42。让我们分析每一部分：

• (module ...) - 模块的根容器
• (func $hello ...) - 定义一个名为 $hello 的函数
• (result i32) - 函数返回一个 32 位整数
• i32.const 42 - 将常数 42 压入栈中
• (export "hello" ...) - 将函数导出为 “hello”，供 JavaScript 调用

3.1.2 编译和运行

编译 WAT 文件：

wat2wasm hello.wat -o hello.wasm

创建 HTML 测试页面：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个 WASM 程序</title>
</head>
<body>
    <h1>Hello WebAssembly!</h1>
    <button onclick="callWasm()">调用 WASM 函数</button>
    <div id="output"></div>

    <script>
        async function callWasm() {
            try {
                // 加载并实例化 WASM 模块
                const wasmModule = await WebAssembly.instantiateStreaming(
                    fetch('hello.wasm')
                );
                
                // 调用导出的函数
                const result = wasmModule.instance.exports.hello();
                
                // 显示结果
                document.getElementById('output').innerHTML = 
                    `<p>WASM 函数返回: ${result}</p>`;
                
                console.log('Hello WebAssembly! 返回值:', result);
            } catch (error) {
                console.error('WASM 加载失败:', error);
            }
        }
    </script>
</body>
</html>

3.1.3 更有趣的例子

让我们创建一个更有意义的例子：

;; calculator.wat - 简单的计算器
(module
  ;; 加法函数
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  
  ;; 乘法函数
  (func $multiply (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.mul)
  
  ;; 阶乘函数（递归）
  (func $factorial (param $n i32) (result i32)
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (i32.const 1))
      (else
        (i32.mul
          (local.get $n)
          (call $factorial
            (i32.sub (local.get $n) (i32.const 1)))))))
  
  ;; 导出函数
  (export "add" (func $add))
  (export "multiply" (func $multiply))
  (export "factorial" (func $factorial)))

WAT 语法基础

3.2.1 S-表达式结构

WebAssembly 文本格式使用 S-表达式（S-expressions）语法，这是一种基于括号的语法结构：

;; 基本结构
(operator operand1 operand2 ...)

;; 嵌套结构
(outer-op
  (inner-op arg1 arg2)
  arg3)

示例对比：

;; 堆栈形式（较难阅读）
i32.const 10
i32.const 20
i32.add

;; S-表达式形式（更易理解）
(i32.add
  (i32.const 10)
  (i32.const 20))

3.2.2 基本数据类型

WebAssembly 支持四种基本数值类型：

类型示例：

(module
  (func $type_examples
    ;; 整数常量
    i32.const 42        ;; 32位整数
    i64.const 1000000   ;; 64位整数
    
    ;; 浮点常量
    f32.const 3.14      ;; 32位浮点数
    f64.const 2.71828   ;; 64位浮点数
    
    ;; 十六进制表示
    i32.const 0xFF      ;; 255
    i32.const 0x100     ;; 256
    
    ;; 清空栈
    drop drop drop drop drop))

3.2.3 函数定义

函数是 WebAssembly 的基本执行单元：

;; 函数定义的完整语法
(func $function_name 
  (param $param1 type1) (param $param2 type2) ...
  (local $local1 type1) (local $local2 type2) ...
  (result result_type)
  
  ;; 函数体
  instruction1
  instruction2
  ...)

详细示例：

(module
  ;; 无参数，无返回值
  (func $simple
    ;; 函数体为空也是有效的
    nop)
  
  ;; 带参数和返回值
  (func $max (param $a i32) (param $b i32) (result i32)
    (if (result i32)
      (i32.gt_s (local.get $a) (local.get $b))
      (then (local.get $a))
      (else (local.get $b))))
  
  ;; 使用局部变量
  (func $sum_of_squares (param $a i32) (param $b i32) (result i32)
    (local $square_a i32)
    (local $square_b i32)
    
    ;; 计算 a²
    (local.set $square_a
      (i32.mul (local.get $a) (local.get $a)))
    
    ;; 计算 b²
    (local.set $square_b
      (i32.mul (local.get $b) (local.get $b)))
    
    ;; 返回 a² + b²
    (i32.add (local.get $square_a) (local.get $square_b))))

3.2.4 栈式执行模型

WebAssembly 使用栈式虚拟机，所有操作都在一个隐式的栈上进行：

;; 栈操作示例
(module
  (func $stack_demo (result i32)
    ;; 栈: []
    i32.const 10    ;; 栈: [10]
    i32.const 20    ;; 栈: [10, 20]
    i32.add         ;; 栈: [30]  (弹出 20 和 10，压入 30)
    
    i32.const 5     ;; 栈: [30, 5]
    i32.mul         ;; 栈: [150] (弹出 5 和 30，压入 150)
    ;; 函数返回栈顶的值 150
  ))

栈操作指令：

(module
  (func $stack_operations
    i32.const 1
    i32.const 2
    i32.const 3     ;; 栈: [1, 2, 3]
    
    drop            ;; 丢弃栈顶 -> 栈: [1, 2]
    dup             ;; 复制栈顶 -> 栈: [1, 2, 2] (注意: dup 在某些版本中不可用)
    swap            ;; 交换栈顶两个元素 (注意: swap 在某些版本中不可用)
    
    ;; 清空剩余元素
    drop drop drop))

3.2.5 控制流基础

WebAssembly 提供了结构化的控制流指令：

条件分支：

(module
  (func $abs (param $x i32) (result i32)
    (if (result i32)
      (i32.lt_s (local.get $x) (i32.const 0))
      (then
        ;; 如果 x < 0，返回 -x
        (i32.sub (i32.const 0) (local.get $x)))
      (else
        ;; 如果 x >= 0，返回 x
        (local.get $x)))))

循环结构：

(module
  (func $count_down (param $n i32) (result i32)
    (local $sum i32)
    
    (loop $my_loop
      ;; 检查循环条件
      (if (i32.gt_s (local.get $n) (i32.const 0))
        (then
          ;; 累加
          (local.set $sum
            (i32.add (local.get $sum) (local.get $n)))
          
          ;; 递减计数器
          (local.set $n
            (i32.sub (local.get $n) (i32.const 1)))
          
          ;; 继续循环
          (br $my_loop))))
    
    local.get $sum))

编译与运行

3.3.1 WAT 到 WASM 编译

基本编译：

# 编译 WAT 文件
wat2wasm input.wat -o output.wasm

# 启用调试信息
wat2wasm input.wat -o output.wasm --debug-names

# 验证输出
wasm-validate output.wasm

查看编译结果：

# 反编译查看结果
wasm2wat output.wasm -o check.wat

# 查看二进制结构
wasm-objdump -x output.wasm

# 查看反汇编
wasm-objdump -d output.wasm

3.3.2 JavaScript 加载方式

方式一：流式加载（推荐）

async function loadWasmStreaming(url) {
    try {
        const wasmModule = await WebAssembly.instantiateStreaming(fetch(url));
        return wasmModule.instance.exports;
    } catch (error) {
        console.error('流式加载失败:', error);
        return null;
    }
}

// 使用示例
const wasmExports = await loadWasmStreaming('module.wasm');
if (wasmExports) {
    const result = wasmExports.add(5, 3);
    console.log('结果:', result);
}

方式二：数组缓冲区加载

async function loadWasmBuffer(url) {
    try {
        const response = await fetch(url);
        const bytes = await response.arrayBuffer();
        const wasmModule = await WebAssembly.instantiate(bytes);
        return wasmModule.instance.exports;
    } catch (error) {
        console.error('缓冲区加载失败:', error);
        return null;
    }
}

方式三：同步加载（Node.js）

const fs = require('fs');
const wasmBuffer = fs.readFileSync('module.wasm');
const wasmModule = new WebAssembly.Module(wasmBuffer);
const wasmInstance = new WebAssembly.Instance(wasmModule);
const exports = wasmInstance.exports;

3.3.3 错误处理和调试

常见编译错误：

;; 错误示例1: 类型不匹配
(module
  (func $type_error (result i32)
    f32.const 3.14))  ;; 错误：返回类型应该是 i32

;; 错误示例2: 未定义的标识符
(module
  (func $undefined_error
    local.get $undefined_var))  ;; 错误：变量未定义

;; 错误示例3: 栈不平衡
(module
  (func $stack_error (result i32)
    i32.const 10
    i32.const 20
    i32.add
    i32.add))  ;; 错误：栈上只有一个值，但需要两个

调试技巧：

// 1. 检查模块导出
console.log('导出的函数:', Object.keys(wasmModule.instance.exports));

// 2. 包装函数调用以捕获异常
function safeCall(wasmFunction, ...args) {
    try {
        return wasmFunction(...args);
    } catch (error) {
        console.error('WASM 函数调用失败:', error);
        console.error('参数:', args);
        return null;
    }
}

// 3. 验证参数类型
function validateAndCall(wasmFunction, expectedTypes, ...args) {
    if (args.length !== expectedTypes.length) {
        throw new Error(`参数数量不匹配: 期望 ${expectedTypes.length}, 实际 ${args.length}`);
    }
    
    for (let i = 0; i < args.length; i++) {
        const expectedType = expectedTypes[i];
        const actualValue = args[i];
        
        if (expectedType === 'i32' && (!Number.isInteger(actualValue) || actualValue < -2**31 || actualValue >= 2**31)) {
            throw new Error(`参数 ${i} 不是有效的 i32 值: ${actualValue}`);
        }
        // 添加其他类型检查...
    }
    
    return wasmFunction(...args);
}

// 使用示例
const result = validateAndCall(wasmExports.add, ['i32', 'i32'], 10, 20);

3.3.4 完整示例项目

让我们创建一个完整的数学工具库：

math_utils.wat:

(module
  ;; 计算两个数的最大公约数（欧几里得算法）
  (func $gcd (param $a i32) (param $b i32) (result i32)
    (local $temp i32)
    
    (loop $gcd_loop
      (if (i32.eqz (local.get $b))
        (then (br $gcd_loop)))
      
      (local.set $temp (local.get $b))
      (local.set $b (i32.rem_u (local.get $a) (local.get $b)))
      (local.set $a (local.get $temp))
      (br $gcd_loop))
    
    local.get $a)
  
  ;; 计算最小公倍数
  (func $lcm (param $a i32) (param $b i32) (result i32)
    (i32.div_u
      (i32.mul (local.get $a) (local.get $b))
      (call $gcd (local.get $a) (local.get $b))))
  
  ;; 判断是否为质数
  (func $is_prime (param $n i32) (result i32)
    (local $i i32)
    
    ;; 小于 2 的数不是质数
    (if (i32.lt_u (local.get $n) (i32.const 2))
      (then (return (i32.const 0))))
    
    ;; 2 是质数
    (if (i32.eq (local.get $n) (i32.const 2))
      (then (return (i32.const 1))))
    
    ;; 偶数不是质数
    (if (i32.eqz (i32.rem_u (local.get $n) (i32.const 2)))
      (then (return (i32.const 0))))
    
    ;; 检查奇数因子
    (local.set $i (i32.const 3))
    
    (loop $check_loop
      (if (i32.gt_u
            (i32.mul (local.get $i) (local.get $i))
            (local.get $n))
        (then (return (i32.const 1))))
      
      (if (i32.eqz (i32.rem_u (local.get $n) (local.get $i)))
        (then (return (i32.const 0))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 2)))
      (br $check_loop))
    
    i32.const 1)
  
  ;; 计算幂（快速幂算法）
  (func $power (param $base i32) (param $exp i32) (result i32)
    (local $result i32)
    
    (local.set $result (i32.const 1))
    
    (loop $power_loop
      (if (i32.eqz (local.get $exp))
        (then (br $power_loop)))
      
      (if (i32.rem_u (local.get $exp) (i32.const 2))
        (then
          (local.set $result
            (i32.mul (local.get $result) (local.get $base)))))
      
      (local.set $base
        (i32.mul (local.get $base) (local.get $base)))
      (local.set $exp
        (i32.div_u (local.get $exp) (i32.const 2)))
      (br $power_loop))
    
    local.get $result)
  
  ;; 导出所有函数
  (export "gcd" (func $gcd))
  (export "lcm" (func $lcm))
  (export "is_prime" (func $is_prime))
  (export "power" (func $power)))

测试页面 (math_test.html):

<!DOCTYPE html>
<html>
<head>
    <title>数学工具库测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
        input { margin: 5px; padding: 5px; width: 100px; }
        button { margin: 5px; padding: 8px 15px; }
        .result { margin: 10px 0; font-weight: bold; color: #2196F3; }
    </style>
</head>
<body>
    <h1>WebAssembly 数学工具库</h1>
    
    <div class="test-section">
        <h3>最大公约数 (GCD)</h3>
        <input type="number" id="gcd_a" value="48">
        <input type="number" id="gcd_b" value="18">
        <button onclick="testGCD()">计算 GCD</button>
        <div id="gcd_result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>最小公倍数 (LCM)</h3>
        <input type="number" id="lcm_a" value="12">
        <input type="number" id="lcm_b" value="18">
        <button onclick="testLCM()">计算 LCM</button>
        <div id="lcm_result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>质数检测</h3>
        <input type="number" id="prime_n" value="17">
        <button onclick="testPrime()">检测质数</button>
        <div id="prime_result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>幂运算</h3>
        <input type="number" id="power_base" value="2">
        <input type="number" id="power_exp" value="10">
        <button onclick="testPower()">计算幂</button>
        <div id="power_result" class="result"></div>
    </div>

    <script>
        let mathUtils;
        
        async function loadMathUtils() {
            try {
                const wasmModule = await WebAssembly.instantiateStreaming(
                    fetch('math_utils.wasm')
                );
                mathUtils = wasmModule.instance.exports;
                console.log('数学工具库加载成功');
            } catch (error) {
                console.error('加载失败:', error);
                alert('WebAssembly 模块加载失败');
            }
        }
        
        function testGCD() {
            if (!mathUtils) { alert('模块未加载'); return; }
            
            const a = parseInt(document.getElementById('gcd_a').value);
            const b = parseInt(document.getElementById('gcd_b').value);
            const result = mathUtils.gcd(a, b);
            
            document.getElementById('gcd_result').textContent = 
                `GCD(${a}, ${b}) = ${result}`;
        }
        
        function testLCM() {
            if (!mathUtils) { alert('模块未加载'); return; }
            
            const a = parseInt(document.getElementById('lcm_a').value);
            const b = parseInt(document.getElementById('lcm_b').value);
            const result = mathUtils.lcm(a, b);
            
            document.getElementById('lcm_result').textContent = 
                `LCM(${a}, ${b}) = ${result}`;
        }
        
        function testPrime() {
            if (!mathUtils) { alert('模块未加载'); return; }
            
            const n = parseInt(document.getElementById('prime_n').value);
            const result = mathUtils.is_prime(n);
            
            document.getElementById('prime_result').textContent = 
                `${n} ${result ? '是' : '不是'}质数`;
        }
        
        function testPower() {
            if (!mathUtils) { alert('模块未加载'); return; }
            
            const base = parseInt(document.getElementById('power_base').value);
            const exp = parseInt(document.getElementById('power_exp').value);
            const result = mathUtils.power(base, exp);
            
            document.getElementById('power_result').textContent = 
                `${base}^${exp} = ${result}`;
        }
        
        // 页面加载时自动加载模块
        loadMathUtils();
    </script>
</body>
</html>

本章小结

通过本章学习，你已经：

1. 创建了第一个 WebAssembly 程序：从简单的 Hello World 到完整的数学工具库
2. 掌握了 WAT 语法基础：S-表达式、数据类型、函数定义、控制流
3. 理解了栈式执行模型：WebAssembly 的核心执行机制
4. 学会了编译和运行流程：从 WAT 到 WASM 到 JavaScript 集成
5. 掌握了调试技巧：错误处理、类型验证、调试方法

现在你已经具备了编写基本 WebAssembly 程序的能力，可以进入更深入的核心技术学习了。

📝 进入下一步：第4章 WebAssembly 文本格式 (WAT)

🎯 核心技能：

• ✅ WAT 语法基础
• ✅ 栈式执行模型
• ✅ 函数定义和调用
• ✅ JavaScript 集成
• ✅ 基本调试技能

第3章 练习题

WAT 语法基础题

1. 基本语法理解 (15分)

题目：解释下列 WAT 代码的执行过程，包括栈的变化情况：

(module
  (func $mystery (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.add
    local.get $x
    local.get $y
    i32.mul
    i32.sub))

如果调用 mystery(5, 3)，请逐步说明栈的变化过程和最终结果。

初始状态: 栈=[], 参数: $x=5, $y=3

1. local.get $x    -> 栈=[5]
2. local.get $y    -> 栈=[5, 3]
3. i32.add         -> 栈=[8]     (弹出 3,5, 压入 5+3=8)
4. local.get $x    -> 栈=[8, 5]
5. local.get $y    -> 栈=[8, 5, 3]
6. i32.mul         -> 栈=[8, 15]  (弹出 3,5, 压入 5*3=15)
7. i32.sub         -> 栈=[−7]    (弹出 15,8, 压入 8-15=-7)

最终结果: -7

2. 函数实现 (20分)

题目：使用 WAT 实现以下函数，要求包含详细注释：

1. min(a, b) - 返回两个数中的较小值
2. sign(x) - 返回数字的符号（-1, 0, 或 1）
3. clamp(x, min, max) - 将数字限制在指定范围内

(module
  ;; 1. 返回两个数中的较小值
  (func $min (param $a i32) (param $b i32) (result i32)
    ;; 使用条件表达式比较两个参数
    (if (result i32)
      (i32.lt_s (local.get $a) (local.get $b))  ;; if a < b
      (then (local.get $a))                      ;; return a
      (else (local.get $b))))                    ;; else return b

  ;; 2. 返回数字的符号
  (func $sign (param $x i32) (result i32)
    ;; 首先检查是否为 0
    (if (result i32)
      (i32.eqz (local.get $x))                   ;; if x == 0
      (then (i32.const 0))                       ;; return 0
      (else
        ;; 检查是否为负数
        (if (result i32)
          (i32.lt_s (local.get $x) (i32.const 0)) ;; if x < 0
          (then (i32.const -1))                    ;; return -1
          (else (i32.const 1))))))                 ;; else return 1

  ;; 3. 将数字限制在指定范围内
  (func $clamp (param $x i32) (param $min i32) (param $max i32) (result i32)
    ;; 首先确保 x 不小于 min
    (local.set $x
      (if (result i32)
        (i32.lt_s (local.get $x) (local.get $min))
        (then (local.get $min))
        (else (local.get $x))))
    
    ;; 然后确保 x 不大于 max
    (if (result i32)
      (i32.gt_s (local.get $x) (local.get $max))
      (then (local.get $max))
      (else (local.get $x))))

  ;; 导出函数
  (export "min" (func $min))
  (export "sign" (func $sign))
  (export "clamp" (func $clamp)))

// 测试 min 函数
console.assert(wasmExports.min(5, 3) === 3);
console.assert(wasmExports.min(-2, -5) === -5);
console.assert(wasmExports.min(10, 10) === 10);

// 测试 sign 函数
console.assert(wasmExports.sign(42) === 1);
console.assert(wasmExports.sign(-17) === -1);
console.assert(wasmExports.sign(0) === 0);

// 测试 clamp 函数
console.assert(wasmExports.clamp(5, 1, 10) === 5);   // 在范围内
console.assert(wasmExports.clamp(-5, 1, 10) === 1);  // 小于最小值
console.assert(wasmExports.clamp(15, 1, 10) === 10); // 大于最大值

;; 更简洁的 min 实现
(func $min_optimized (param $a i32) (param $b i32) (result i32)
  (select
    (local.get $a)
    (local.get $b)
    (i32.lt_s (local.get $a) (local.get $b))))

3. 循环结构实现 (25分)

题目：实现以下循环相关的函数：

1. sum_range(start, end) - 计算从 start 到 end（包含）的整数和
2. find_first_divisor(n) - 找到 n 的第一个大于 1 的因子
3. count_bits(n) - 计算整数 n 的二进制表示中 1 的个数

(module
  ;; 1. 计算范围内整数和
  (func $sum_range (param $start i32) (param $end i32) (result i32)
    (local $sum i32)
    (local $current i32)
    
    ;; 初始化
    (local.set $sum (i32.const 0))
    (local.set $current (local.get $start))
    
    ;; 检查边界条件
    (if (i32.gt_s (local.get $start) (local.get $end))
      (then (return (i32.const 0))))
    
    ;; 循环累加
    (loop $sum_loop
      ;; 累加当前值
      (local.set $sum
        (i32.add (local.get $sum) (local.get $current)))
      
      ;; 检查是否到达结束条件
      (if (i32.eq (local.get $current) (local.get $end))
        (then (br $sum_loop)))  ;; 跳出循环
      
      ;; 递增计数器
      (local.set $current
        (i32.add (local.get $current) (i32.const 1)))
      
      ;; 继续循环
      (br $sum_loop))
    
    local.get $sum)

  ;; 2. 找到第一个大于 1 的因子
  (func $find_first_divisor (param $n i32) (result i32)
    (local $divisor i32)
    
    ;; 处理特殊情况
    (if (i32.le_s (local.get $n) (i32.const 1))
      (then (return (i32.const 0))))  ;; 无效输入
    
    ;; 从 2 开始尝试
    (local.set $divisor (i32.const 2))
    
    (loop $find_loop
      ;; 检查是否已经超过 sqrt(n)
      (if (i32.gt_u
            (i32.mul (local.get $divisor) (local.get $divisor))
            (local.get $n))
        (then (return (local.get $n))))  ;; n 是质数，返回自身
      
      ;; 检查是否整除
      (if (i32.eqz (i32.rem_u (local.get $n) (local.get $divisor)))
        (then (return (local.get $divisor))))  ;; 找到因子
      
      ;; 尝试下一个可能的因子
      (local.set $divisor
        (i32.add (local.get $divisor) (i32.const 1)))
      
      (br $find_loop))
    
    ;; 理论上不会到达这里
    local.get $n)

  ;; 3. 计算二进制中 1 的个数（Brian Kernighan 算法）
  (func $count_bits (param $n i32) (result i32)
    (local $count i32)
    
    (local.set $count (i32.const 0))
    
    ;; 循环直到 n 变为 0
    (loop $count_loop
      (if (i32.eqz (local.get $n))
        (then (br $count_loop)))  ;; 跳出循环
      
      ;; 清除最低位的 1
      (local.set $n
        (i32.and
          (local.get $n)
          (i32.sub (local.get $n) (i32.const 1))))
      
      ;; 计数加 1
      (local.set $count
        (i32.add (local.get $count) (i32.const 1)))
      
      (br $count_loop))
    
    local.get $count)

  ;; 另一种 count_bits 实现（逐位检查）
  (func $count_bits_simple (param $n i32) (result i32)
    (local $count i32)
    
    (local.set $count (i32.const 0))
    
    (loop $bit_loop
      (if (i32.eqz (local.get $n))
        (then (br $bit_loop)))
      
      ;; 检查最低位
      (if (i32.and (local.get $n) (i32.const 1))
        (then
          (local.set $count
            (i32.add (local.get $count) (i32.const 1)))))
      
      ;; 右移一位
      (local.set $n
        (i32.shr_u (local.get $n) (i32.const 1)))
      
      (br $bit_loop))
    
    local.get $count)

  ;; 导出函数
  (export "sum_range" (func $sum_range))
  (export "find_first_divisor" (func $find_first_divisor))
  (export "count_bits" (func $count_bits))
  (export "count_bits_simple" (func $count_bits_simple)))

// 测试 sum_range
console.assert(wasmExports.sum_range(1, 5) === 15);      // 1+2+3+4+5=15
console.assert(wasmExports.sum_range(10, 10) === 10);    // 单个数
console.assert(wasmExports.sum_range(5, 3) === 0);       // 无效范围

// 测试 find_first_divisor
console.assert(wasmExports.find_first_divisor(12) === 2); // 12 = 2*6
console.assert(wasmExports.find_first_divisor(15) === 3); // 15 = 3*5
console.assert(wasmExports.find_first_divisor(17) === 17);// 17 是质数

// 测试 count_bits
console.assert(wasmExports.count_bits(7) === 3);          // 111₂
console.assert(wasmExports.count_bits(8) === 1);          // 1000₂
console.assert(wasmExports.count_bits(255) === 8);        // 11111111₂

// 数学公式验证 sum_range
function mathSumRange(start, end) {
  if (start > end) return 0;
  return (end - start + 1) * (start + end) / 2;
}
console.assert(wasmExports.sum_range(1, 100) === mathSumRange(1, 100));

实践编程题

4. 数组操作 (20分)

题目：实现一个简单的数组排序算法。要求：

1. 实现冒泡排序算法
2. 数组存储在 WebAssembly 线性内存中
3. 提供初始化、排序和显示数组的函数

(module
  ;; 声明内存（1 页 = 64KB）
  (memory (export "memory") 1)
  
  ;; 交换内存中两个位置的值
  (func $swap (param $ptr1 i32) (param $ptr2 i32)
    (local $temp i32)
    
    ;; 读取第一个值
    (local.set $temp (i32.load (local.get $ptr1)))
    
    ;; 第二个值复制到第一个位置
    (i32.store (local.get $ptr1) (i32.load (local.get $ptr2)))
    
    ;; 第一个值复制到第二个位置
    (i32.store (local.get $ptr2) (local.get $temp)))
  
  ;; 初始化数组
  (func $init_array (param $ptr i32) (param $size i32)
    (local $i i32)
    (local $current_ptr i32)
    
    (local.set $i (i32.const 0))
    (local.set $current_ptr (local.get $ptr))
    
    (loop $init_loop
      (if (i32.ge_u (local.get $i) (local.get $size))
        (then (br $init_loop)))
      
      ;; 存储一些测试数据（倒序）
      (i32.store
        (local.get $current_ptr)
        (i32.sub (local.get $size) (local.get $i)))
      
      ;; 移动到下一个位置
      (local.set $current_ptr
        (i32.add (local.get $current_ptr) (i32.const 4)))
      
      (local.set $i
        (i32.add (local.get $i) (i32.const 1)))
      
      (br $init_loop)))
  
  ;; 冒泡排序实现
  (func $bubble_sort (param $ptr i32) (param $size i32)
    (local $i i32)
    (local $j i32)
    (local $ptr_j i32)
    (local $ptr_j_next i32)
    (local $swapped i32)
    
    ;; 外层循环
    (local.set $i (i32.const 0))
    
    (loop $outer_loop
      (if (i32.ge_u (local.get $i) (local.get $size))
        (then (br $outer_loop)))
      
      (local.set $swapped (i32.const 0))
      
      ;; 内层循环
      (local.set $j (i32.const 0))
      
      (loop $inner_loop
        ;; 检查内层循环边界
        (if (i32.ge_u
              (local.get $j)
              (i32.sub
                (i32.sub (local.get $size) (local.get $i))
                (i32.const 1)))
          (then (br $inner_loop)))
        
        ;; 计算当前和下一个元素的指针
        (local.set $ptr_j
          (i32.add
            (local.get $ptr)
            (i32.mul (local.get $j) (i32.const 4))))
        
        (local.set $ptr_j_next
          (i32.add (local.get $ptr_j) (i32.const 4)))
        
        ;; 比较相邻元素
        (if (i32.gt_s
              (i32.load (local.get $ptr_j))
              (i32.load (local.get $ptr_j_next)))
          (then
            ;; 交换元素
            (call $swap (local.get $ptr_j) (local.get $ptr_j_next))
            (local.set $swapped (i32.const 1))))
        
        ;; 内层循环递增
        (local.set $j (i32.add (local.get $j) (i32.const 1)))
        (br $inner_loop))
      
      ;; 如果没有交换，说明已经排序完成
      (if (i32.eqz (local.get $swapped))
        (then (br $outer_loop)))
      
      ;; 外层循环递增
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $outer_loop)))
  
  ;; 获取指定位置的数组元素
  (func $get_element (param $ptr i32) (param $index i32) (result i32)
    (i32.load
      (i32.add
        (local.get $ptr)
        (i32.mul (local.get $index) (i32.const 4)))))
  
  ;; 设置指定位置的数组元素
  (func $set_element (param $ptr i32) (param $index i32) (param $value i32)
    (i32.store
      (i32.add
        (local.get $ptr)
        (i32.mul (local.get $index) (i32.const 4)))
      (local.get $value)))
  
  ;; 导出函数
  (export "init_array" (func $init_array))
  (export "bubble_sort" (func $bubble_sort))
  (export "get_element" (func $get_element))
  (export "set_element" (func $set_element)))

<!DOCTYPE html>
<html>
<head>
    <title>WASM 数组排序测试</title>
</head>
<body>
    <h1>WebAssembly 冒泡排序演示</h1>
    <button onclick="testSort()">测试排序</button>
    <div id="output"></div>

    <script>
        let wasmModule;
        
        async function loadWasm() {
            wasmModule = await WebAssembly.instantiateStreaming(
                fetch('bubble_sort.wasm')
            );
        }
        
        function displayArray(ptr, size, title) {
            const { memory, get_element } = wasmModule.instance.exports;
            const elements = [];
            
            for (let i = 0; i < size; i++) {
                elements.push(get_element(ptr, i));
            }
            
            return `<p><strong>${title}:</strong> [${elements.join(', ')}]</p>`;
        }
        
        async function testSort() {
            if (!wasmModule) await loadWasm();
            
            const { init_array, bubble_sort, set_element } = wasmModule.instance.exports;
            
            const arrayPtr = 0;  // 从内存起始位置开始
            const arraySize = 8;
            
            // 初始化数组（倒序）
            init_array(arrayPtr, arraySize);
            
            let output = '<h3>排序测试结果:</h3>';
            output += displayArray(arrayPtr, arraySize, '排序前');
            
            // 执行排序
            const startTime = performance.now();
            bubble_sort(arrayPtr, arraySize);
            const endTime = performance.now();
            
            output += displayArray(arrayPtr, arraySize, '排序后');
            output += `<p>排序耗时: ${(endTime - startTime).toFixed(4)} ms</p>`;
            
            // 测试自定义数组
            const testData = [64, 34, 25, 12, 22, 11, 90, 5];
            for (let i = 0; i < testData.length; i++) {
                set_element(arrayPtr, i, testData[i]);
            }
            
            output += '<h3>自定义数组测试:</h3>';
            output += displayArray(arrayPtr, testData.length, '排序前');
            
            bubble_sort(arrayPtr, testData.length);
            output += displayArray(arrayPtr, testData.length, '排序后');
            
            document.getElementById('output').innerHTML = output;
        }
        
        loadWasm();
    </script>
</body>
</html>

5. 字符串处理 (20分)

题目：实现基本的字符串操作函数（假设字符串以 null 结尾）：

1. string_length(ptr) - 计算字符串长度
2. string_compare(ptr1, ptr2) - 比较两个字符串
3. string_copy(src, dst) - 复制字符串

(module
  (memory (export "memory") 1)
  
  ;; 计算字符串长度
  (func $string_length (param $ptr i32) (result i32)
    (local $length i32)
    (local $current_ptr i32)
    
    (local.set $length (i32.const 0))
    (local.set $current_ptr (local.get $ptr))
    
    (loop $length_loop
      ;; 检查是否遇到 null 终止符
      (if (i32.eqz (i32.load8_u (local.get $current_ptr)))
        (then (br $length_loop)))
      
      ;; 递增长度和指针
      (local.set $length
        (i32.add (local.get $length) (i32.const 1)))
      (local.set $current_ptr
        (i32.add (local.get $current_ptr) (i32.const 1)))
      
      (br $length_loop))
    
    local.get $length)
  
  ;; 字符串比较
  ;; 返回值: 0=相等, <0=str1<str2, >0=str1>str2
  (func $string_compare (param $ptr1 i32) (param $ptr2 i32) (result i32)
    (local $char1 i32)
    (local $char2 i32)
    
    (loop $compare_loop
      ;; 读取当前字符
      (local.set $char1 (i32.load8_u (local.get $ptr1)))
      (local.set $char2 (i32.load8_u (local.get $ptr2)))
      
      ;; 如果字符不相等，返回差值
      (if (i32.ne (local.get $char1) (local.get $char2))
        (then
          (return
            (i32.sub (local.get $char1) (local.get $char2)))))
      
      ;; 如果遇到字符串结尾，返回 0（相等）
      (if (i32.eqz (local.get $char1))
        (then (return (i32.const 0))))
      
      ;; 移动到下一个字符
      (local.set $ptr1 (i32.add (local.get $ptr1) (i32.const 1)))
      (local.set $ptr2 (i32.add (local.get $ptr2) (i32.const 1)))
      
      (br $compare_loop))
    
    ;; 理论上不会到达这里
    i32.const 0)
  
  ;; 字符串复制
  (func $string_copy (param $src i32) (param $dst i32) (result i32)
    (local $char i32)
    (local $original_dst i32)
    
    ;; 保存原始目标指针
    (local.set $original_dst (local.get $dst))
    
    (loop $copy_loop
      ;; 读取源字符
      (local.set $char (i32.load8_u (local.get $src)))
      
      ;; 写入目标位置
      (i32.store8 (local.get $dst) (local.get $char))
      
      ;; 如果遇到 null 终止符，结束复制
      (if (i32.eqz (local.get $char))
        (then (br $copy_loop)))
      
      ;; 移动指针
      (local.set $src (i32.add (local.get $src) (i32.const 1)))
      (local.set $dst (i32.add (local.get $dst) (i32.const 1)))
      
      (br $copy_loop))
    
    ;; 返回目标字符串指针
    local.get $original_dst)
  
  ;; 字符串连接
  (func $string_concat (param $dst i32) (param $src i32) (result i32)
    (local $dst_end i32)
    (local $original_dst i32)
    
    ;; 保存原始目标指针
    (local.set $original_dst (local.get $dst))
    
    ;; 找到目标字符串的末尾
    (local.set $dst_end (local.get $dst))
    (loop $find_end_loop
      (if (i32.eqz (i32.load8_u (local.get $dst_end)))
        (then (br $find_end_loop)))
      
      (local.set $dst_end
        (i32.add (local.get $dst_end) (i32.const 1)))
      (br $find_end_loop))
    
    ;; 从末尾开始复制源字符串
    (call $string_copy (local.get $src) (local.get $dst_end))
    
    ;; 返回目标字符串指针
    local.get $original_dst)
  
  ;; 在字符串中查找字符
  (func $string_find_char (param $str i32) (param $char i32) (result i32)
    (local $current_char i32)
    (local $index i32)
    
    (local.set $index (i32.const 0))
    
    (loop $find_loop
      (local.set $current_char (i32.load8_u (local.get $str)))
      
      ;; 如果遇到字符串结尾，返回 -1
      (if (i32.eqz (local.get $current_char))
        (then (return (i32.const -1))))
      
      ;; 如果找到目标字符，返回索引
      (if (i32.eq (local.get $current_char) (local.get $char))
        (then (return (local.get $index))))
      
      ;; 移动到下一个字符
      (local.set $str (i32.add (local.get $str) (i32.const 1)))
      (local.set $index (i32.add (local.get $index) (i32.const 1)))
      
      (br $find_loop))
    
    i32.const -1)
  
  ;; 辅助函数：将 JavaScript 字符串写入内存
  (func $write_string (param $ptr i32) (param $char i32)
    (i32.store8 (local.get $ptr) (local.get $char)))
  
  ;; 导出函数
  (export "string_length" (func $string_length))
  (export "string_compare" (func $string_compare))
  (export "string_copy" (func $string_copy))
  (export "string_concat" (func $string_concat))
  (export "string_find_char" (func $string_find_char))
  (export "write_string" (func $write_string)))

async function testStringFunctions() {
    const wasmModule = await WebAssembly.instantiateStreaming(
        fetch('string_ops.wasm')
    );
    
    const { memory, string_length, string_compare, string_copy, 
            string_concat, string_find_char, write_string } = wasmModule.instance.exports;
    
    const memoryView = new Uint8Array(memory.buffer);
    
    // 辅助函数：将 JavaScript 字符串写入 WASM 内存
    function writeStringToMemory(ptr, str) {
        for (let i = 0; i < str.length; i++) {
            memoryView[ptr + i] = str.charCodeAt(i);
        }
        memoryView[ptr + str.length] = 0; // null 终止符
    }
    
    // 辅助函数：从 WASM 内存读取字符串
    function readStringFromMemory(ptr) {
        let str = '';
        let i = 0;
        while (memoryView[ptr + i] !== 0) {
            str += String.fromCharCode(memoryView[ptr + i]);
            i++;
        }
        return str;
    }
    
    // 测试字符串长度
    const str1Ptr = 0;
    const str2Ptr = 100;
    const str3Ptr = 200;
    
    writeStringToMemory(str1Ptr, "Hello");
    writeStringToMemory(str2Ptr, "World");
    writeStringToMemory(str3Ptr, "Hello");
    
    console.log('测试字符串长度:');
    console.log(`"Hello" 长度: ${string_length(str1Ptr)}`); // 应该是 5
    console.log(`"World" 长度: ${string_length(str2Ptr)}`); // 应该是 5
    
    // 测试字符串比较
    console.log('\n测试字符串比较:');
    console.log(`"Hello" vs "World": ${string_compare(str1Ptr, str2Ptr)}`); // < 0
    console.log(`"Hello" vs "Hello": ${string_compare(str1Ptr, str3Ptr)}`); // = 0
    console.log(`"World" vs "Hello": ${string_compare(str2Ptr, str1Ptr)}`); // > 0
    
    // 测试字符串复制
    console.log('\n测试字符串复制:');
    const copyPtr = 300;
    string_copy(str1Ptr, copyPtr);
    console.log(`复制的字符串: "${readStringFromMemory(copyPtr)}"`);
    
    // 测试字符串连接
    console.log('\n测试字符串连接:');
    const concatPtr = 400;
    writeStringToMemory(concatPtr, "Hello ");
    string_concat(concatPtr, str2Ptr);
    console.log(`连接后的字符串: "${readStringFromMemory(concatPtr)}"`);
    
    // 测试字符查找
    console.log('\n测试字符查找:');
    const findIndex = string_find_char(str1Ptr, 'l'.charCodeAt(0));
    console.log(`在 "Hello" 中查找 'l': 索引 ${findIndex}`); // 应该是 2
    
    const notFoundIndex = string_find_char(str1Ptr, 'x'.charCodeAt(0));
    console.log(`在 "Hello" 中查找 'x': 索引 ${notFoundIndex}`); // 应该是 -1
}

testStringFunctions();

评分标准

总分：100分 及格线：60分

🎯 核心要点：

• 掌握 WAT 的基本语法和执行模型
• 理解栈式虚拟机的操作方式
• 能够实现基本的算法和数据结构
• 学会在 WebAssembly 中处理内存操作

第4章 WebAssembly 文本格式 (WAT)

WebAssembly 文本格式（WAT）是 WebAssembly 的人类可读表示形式。本章将深入学习 WAT 的完整语法结构，为掌握 WebAssembly 编程打下坚实基础。

模块结构

4.1.1 模块的基本组成

WebAssembly 模块是 WebAssembly 的基本部署单元，具有以下基本结构：

(module
  ;; 类型定义
  (type ...)
  
  ;; 导入声明
  (import ...)
  
  ;; 函数定义
  (func ...)
  
  ;; 表定义
  (table ...)
  
  ;; 内存定义
  (memory ...)
  
  ;; 全局变量定义
  (global ...)
  
  ;; 导出声明
  (export ...)
  
  ;; 起始函数
  (start ...)
  
  ;; 元素段
  (elem ...)
  
  ;; 数据段
  (data ...))

4.1.2 完整模块示例

;; 完整的计算器模块
(module
  ;; 类型定义：二元运算函数类型
  (type $binary_op (func (param i32 i32) (result i32)))
  
  ;; 导入日志函数
  (import "console" "log" (func $log (param i32)))
  
  ;; 内存定义（1页 = 64KB）
  (memory (export "memory") 1)
  
  ;; 全局计数器
  (global $operation_count (mut i32) (i32.const 0))
  
  ;; 加法函数
  (func $add (type $binary_op)
    ;; 增加操作计数
    (global.set $operation_count
      (i32.add 
        (global.get $operation_count) 
        (i32.const 1)))
    
    ;; 记录操作
    (call $log (global.get $operation_count))
    
    ;; 执行加法
    (i32.add (local.get 0) (local.get 1)))
  
  ;; 减法函数
  (func $subtract (type $binary_op)
    (global.set $operation_count
      (i32.add 
        (global.get $operation_count) 
        (i32.const 1)))
    
    (call $log (global.get $operation_count))
    (i32.sub (local.get 0) (local.get 1)))
  
  ;; 除法函数（带错误检查）
  (func $divide (param $a i32) (param $b i32) (result i32)
    ;; 检查除零错误
    (if (i32.eqz (local.get $b))
      (then
        ;; 记录错误并返回 0
        (call $log (i32.const -1))
        (return (i32.const 0))))
    
    (global.set $operation_count
      (i32.add 
        (global.get $operation_count) 
        (i32.const 1)))
    
    (call $log (global.get $operation_count))
    (i32.div_s (local.get $a) (local.get $b)))
  
  ;; 获取操作计数
  (func $get_count (result i32)
    (global.get $operation_count))
  
  ;; 重置计数器
  (func $reset_count
    (global.set $operation_count (i32.const 0)))
  
  ;; 导出函数
  (export "add" (func $add))
  (export "subtract" (func $subtract))
  (export "divide" (func $divide))
  (export "get_count" (func $get_count))
  (export "reset_count" (func $reset_count))
  
  ;; 初始化函数
  (start $reset_count))

4.1.3 模块验证规则

WAT 模块必须满足以下验证规则：

1. 类型一致性：所有表达式的类型必须匹配
2. 资源存在性：引用的函数、变量等必须已定义
3. 栈平衡：函数结束时栈必须只包含返回值
4. 控制流正确性：所有控制流路径必须类型一致

常见验证错误示例：

;; 错误1: 类型不匹配
(module
  (func $type_error (result i32)
    f32.const 3.14))  ;; 错误：返回 f32 但期望 i32

;; 错误2: 未定义引用
(module
  (func $undefined_error
    call $non_existent))  ;; 错误：函数未定义

;; 错误3: 栈不平衡
(module
  (func $stack_error (param i32) (result i32)
    local.get 0
    local.get 0
    i32.add
    drop))  ;; 错误：栈为空但期望有返回值

函数定义与调用

4.2.1 函数签名详解

函数签名包含参数类型和返回类型：

;; 基本函数签名语法
(func $name (param $p1 type1) (param $p2 type2) ... (result result_type)
  ;; 函数体
)

;; 简化语法（省略参数名）
(func $name (param type1 type2) (result result_type)
  ;; 使用 local.get 0, local.get 1 访问参数
)

;; 多返回值（WebAssembly 2.0+）
(func $multi_return (param i32) (result i32 i32)
  local.get 0
  local.get 0
  i32.const 1
  i32.add)

详细示例：

(module
  ;; 无参数，无返回值
  (func $void_func
    ;; 执行一些副作用操作
    nop)
  
  ;; 单参数，单返回值
  (func $square (param $x i32) (result i32)
    (i32.mul (local.get $x) (local.get $x)))
  
  ;; 多参数，单返回值
  (func $max3 (param $a i32) (param $b i32) (param $c i32) (result i32)
    (local $temp i32)
    
    ;; 计算 max(a, b)
    (local.set $temp
      (if (result i32)
        (i32.gt_s (local.get $a) (local.get $b))
        (then (local.get $a))
        (else (local.get $b))))
    
    ;; 计算 max(temp, c)
    (if (result i32)
      (i32.gt_s (local.get $temp) (local.get $c))
      (then (local.get $temp))
      (else (local.get $c))))
  
  ;; 使用局部变量
  (func $fibonacci (param $n i32) (result i32)
    (local $a i32)
    (local $b i32)
    (local $temp i32)
    (local $i i32)
    
    ;; 处理特殊情况
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (local.get $n))
      (else
        ;; 初始化
        (local.set $a (i32.const 0))
        (local.set $b (i32.const 1))
        (local.set $i (i32.const 2))
        
        ;; 迭代计算
        (loop $fib_loop
          (local.set $temp (i32.add (local.get $a) (local.get $b)))
          (local.set $a (local.get $b))
          (local.set $b (local.get $temp))
          
          (local.set $i (i32.add (local.get $i) (i32.const 1)))
          
          (br_if $fib_loop (i32.lt_s (local.get $i) (local.get $n)))
        )
        
        local.get $b))))

4.2.2 函数调用机制

WebAssembly 支持直接调用和间接调用：

直接调用：

(module
  (func $helper (param i32) (result i32)
    (i32.mul (local.get 0) (i32.const 2)))
  
  (func $caller (param i32) (result i32)
    ;; 直接调用函数
    (call $helper (local.get 0)))
  
  (export "caller" (func $caller)))

间接调用（通过函数表）：

(module
  ;; 定义函数表
  (table $function_table 3 funcref)
  
  ;; 定义一些函数
  (func $add (param i32 i32) (result i32)
    (i32.add (local.get 0) (local.get 1)))
  
  (func $multiply (param i32 i32) (result i32)
    (i32.mul (local.get 0) (local.get 1)))
  
  (func $subtract (param i32 i32) (result i32)
    (i32.sub (local.get 0) (local.get 1)))
  
  ;; 初始化函数表
  (elem (i32.const 0) $add $multiply $subtract)
  
  ;; 间接调用函数
  (func $call_by_index (param $index i32) (param $a i32) (param $b i32) (result i32)
    (call_indirect (type (func (param i32 i32) (result i32)))
      (local.get $a)
      (local.get $b)
      (local.get $index)))
  
  (export "table" (table $function_table))
  (export "call_by_index" (func $call_by_index)))

4.2.3 递归函数

WebAssembly 支持递归调用，但需要注意栈溢出：

(module
  ;; 递归计算阶乘
  (func $factorial_recursive (param $n i32) (result i32)
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (i32.const 1))
      (else
        (i32.mul
          (local.get $n)
          (call $factorial_recursive
            (i32.sub (local.get $n) (i32.const 1)))))))
  
  ;; 尾递归优化版本
  (func $factorial_tail_recursive (param $n i32) (result i32)
    (call $factorial_helper (local.get $n) (i32.const 1)))
  
  (func $factorial_helper (param $n i32) (param $acc i32) (result i32)
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (local.get $acc))
      (else
        (call $factorial_helper
          (i32.sub (local.get $n) (i32.const 1))
          (i32.mul (local.get $n) (local.get $acc))))))
  
  ;; 互相递归示例
  (func $is_even (param $n i32) (result i32)
    (if (result i32)
      (i32.eqz (local.get $n))
      (then (i32.const 1))
      (else (call $is_odd (i32.sub (local.get $n) (i32.const 1))))))
  
  (func $is_odd (param $n i32) (result i32)
    (if (result i32)
      (i32.eqz (local.get $n))
      (then (i32.const 0))
      (else (call $is_even (i32.sub (local.get $n) (i32.const 1))))))
  
  (export "factorial_recursive" (func $factorial_recursive))
  (export "factorial_tail_recursive" (func $factorial_tail_recursive))
  (export "is_even" (func $is_even))
  (export "is_odd" (func $is_odd)))

数据类型系统

4.3.1 数值类型详解

WebAssembly 的核心数值类型及其操作：

整数类型操作：

(module
  (func $integer_operations (param $a i32) (param $b i32) (result i32)
    (local $result i32)
    
    ;; 基本算术运算
    (i32.add (local.get $a) (local.get $b))     ;; 加法
    (i32.sub (local.get $a) (local.get $b))     ;; 减法  
    (i32.mul (local.get $a) (local.get $b))     ;; 乘法
    (i32.div_s (local.get $a) (local.get $b))   ;; 有符号除法
    (i32.div_u (local.get $a) (local.get $b))   ;; 无符号除法
    (i32.rem_s (local.get $a) (local.get $b))   ;; 有符号取余
    (i32.rem_u (local.get $a) (local.get $b))   ;; 无符号取余
    
    ;; 位运算
    (i32.and (local.get $a) (local.get $b))     ;; 按位与
    (i32.or (local.get $a) (local.get $b))      ;; 按位或
    (i32.xor (local.get $a) (local.get $b))     ;; 按位异或
    (i32.shl (local.get $a) (local.get $b))     ;; 左移
    (i32.shr_s (local.get $a) (local.get $b))   ;; 算术右移
    (i32.shr_u (local.get $a) (local.get $b))   ;; 逻辑右移
    (i32.rotl (local.get $a) (local.get $b))    ;; 循环左移
    (i32.rotr (local.get $a) (local.get $b))    ;; 循环右移
    
    ;; 比较运算
    (i32.eq (local.get $a) (local.get $b))      ;; 相等
    (i32.ne (local.get $a) (local.get $b))      ;; 不等
    (i32.lt_s (local.get $a) (local.get $b))    ;; 有符号小于
    (i32.lt_u (local.get $a) (local.get $b))    ;; 无符号小于
    (i32.gt_s (local.get $a) (local.get $b))    ;; 有符号大于
    (i32.gt_u (local.get $a) (local.get $b))    ;; 无符号大于
    (i32.le_s (local.get $a) (local.get $b))    ;; 有符号小于等于
    (i32.le_u (local.get $a) (local.get $b))    ;; 无符号小于等于
    (i32.ge_s (local.get $a) (local.get $b))    ;; 有符号大于等于
    (i32.ge_u (local.get $a) (local.get $b))    ;; 无符号大于等于
    
    ;; 清空栈，只保留最后一个结果
    drop drop drop drop drop drop drop drop
    drop drop drop drop drop drop drop drop
    drop drop drop drop))

浮点数类型操作：

(module
  (func $float_operations (param $a f32) (param $b f32) (result f32)
    ;; 基本算术运算
    (f32.add (local.get $a) (local.get $b))     ;; 加法
    (f32.sub (local.get $a) (local.get $b))     ;; 减法
    (f32.mul (local.get $a) (local.get $b))     ;; 乘法
    (f32.div (local.get $a) (local.get $b))     ;; 除法
    
    ;; 数学函数
    (f32.abs (local.get $a))                    ;; 绝对值
    (f32.neg (local.get $a))                    ;; 取负
    (f32.ceil (local.get $a))                   ;; 向上取整
    (f32.floor (local.get $a))                  ;; 向下取整
    (f32.trunc (local.get $a))                  ;; 截断取整
    (f32.nearest (local.get $a))                ;; 四舍五入
    (f32.sqrt (local.get $a))                   ;; 平方根
    
    ;; 比较运算
    (f32.eq (local.get $a) (local.get $b))      ;; 相等
    (f32.ne (local.get $a) (local.get $b))      ;; 不等
    (f32.lt (local.get $a) (local.get $b))      ;; 小于
    (f32.gt (local.get $a) (local.get $b))      ;; 大于
    (f32.le (local.get $a) (local.get $b))      ;; 小于等于
    (f32.ge (local.get $a) (local.get $b))      ;; 大于等于
    
    ;; 最值运算
    (f32.min (local.get $a) (local.get $b))     ;; 最小值
    (f32.max (local.get $a) (local.get $b))     ;; 最大值
    (f32.copysign (local.get $a) (local.get $b)) ;; 复制符号
    
    ;; 清空栈，只保留最后一个结果
    drop drop drop drop drop drop drop drop
    drop drop drop drop drop drop drop drop
    drop drop))

4.3.2 类型转换

WebAssembly 提供显式的类型转换操作：

(module
  (func $type_conversions (param $i i32) (param $f f32) (result f64)
    ;; 整数转换
    (i64.extend_i32_s (local.get $i))           ;; i32 → i64 (有符号扩展)
    (i64.extend_i32_u (local.get $i))           ;; i32 → i64 (无符号扩展)
    (i32.wrap_i64 (i64.const 0x123456789))     ;; i64 → i32 (截断)
    
    ;; 浮点数转换
    (f64.promote_f32 (local.get $f))            ;; f32 → f64
    (f32.demote_f64 (f64.const 3.14159265359)) ;; f64 → f32
    
    ;; 整数转浮点数
    (f32.convert_i32_s (local.get $i))          ;; i32 → f32 (有符号)
    (f32.convert_i32_u (local.get $i))          ;; i32 → f32 (无符号)
    (f64.convert_i32_s (local.get $i))          ;; i32 → f64 (有符号)
    (f64.convert_i32_u (local.get $i))          ;; i32 → f64 (无符号)
    
    ;; 浮点数转整数
    (i32.trunc_f32_s (local.get $f))            ;; f32 → i32 (有符号截断)
    (i32.trunc_f32_u (local.get $f))            ;; f32 → i32 (无符号截断)
    (i32.trunc_sat_f32_s (local.get $f))        ;; f32 → i32 (饱和截断)
    (i32.trunc_sat_f32_u (local.get $f))        ;; f32 → i32 (饱和截断)
    
    ;; 位模式重新解释
    (f32.reinterpret_i32 (local.get $i))        ;; i32 位 → f32
    (i32.reinterpret_f32 (local.get $f))        ;; f32 位 → i32
    
    ;; 清空栈，返回最后的 f64 值
    drop drop drop drop drop drop drop drop
    drop drop drop drop drop))

4.3.3 常量和字面量

(module
  (func $constants_demo
    ;; 整数常量
    i32.const 42                    ;; 十进制
    i32.const 0x2A                  ;; 十六进制
    i32.const 0o52                  ;; 八进制
    i32.const 0b101010              ;; 二进制
    
    ;; 64位整数常量
    i64.const 1234567890123456789
    i64.const 0x112210F47DE98115
    
    ;; 浮点数常量
    f32.const 3.14159               ;; 十进制
    f32.const 0x1.921FB6p+1         ;; 十六进制（IEEE 754）
    f32.const nan                   ;; NaN
    f32.const inf                   ;; 正无穷
    f32.const -inf                  ;; 负无穷
    
    f64.const 2.718281828459045
    f64.const 0x1.5BF0A8B145769p+1
    
    ;; 特殊值
    f32.const nan:0x400000          ;; 指定 NaN 载荷
    f64.const nan:0x8000000000000   ;; 64位 NaN
    
    ;; 清空栈
    drop drop drop drop drop drop drop drop drop drop))

4.3.4 实用的数据类型函数

(module
  ;; 安全的整数除法（避免除零）
  (func $safe_divide (param $a i32) (param $b i32) (result i32)
    (if (result i32)
      (i32.eqz (local.get $b))
      (then (i32.const 0))  ;; 除零返回 0
      (else (i32.div_s (local.get $a) (local.get $b)))))
  
  ;; 计算两个数的幂
  (func $power (param $base i32) (param $exp i32) (result i32)
    (local $result i32)
    
    (local.set $result (i32.const 1))
    
    (loop $power_loop
      (if (i32.eqz (local.get $exp))
        (then (br $power_loop)))
      
      ;; 如果指数是奇数
      (if (i32.rem_u (local.get $exp) (i32.const 2))
        (then
          (local.set $result
            (i32.mul (local.get $result) (local.get $base)))))
      
      (local.set $base (i32.mul (local.get $base) (local.get $base)))
      (local.set $exp (i32.shr_u (local.get $exp) (i32.const 1)))
      
      (br $power_loop))
    
    local.get $result)
  
  ;; 浮点数相等性比较（考虑精度误差）
  (func $float_equals (param $a f32) (param $b f32) (param $epsilon f32) (result i32)
    (f32.le
      (f32.abs (f32.sub (local.get $a) (local.get $b)))
      (local.get $epsilon)))
  
  ;; 位操作：设置特定位
  (func $set_bit (param $value i32) (param $bit_pos i32) (result i32)
    (i32.or
      (local.get $value)
      (i32.shl (i32.const 1) (local.get $bit_pos))))
  
  ;; 位操作：清除特定位
  (func $clear_bit (param $value i32) (param $bit_pos i32) (result i32)
    (i32.and
      (local.get $value)
      (i32.xor
        (i32.const -1)
        (i32.shl (i32.const 1) (local.get $bit_pos)))))
  
  ;; 位操作：切换特定位
  (func $toggle_bit (param $value i32) (param $bit_pos i32) (result i32)
    (i32.xor
      (local.get $value)
      (i32.shl (i32.const 1) (local.get $bit_pos))))
  
  ;; 检查特定位是否设置
  (func $test_bit (param $value i32) (param $bit_pos i32) (result i32)
    (i32.ne
      (i32.and
        (local.get $value)
        (i32.shl (i32.const 1) (local.get $bit_pos)))
      (i32.const 0)))
  
  (export "safe_divide" (func $safe_divide))
  (export "power" (func $power))
  (export "float_equals" (func $float_equals))
  (export "set_bit" (func $set_bit))
  (export "clear_bit" (func $clear_bit))
  (export "toggle_bit" (func $toggle_bit))
  (export "test_bit" (func $test_bit)))

本章小结

通过本章学习，你已经深入掌握了：

1. 模块结构：完整的 WAT 模块组成和验证规则
2. 函数系统：函数定义、调用机制、递归等高级特性
3. 类型系统：数值类型操作、类型转换、常量定义
4. 实用技巧：位操作、安全编程、性能优化

这些知识为后续学习内存管理、控制流等高级主题奠定了坚实基础。

📝 进入下一步：第5章 内存管理

🎯 重点技能：

• ✅ WAT 完整语法掌握
• ✅ 函数设计和调用
• ✅ 类型系统运用
• ✅ 位操作技巧
• ✅ 代码组织和模块化

第4章 练习题

4.1 模块结构练习

练习 4.1.1 基础模块创建 (10分)

题目: 创建一个完整的 WebAssembly 模块，包含以下要求：

• 导入一个名为 “env.print” 的函数，接受 i32 参数
• 定义一个内存段，大小为 1 页
• 实现一个名为 “hello” 的函数，调用导入的 print 函数输出数字 42
• 导出 “hello” 函数和内存

(module
  ;; 导入环境函数
  (import "env" "print" (func $print (param i32)))
  
  ;; 定义内存
  (memory (export "memory") 1)
  
  ;; 实现 hello 函数
  (func $hello
    (call $print (i32.const 42)))
  
  ;; 导出函数
  (export "hello" (func $hello)))

练习 4.1.2 模块验证错误修复 (15分)

题目: 以下 WAT 代码包含多个验证错误，请找出并修复所有错误：

(module
  (func $broken (result i32)
    f32.const 3.14
    i32.add))

(module
  (func $fixed (result i32)
    i32.const 42))

(module
  (func $fixed (result i32)
    f32.const 3.14
    i32.trunc_f32_s))

(module
  (func $fixed (result i32)
    i32.const 10
    i32.const 32
    i32.add))

练习 4.1.3 复杂模块设计 (20分)

题目: 设计一个数学运算库模块，要求：

• 定义一个表示二元运算的类型
• 实现加法、减法、乘法、除法四个函数
• 使用全局变量记录运算次数
• 提供重置计数器的函数
• 所有运算函数使用相同的类型签名

(module
  ;; 定义二元运算类型
  (type $binary_op (func (param i32 i32) (result i32)))
  
  ;; 全局运算计数器
  (global $operation_count (mut i32) (i32.const 0))
  
  ;; 递增计数器的辅助函数
  (func $increment_count
    (global.set $operation_count
      (i32.add (global.get $operation_count) (i32.const 1))))
  
  ;; 加法函数
  (func $add (type $binary_op)
    (call $increment_count)
    (i32.add (local.get 0) (local.get 1)))
  
  ;; 减法函数
  (func $subtract (type $binary_op)
    (call $increment_count)
    (i32.sub (local.get 0) (local.get 1)))
  
  ;; 乘法函数
  (func $multiply (type $binary_op)
    (call $increment_count)
    (i32.mul (local.get 0) (local.get 1)))
  
  ;; 除法函数（带除零检查）
  (func $divide (type $binary_op)
    (call $increment_count)
    (if (result i32)
      (i32.eqz (local.get 1))
      (then (i32.const 0))  ;; 除零返回0
      (else (i32.div_s (local.get 0) (local.get 1)))))
  
  ;; 获取运算次数
  (func $get_count (result i32)
    (global.get $operation_count))
  
  ;; 重置计数器
  (func $reset_count
    (global.set $operation_count (i32.const 0)))
  
  ;; 导出函数
  (export "add" (func $add))
  (export "subtract" (func $subtract))
  (export "multiply" (func $multiply))
  (export "divide" (func $divide))
  (export "get_count" (func $get_count))
  (export "reset_count" (func $reset_count)))

4.2 函数定义与调用练习

练习 4.2.1 多参数函数 (10分)

题目: 实现一个函数 calculate_average，计算三个整数的平均值（返回整数）。

(module
  (func $calculate_average (param $a i32) (param $b i32) (param $c i32) (result i32)
    ;; 计算总和
    (i32.add
      (i32.add (local.get $a) (local.get $b))
      (local.get $c))
    ;; 除以3
    (i32.div_s (i32.const 3)))
  
  (export "calculate_average" (func $calculate_average)))

(module
  (func $calculate_average (param $a i32) (param $b i32) (param $c i32) (result i32)
    (local $sum i32)
    
    ;; 计算总和
    (local.set $sum
      (i32.add
        (i32.add (local.get $a) (local.get $b))
        (local.get $c)))
    
    ;; 返回平均值
    (i32.div_s (local.get $sum) (i32.const 3)))
  
  (export "calculate_average" (func $calculate_average)))

练习 4.2.2 递归函数实现 (15分)

题目: 实现递归和迭代两个版本的斐波那契数列计算函数。

(module
  (func $fibonacci_recursive (param $n i32) (result i32)
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (local.get $n))
      (else
        (i32.add
          (call $fibonacci_recursive
            (i32.sub (local.get $n) (i32.const 1)))
          (call $fibonacci_recursive
            (i32.sub (local.get $n) (i32.const 2)))))))
  
  (export "fibonacci_recursive" (func $fibonacci_recursive)))

(module
  (func $fibonacci_iterative (param $n i32) (result i32)
    (local $a i32)
    (local $b i32)
    (local $temp i32)
    (local $i i32)
    
    ;; 处理边界情况
    (if (result i32)
      (i32.le_s (local.get $n) (i32.const 1))
      (then (local.get $n))
      (else
        ;; 初始化
        (local.set $a (i32.const 0))
        (local.set $b (i32.const 1))
        (local.set $i (i32.const 2))
        
        ;; 迭代计算
        (loop $fib_loop
          ;; temp = a + b
          (local.set $temp (i32.add (local.get $a) (local.get $b)))
          ;; a = b
          (local.set $a (local.get $b))
          ;; b = temp
          (local.set $b (local.get $temp))
          
          ;; i++
          (local.set $i (i32.add (local.get $i) (i32.const 1)))
          
          ;; 继续循环条件
          (br_if $fib_loop (i32.le_s (local.get $i) (local.get $n))))
        
        local.get $b)))
  
  (export "fibonacci_iterative" (func $fibonacci_iterative)))

练习 4.2.3 间接调用实现 (20分)

题目: 创建一个计算器，使用函数表实现间接调用：

• 定义加、减、乘、除四个操作函数
• 创建函数表并初始化
• 实现一个 calculate 函数，根据操作码调用对应的运算

(module
  ;; 定义二元运算类型
  (type $binary_op (func (param i32 i32) (result i32)))
  
  ;; 定义函数表，存储4个函数
  (table $op_table 4 funcref)
  
  ;; 加法函数
  (func $add (type $binary_op)
    (i32.add (local.get 0) (local.get 1)))
  
  ;; 减法函数
  (func $sub (type $binary_op)
    (i32.sub (local.get 0) (local.get 1)))
  
  ;; 乘法函数
  (func $mul (type $binary_op)
    (i32.mul (local.get 0) (local.get 1)))
  
  ;; 除法函数（带安全检查）
  (func $div (type $binary_op)
    (if (result i32)
      (i32.eqz (local.get 1))
      (then (i32.const 0))
      (else (i32.div_s (local.get 0) (local.get 1)))))
  
  ;; 初始化函数表
  (elem (i32.const 0) $add $sub $mul $div)
  
  ;; 计算器主函数
  ;; op: 0=加法, 1=减法, 2=乘法, 3=除法
  (func $calculate (param $op i32) (param $a i32) (param $b i32) (result i32)
    ;; 检查操作码范围
    (if (result i32)
      (i32.or
        (i32.lt_s (local.get $op) (i32.const 0))
        (i32.ge_s (local.get $op) (i32.const 4)))
      (then (i32.const 0))  ;; 无效操作返回0
      (else
        ;; 间接调用
        (call_indirect (type $binary_op)
          (local.get $a)
          (local.get $b)
          (local.get $op)))))
  
  ;; 便利函数
  (func $add_values (param $a i32) (param $b i32) (result i32)
    (call $calculate (i32.const 0) (local.get $a) (local.get $b)))
  
  (func $subtract_values (param $a i32) (param $b i32) (result i32)
    (call $calculate (i32.const 1) (local.get $a) (local.get $b)))
  
  (func $multiply_values (param $a i32) (param $b i32) (result i32)
    (call $calculate (i32.const 2) (local.get $a) (local.get $b)))
  
  (func $divide_values (param $a i32) (param $b i32) (result i32)
    (call $calculate (i32.const 3) (local.get $a) (local.get $b)))
  
  ;; 导出函数
  (export "calculate" (func $calculate))
  (export "add" (func $add_values))
  (export "subtract" (func $subtract_values))
  (export "multiply" (func $multiply_values))
  (export "divide" (func $divide_values))
  (export "table" (table $op_table)))

// JavaScript 调用示例
const result1 = instance.exports.calculate(0, 10, 5); // 加法: 15
const result2 = instance.exports.calculate(3, 10, 2); // 除法: 5
const result3 = instance.exports.add(10, 5);          // 便利函数: 15

4.3 数据类型系统练习

练习 4.3.1 类型转换综合 (15分)

题目: 实现一个类型转换工具集，包含以下函数：

• int_to_float: 将整数转换为浮点数
• float_to_int_safe: 安全地将浮点数转换为整数（处理溢出）
• bits_to_float: 将整数位模式重新解释为浮点数
• float_to_bits: 将浮点数位模式重新解释为整数

(module
  ;; 整数转浮点数
  (func $int_to_float (param $value i32) (result f32)
    (f32.convert_i32_s (local.get $value)))
  
  ;; 安全的浮点数转整数
  (func $float_to_int_safe (param $value f32) (result i32)
    (local $result i32)
    
    ;; 检查是否为 NaN
    (if (f32.ne (local.get $value) (local.get $value))
      (then (return (i32.const 0))))
    
    ;; 检查是否为无穷大
    (if (f32.eq (local.get $value) (f32.const inf))
      (then (return (i32.const 2147483647))))  ;; i32 最大值
    
    (if (f32.eq (local.get $value) (f32.const -inf))
      (then (return (i32.const -2147483648)))) ;; i32 最小值
    
    ;; 检查溢出范围
    (if (f32.gt (local.get $value) (f32.const 2147483647.0))
      (then (return (i32.const 2147483647))))
    
    (if (f32.lt (local.get $value) (f32.const -2147483648.0))
      (then (return (i32.const -2147483648))))
    
    ;; 安全转换
    (i32.trunc_sat_f32_s (local.get $value)))
  
  ;; 位模式重新解释：i32 → f32
  (func $bits_to_float (param $bits i32) (result f32)
    (f32.reinterpret_i32 (local.get $bits)))
  
  ;; 位模式重新解释：f32 → i32
  (func $float_to_bits (param $value f32) (result i32)
    (i32.reinterpret_f32 (local.get $value)))
  
  ;; 演示函数：分析浮点数的组成部分
  (func $analyze_float (param $value f32) (param $sign_ptr i32) (param $exp_ptr i32) (param $frac_ptr i32)
    (local $bits i32)
    (local $sign i32)
    (local $exponent i32)
    (local $fraction i32)
    
    ;; 获取位模式
    (local.set $bits (call $float_to_bits (local.get $value)))
    
    ;; 提取符号位（第31位）
    (local.set $sign (i32.shr_u (local.get $bits) (i32.const 31)))
    
    ;; 提取指数（第30-23位）
    (local.set $exponent
      (i32.and
        (i32.shr_u (local.get $bits) (i32.const 23))
        (i32.const 0xFF)))
    
    ;; 提取尾数（第22-0位）
    (local.set $fraction
      (i32.and (local.get $bits) (i32.const 0x7FFFFF)))
    
    ;; 存储结果（假设内存已分配）
    (i32.store (local.get $sign_ptr) (local.get $sign))
    (i32.store (local.get $exp_ptr) (local.get $exponent))
    (i32.store (local.get $frac_ptr) (local.get $fraction)))
  
  ;; 内存用于演示
  (memory (export "memory") 1)
  
  ;; 导出函数
  (export "int_to_float" (func $int_to_float))
  (export "float_to_int_safe" (func $float_to_int_safe))
  (export "bits_to_float" (func $bits_to_float))
  (export "float_to_bits" (func $float_to_bits))
  (export "analyze_float" (func $analyze_float)))

// JavaScript 测试代码
const exports = instance.exports;

// 测试基本转换
console.log(exports.int_to_float(42));        // 42.0
console.log(exports.float_to_int_safe(3.14)); // 3

// 测试特殊值
console.log(exports.float_to_int_safe(NaN));      // 0
console.log(exports.float_to_int_safe(Infinity)); // 2147483647

// 测试位模式操作
const pi_bits = exports.float_to_bits(3.14159);
console.log(pi_bits.toString(16)); // 显示十六进制位模式
console.log(exports.bits_to_float(pi_bits)); // 应该等于 3.14159

练习 4.3.2 位操作实战 (20分)

题目: 实现一个位操作工具库，支持：

• 位字段操作（设置、清除、测试多个连续位）
• 字节序转换（大端⇄小端）
• 简单的位运算加密（XOR 密码）
• 计算整数中设置位的数量（popcount）

(module
  ;; 设置位字段（从 start_bit 开始的 num_bits 位设置为 value）
  (func $set_bit_field (param $original i32) (param $start_bit i32) (param $num_bits i32) (param $value i32) (result i32)
    (local $mask i32)
    (local $shifted_value i32)
    
    ;; 创建掩码：(1 << num_bits) - 1
    (local.set $mask
      (i32.sub
        (i32.shl (i32.const 1) (local.get $num_bits))
        (i32.const 1)))
    
    ;; 限制 value 到 mask 范围内
    (local.set $shifted_value
      (i32.shl
        (i32.and (local.get $value) (local.get $mask))
        (local.get $start_bit)))
    
    ;; 将 mask 移动到正确位置
    (local.set $mask (i32.shl (local.get $mask) (local.get $start_bit)))
    
    ;; 清除原始值中的目标位，然后设置新值
    (i32.or
      (i32.and (local.get $original) (i32.xor (local.get $mask) (i32.const -1)))
      (local.get $shifted_value)))
  
  ;; 获取位字段值
  (func $get_bit_field (param $value i32) (param $start_bit i32) (param $num_bits i32) (result i32)
    (local $mask i32)
    
    ;; 创建掩码
    (local.set $mask
      (i32.sub
        (i32.shl (i32.const 1) (local.get $num_bits))
        (i32.const 1)))
    
    ;; 右移并应用掩码
    (i32.and
      (i32.shr_u (local.get $value) (local.get $start_bit))
      (local.get $mask)))
  
  ;; 字节序转换（32位）
  (func $byte_swap_32 (param $value i32) (result i32)
    (i32.or
      (i32.or
        (i32.shl (i32.and (local.get $value) (i32.const 0xFF)) (i32.const 24))
        (i32.shl (i32.and (local.get $value) (i32.const 0xFF00)) (i32.const 8)))
      (i32.or
        (i32.shr_u (i32.and (local.get $value) (i32.const 0xFF0000)) (i32.const 8))
        (i32.shr_u (i32.and (local.get $value) (i32.const 0xFF000000)) (i32.const 24)))))
  
  ;; XOR 加密/解密
  (func $xor_encrypt (param $data_ptr i32) (param $key_ptr i32) (param $length i32)
    (local $i i32)
    (local $data_byte i32)
    (local $key_byte i32)
    (local $key_length i32)
    
    ;; 假设密钥长度为4字节
    (local.set $key_length (i32.const 4))
    
    (loop $encrypt_loop
      ;; 检查是否完成
      (br_if 1 (i32.ge_u (local.get $i) (local.get $length)))
      
      ;; 读取数据字节
      (local.set $data_byte
        (i32.load8_u
          (i32.add (local.get $data_ptr) (local.get $i))))
      
      ;; 读取密钥字节（循环使用密钥）
      (local.set $key_byte
        (i32.load8_u
          (i32.add
            (local.get $key_ptr)
            (i32.rem_u (local.get $i) (local.get $key_length)))))
      
      ;; XOR 操作并写回
      (i32.store8
        (i32.add (local.get $data_ptr) (local.get $i))
        (i32.xor (local.get $data_byte) (local.get $key_byte)))
      
      ;; 递增计数器
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $encrypt_loop)))
  
  ;; 计算设置位数量（popcount）
  (func $popcount (param $value i32) (result i32)
    (local $count i32)
    (local $temp i32)
    
    (local.set $temp (local.get $value))
    
    (loop $count_loop
      ;; 如果 temp 为 0，退出循环
      (br_if 1 (i32.eqz (local.get $temp)))
      
      ;; temp = temp & (temp - 1) 清除最低位的1
      (local.set $temp
        (i32.and
          (local.get $temp)
          (i32.sub (local.get $temp) (i32.const 1))))
      
      ;; 递增计数
      (local.set $count (i32.add (local.get $count) (i32.const 1)))
      
      (br $count_loop))
    
    local.get $count)
  
  ;; 快速 popcount（使用位操作技巧）
  (func $popcount_fast (param $value i32) (result i32)
    (local $temp i32)
    
    (local.set $temp (local.get $value))
    
    ;; Brian Kernighan's algorithm 的优化版本
    ;; 每次迭代清除一个设置位
    
    ;; 使用并行位计数技术
    ;; temp = temp - ((temp >> 1) & 0x55555555)
    (local.set $temp
      (i32.sub
        (local.get $temp)
        (i32.and
          (i32.shr_u (local.get $temp) (i32.const 1))
          (i32.const 0x55555555))))
    
    ;; temp = (temp & 0x33333333) + ((temp >> 2) & 0x33333333)
    (local.set $temp
      (i32.add
        (i32.and (local.get $temp) (i32.const 0x33333333))
        (i32.and
          (i32.shr_u (local.get $temp) (i32.const 2))
          (i32.const 0x33333333))))
    
    ;; temp = (temp + (temp >> 4)) & 0x0F0F0F0F
    (local.set $temp
      (i32.and
        (i32.add
          (local.get $temp)
          (i32.shr_u (local.get $temp) (i32.const 4)))
        (i32.const 0x0F0F0F0F)))
    
    ;; temp = temp + (temp >> 8)
    (local.set $temp
      (i32.add
        (local.get $temp)
        (i32.shr_u (local.get $temp) (i32.const 8))))
    
    ;; temp = temp + (temp >> 16)
    (local.set $temp
      (i32.add
        (local.get $temp)
        (i32.shr_u (local.get $temp) (i32.const 16))))
    
    ;; 返回低8位
    (i32.and (local.get $temp) (i32.const 0x3F)))
  
  ;; 内存
  (memory (export "memory") 1)
  
  ;; 导出函数
  (export "set_bit_field" (func $set_bit_field))
  (export "get_bit_field" (func $get_bit_field))
  (export "byte_swap_32" (func $byte_swap_32))
  (export "xor_encrypt" (func $xor_encrypt))
  (export "popcount" (func $popcount))
  (export "popcount_fast" (func $popcount_fast)))

const exports = instance.exports;
const memory = new Uint8Array(exports.memory.buffer);

// 测试位字段操作
let value = 0;
value = exports.set_bit_field(value, 4, 4, 0b1010); // 在第4-7位设置值1010
console.log(value.toString(2)); // 应该显示 10100000

const field_value = exports.get_bit_field(value, 4, 4);
console.log(field_value.toString(2)); // 应该显示 1010

// 测试字节序转换
const original = 0x12345678;
const swapped = exports.byte_swap_32(original);
console.log(swapped.toString(16)); // 应该显示 78563412

// 测试 popcount
console.log(exports.popcount(0b11010110)); // 应该是 5
console.log(exports.popcount_fast(0b11010110)); // 应该也是 5

4.4 综合实战练习

练习 4.4.1 字符串处理库 (25分)

题目: 实现一个基础的字符串处理库，包含：

• 字符串长度计算
• 字符串比较
• 字符串查找（子串搜索）
• 字符串复制
• 字符串反转

(module
  ;; 内存用于字符串操作
  (memory (export "memory") 1)
  
  ;; 计算字符串长度（以null结尾）
  (func $strlen (param $str_ptr i32) (result i32)
    (local $length i32)
    
    (loop $count_loop
      ;; 检查当前字符是否为null
      (br_if 1 (i32.eqz (i32.load8_u (i32.add (local.get $str_ptr) (local.get $length)))))
      
      ;; 增加长度计数
      (local.set $length (i32.add (local.get $length) (i32.const 1)))
      
      (br $count_loop))
    
    local.get $length)
  
  ;; 字符串比较
  (func $strcmp (param $str1_ptr i32) (param $str2_ptr i32) (result i32)
    (local $i i32)
    (local $c1 i32)
    (local $c2 i32)
    
    (loop $compare_loop
      ;; 读取当前字符
      (local.set $c1 (i32.load8_u (i32.add (local.get $str1_ptr) (local.get $i))))
      (local.set $c2 (i32.load8_u (i32.add (local.get $str2_ptr) (local.get $i))))
      
      ;; 如果字符不相等
      (if (i32.ne (local.get $c1) (local.get $c2))
        (then
          (return
            (if (result i32)
              (i32.lt_u (local.get $c1) (local.get $c2))
              (then (i32.const -1))
              (else (i32.const 1))))))
      
      ;; 如果到达字符串末尾
      (if (i32.eqz (local.get $c1))
        (then (return (i32.const 0))))
      
      ;; 移动到下一个字符
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $compare_loop)))
  
  ;; 字符串查找（KMP算法简化版）
  (func $strstr (param $haystack_ptr i32) (param $needle_ptr i32) (result i32)
    (local $haystack_len i32)
    (local $needle_len i32)
    (local $i i32)
    (local $j i32)
    (local $match i32)
    
    ;; 获取字符串长度
    (local.set $haystack_len (call $strlen (local.get $haystack_ptr)))
    (local.set $needle_len (call $strlen (local.get $needle_ptr)))
    
    ;; 如果needle为空，返回haystack开始位置
    (if (i32.eqz (local.get $needle_len))
      (then (return (local.get $haystack_ptr))))
    
    ;; 如果needle比haystack长，返回null
    (if (i32.gt_u (local.get $needle_len) (local.get $haystack_len))
      (then (return (i32.const 0))))
    
    ;; 朴素字符串搜索
    (loop $search_loop
      ;; 检查是否超出搜索范围
      (br_if 1 (i32.gt_u
        (i32.add (local.get $i) (local.get $needle_len))
        (local.get $haystack_len)))
      
      ;; 比较子串
      (local.set $match (i32.const 1))
      (local.set $j (i32.const 0))
      
      (loop $match_loop
        (br_if 1 (i32.ge_u (local.get $j) (local.get $needle_len)))
        
        (if (i32.ne
          (i32.load8_u (i32.add (local.get $haystack_ptr) (i32.add (local.get $i) (local.get $j))))
          (i32.load8_u (i32.add (local.get $needle_ptr) (local.get $j))))
          (then
            (local.set $match (i32.const 0))
            (br 1)))
        
        (local.set $j (i32.add (local.get $j) (i32.const 1)))
        (br $match_loop))
      
      ;; 如果找到匹配
      (if (local.get $match)
        (then (return (i32.add (local.get $haystack_ptr) (local.get $i)))))
      
      ;; 移动到下一个位置
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $search_loop))
    
    ;; 未找到，返回null
    i32.const 0)
  
  ;; 字符串复制
  (func $strcpy (param $dest_ptr i32) (param $src_ptr i32) (result i32)
    (local $i i32)
    (local $c i32)
    
    (loop $copy_loop
      ;; 读取源字符
      (local.set $c (i32.load8_u (i32.add (local.get $src_ptr) (local.get $i))))
      
      ;; 写入目标位置
      (i32.store8 (i32.add (local.get $dest_ptr) (local.get $i)) (local.get $c))
      
      ;; 如果是null终止符，结束复制
      (if (i32.eqz (local.get $c))
        (then (return (local.get $dest_ptr))))
      
      ;; 移动到下一个字符
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $copy_loop)))
  
  ;; 字符串反转
  (func $strrev (param $str_ptr i32) (result i32)
    (local $length i32)
    (local $left i32)
    (local $right i32)
    (local $temp i32)
    
    ;; 获取字符串长度
    (local.set $length (call $strlen (local.get $str_ptr)))
    
    ;; 如果长度小于2，无需反转
    (if (i32.lt_u (local.get $length) (i32.const 2))
      (then (return (local.get $str_ptr))))
    
    ;; 设置左右指针
    (local.set $left (i32.const 0))
    (local.set $right (i32.sub (local.get $length) (i32.const 1)))
    
    ;; 反转字符
    (loop $reverse_loop
      ;; 如果左指针大于等于右指针，结束
      (br_if 1 (i32.ge_u (local.get $left) (local.get $right)))
      
      ;; 交换字符
      (local.set $temp
        (i32.load8_u (i32.add (local.get $str_ptr) (local.get $left))))
      
      (i32.store8
        (i32.add (local.get $str_ptr) (local.get $left))
        (i32.load8_u (i32.add (local.get $str_ptr) (local.get $right))))
      
      (i32.store8
        (i32.add (local.get $str_ptr) (local.get $right))
        (local.get $temp))
      
      ;; 移动指针
      (local.set $left (i32.add (local.get $left) (i32.const 1)))
      (local.set $right (i32.sub (local.get $right) (i32.const 1)))
      
      (br $reverse_loop))
    
    local.get $str_ptr)
  
  ;; 导出函数
  (export "strlen" (func $strlen))
  (export "strcmp" (func $strcmp))
  (export "strstr" (func $strstr))
  (export "strcpy" (func $strcpy))
  (export "strrev" (func $strrev)))

const exports = instance.exports;
const memory = new Uint8Array(exports.memory.buffer);

// 辅助函数：将字符串写入内存
function writeString(ptr, str) {
  for (let i = 0; i < str.length; i++) {
    memory[ptr + i] = str.charCodeAt(i);
  }
  memory[ptr + str.length] = 0; // null终止符
}

// 辅助函数：从内存读取字符串
function readString(ptr) {
  let result = '';
  let i = 0;
  while (memory[ptr + i] !== 0) {
    result += String.fromCharCode(memory[ptr + i]);
    i++;
  }
  return result;
}

// 测试字符串操作
writeString(0, "Hello, World!");
writeString(100, "World");
writeString(200, "Hello");

console.log("Length:", exports.strlen(0)); // 13
console.log("Compare:", exports.strcmp(0, 200)); // > 0
console.log("Find:", exports.strstr(0, 100)); // 应该找到 "World"

// 测试字符串复制和反转
exports.strcpy(300, 0);
console.log("Copied:", readString(300)); // "Hello, World!"

exports.strrev(300);
console.log("Reversed:", readString(300)); // "!dlroW ,olleH"

练习 4.4.2 数学函数库实现 (30分)

题目: 创建一个数学函数库，实现以下功能：

• 基础数学函数（绝对值、最大值、最小值）
• 幂运算（整数和浮点数版本）
• 三角函数近似（sin, cos 使用泰勒级数）
• 平方根近似（牛顿法）
• 随机数生成器（线性同余生成器）

(module
  ;; 全局随机数种子
  (global $rand_seed (mut i32) (i32.const 1))
  
  ;; 常量定义
  (global $PI f32 (f32.const 3.14159265359))
  (global $E f32 (f32.const 2.71828182846))
  
  ;; 内存
  (memory (export "memory") 1)
  
  ;; ===== 基础数学函数 =====
  
  ;; 整数绝对值
  (func $abs_i32 (param $x i32) (result i32)
    (if (result i32)
      (i32.lt_s (local.get $x) (i32.const 0))
      (then (i32.sub (i32.const 0) (local.get $x)))
      (else (local.get $x))))
  
  ;; 浮点数绝对值
  (func $abs_f32 (param $x f32) (result f32)
    (f32.abs (local.get $x)))
  
  ;; 整数最大值
  (func $max_i32 (param $a i32) (param $b i32) (result i32)
    (if (result i32)
      (i32.gt_s (local.get $a) (local.get $b))
      (then (local.get $a))
      (else (local.get $b))))
  
  ;; 整数最小值
  (func $min_i32 (param $a i32) (param $b i32) (result i32)
    (if (result i32)
      (i32.lt_s (local.get $a) (local.get $b))
      (then (local.get $a))
      (else (local.get $b))))
  
  ;; 浮点数最大值
  (func $max_f32 (param $a f32) (param $b f32) (result f32)
    (f32.max (local.get $a) (local.get $b)))
  
  ;; 浮点数最小值
  (func $min_f32 (param $a f32) (param $b f32) (result f32)
    (f32.min (local.get $a) (local.get $b)))
  
  ;; ===== 幂运算 =====
  
  ;; 整数幂运算（快速幂算法）
  (func $pow_i32 (param $base i32) (param $exp i32) (result i32)
    (local $result i32)
    (local $current_base i32)
    (local $current_exp i32)
    
    ;; 处理负指数
    (if (i32.lt_s (local.get $exp) (i32.const 0))
      (then (return (i32.const 0))))
    
    ;; 初始化
    (local.set $result (i32.const 1))
    (local.set $current_base (local.get $base))
    (local.set $current_exp (local.get $exp))
    
    (loop $power_loop
      ;; 如果指数为0，结束
      (br_if 1 (i32.eqz (local.get $current_exp)))
      
      ;; 如果指数是奇数
      (if (i32.rem_u (local.get $current_exp) (i32.const 2))
        (then
          (local.set $result
            (i32.mul (local.get $result) (local.get $current_base)))))
      
      ;; 平方底数，除以2指数
      (local.set $current_base
        (i32.mul (local.get $current_base) (local.get $current_base)))
      (local.set $current_exp
        (i32.shr_u (local.get $current_exp) (i32.const 1)))
      
      (br $power_loop))
    
    local.get $result)
  
  ;; 浮点数幂运算（简化版，仅支持整数指数）
  (func $pow_f32 (param $base f32) (param $exp i32) (result f32)
    (local $result f32)
    (local $current_base f32)
    (local $current_exp i32)
    (local $is_negative i32)
    
    ;; 处理负指数
    (local.set $is_negative (i32.lt_s (local.get $exp) (i32.const 0)))
    (local.set $current_exp
      (if (result i32)
        (local.get $is_negative)
        (then (i32.sub (i32.const 0) (local.get $exp)))
        (else (local.get $exp))))
    
    ;; 初始化
    (local.set $result (f32.const 1.0))
    (local.set $current_base (local.get $base))
    
    (loop $power_loop
      ;; 如果指数为0，结束
      (br_if 1 (i32.eqz (local.get $current_exp)))
      
      ;; 如果指数是奇数
      (if (i32.rem_u (local.get $current_exp) (i32.const 2))
        (then
          (local.set $result
            (f32.mul (local.get $result) (local.get $current_base)))))
      
      ;; 平方底数，除以2指数
      (local.set $current_base
        (f32.mul (local.get $current_base) (local.get $current_base)))
      (local.set $current_exp
        (i32.shr_u (local.get $current_exp) (i32.const 1)))
      
      (br $power_loop))
    
    ;; 处理负指数结果
    (if (result f32)
      (local.get $is_negative)
      (then (f32.div (f32.const 1.0) (local.get $result)))
      (else (local.get $result))))
  
  ;; ===== 平方根（牛顿法） =====
  
  (func $sqrt_f32 (param $x f32) (result f32)
    (local $guess f32)
    (local $new_guess f32)
    (local $diff f32)
    (local $iterations i32)
    
    ;; 处理特殊情况
    (if (f32.lt (local.get $x) (f32.const 0.0))
      (then (return (f32.const nan))))
    
    (if (f32.eq (local.get $x) (f32.const 0.0))
      (then (return (f32.const 0.0))))
    
    ;; 初始猜测值
    (local.set $guess (f32.div (local.get $x) (f32.const 2.0)))
    
    ;; 牛顿迭代法：x_{n+1} = (x_n + a/x_n) / 2
    (loop $newton_loop
      ;; 计算新的猜测值
      (local.set $new_guess
        (f32.div
          (f32.add
            (local.get $guess)
            (f32.div (local.get $x) (local.get $guess)))
          (f32.const 2.0)))
      
      ;; 计算差值
      (local.set $diff
        (f32.abs (f32.sub (local.get $new_guess) (local.get $guess))))
      
      ;; 更新猜测值
      (local.set $guess (local.get $new_guess))
      
      ;; 增加迭代次数
      (local.set $iterations (i32.add (local.get $iterations) (i32.const 1)))
      
      ;; 检查收敛条件或最大迭代次数
      (br_if 1 (f32.lt (local.get $diff) (f32.const 0.000001)))
      (br_if 1 (i32.gt_s (local.get $iterations) (i32.const 20)))
      
      (br $newton_loop))
    
    local.get $guess)
  
  ;; ===== 三角函数（泰勒级数） =====
  
  ;; 阶乘函数（辅助函数）
  (func $factorial (param $n i32) (result f32)
    (local $result f32)
    (local $i i32)
    
    (local.set $result (f32.const 1.0))
    (local.set $i (i32.const 1))
    
    (loop $fact_loop
      (br_if 1 (i32.gt_s (local.get $i) (local.get $n)))
      
      (local.set $result
        (f32.mul (local.get $result) (f32.convert_i32_s (local.get $i))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $fact_loop))
    
    local.get $result)
  
  ;; 正弦函数（泰勒级数近似）
  (func $sin_f32 (param $x f32) (result f32)
    (local $result f32)
    (local $term f32)
    (local $x_power f32)
    (local $sign f32)
    (local $i i32)
    
    ;; 将角度标准化到 [-π, π] 范围
    (local.set $x
      (f32.sub
        (local.get $x)
        (f32.mul
          (f32.const 6.28318530718)  ;; 2π
          (f32.floor (f32.div (local.get $x) (f32.const 6.28318530718))))))
    
    (local.set $result (local.get $x))
    (local.set $x_power (local.get $x))
    (local.set $sign (f32.const -1.0))
    
    ;; 泰勒级数：sin(x) = x - x³/3! + x⁵/5! - x⁷/7! + ...
    (loop $sin_loop
      (br_if 1 (i32.gt_s (local.get $i) (i32.const 10)))  ;; 计算前10项
      
      ;; 计算 x^(2n+3)
      (local.set $x_power
        (f32.mul
          (f32.mul (local.get $x_power) (local.get $x))
          (local.get $x)))
      
      ;; 计算项：sign * x^(2n+3) / (2n+3)!
      (local.set $term
        (f32.div
          (f32.mul (local.get $sign) (local.get $x_power))
          (call $factorial (i32.add (i32.mul (local.get $i) (i32.const 2)) (i32.const 3)))))
      
      (local.set $result (f32.add (local.get $result) (local.get $term)))
      
      ;; 改变符号
      (local.set $sign (f32.neg (local.get $sign)))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      (br $sin_loop))
    
    local.get $result)
  
  ;; 余弦函数
  (func $cos_f32 (param $x f32) (result f32)
    ;; cos(x) = sin(x + π/2)
    (call $sin_f32
      (f32.add (local.get $x) (f32.const 1.57079632679))))
  
  ;; ===== 随机数生成器 =====
  
  ;; 设置随机数种子
  (func $srand (param $seed i32)
    (global.set $rand_seed (local.get $seed)))
  
  ;; 生成随机数（线性同余生成器）
  (func $rand (result i32)
    (local $new_seed i32)
    
    ;; LCG: next = (a * current + c) % m
    ;; 使用参数：a = 1664525, c = 1013904223, m = 2^32
    (local.set $new_seed
      (i32.add
        (i32.mul (global.get $rand_seed) (i32.const 1664525))
        (i32.const 1013904223)))
    
    (global.set $rand_seed (local.get $new_seed))
    
    ;; 返回正数部分
    (i32.and (local.get $new_seed) (i32.const 0x7FFFFFFF)))
  
  ;; 生成指定范围内的随机数 [0, max)
  (func $rand_range (param $max i32) (result i32)
    (if (result i32)
      (i32.le_s (local.get $max) (i32.const 0))
      (then (i32.const 0))
      (else (i32.rem_u (call $rand) (local.get $max)))))
  
  ;; 生成浮点随机数 [0.0, 1.0)
  (func $rand_f32 (result f32)
    (f32.div
      (f32.convert_i32_u (call $rand))
      (f32.const 2147483647.0)))
  
  ;; ===== 导出函数 =====
  
  (export "abs_i32" (func $abs_i32))
  (export "abs_f32" (func $abs_f32))
  (export "max_i32" (func $max_i32))
  (export "min_i32" (func $min_i32))
  (export "max_f32" (func $max_f32))
  (export "min_f32" (func $min_f32))
  (export "pow_i32" (func $pow_i32))
  (export "pow_f32" (func $pow_f32))
  (export "sqrt_f32" (func $sqrt_f32))
  (export "sin_f32" (func $sin_f32))
  (export "cos_f32" (func $cos_f32))
  (export "srand" (func $srand))
  (export "rand" (func $rand))
  (export "rand_range" (func $rand_range))
  (export "rand_f32" (func $rand_f32)))

const exports = instance.exports;

// 测试基础数学函数
console.log("abs(-42):", exports.abs_i32(-42)); // 42
console.log("max(10, 20):", exports.max_i32(10, 20)); // 20
console.log("min(3.14, 2.71):", exports.min_f32(3.14, 2.71)); // 2.71

// 测试幂运算
console.log("2^10:", exports.pow_i32(2, 10)); // 1024
console.log("2.0^3:", exports.pow_f32(2.0, 3)); // 8.0

// 测试平方根
console.log("sqrt(25):", exports.sqrt_f32(25.0)); // ~5.0
console.log("sqrt(2):", exports.sqrt_f32(2.0)); // ~1.414

// 测试三角函数
console.log("sin(π/2):", exports.sin_f32(1.5708)); // ~1.0
console.log("cos(0):", exports.cos_f32(0)); // ~1.0

// 测试随机数
exports.srand(42); // 设置种子
console.log("Random number:", exports.rand());
console.log("Random 0-9:", exports.rand_range(10));
console.log("Random float:", exports.rand_f32());

总结

通过这些练习，你已经全面掌握了：

🎯 重点掌握技能：

• ✅ 完整的 WAT 语法和模块结构
• ✅ 高效的函数设计和调用机制
• ✅ 数据类型系统的深度运用
• ✅ 实际项目中的代码组织和优化
• ✅ 错误处理和边界情况考虑

📚 进阶方向：

• 内存管理和数据结构实现
• 控制流优化和性能调优
• 与 JavaScript 的高效交互
• 大型项目的模块化设计

下一步: 第5章 内存管理 EOF < /dev/null

第5章 内存管理

WebAssembly 的内存系统是其高性能的关键基础。本章将深入探讨 WebAssembly 的线性内存模型、内存操作指令、以及高效的内存管理策略。

线性内存模型

5.1.1 内存基础概念

WebAssembly 使用线性内存模型，这是一个连续的字节数组：

(module
  ;; 定义最小1页（64KB），最大10页的内存
  (memory $main 1 10)
  
  ;; 导出内存供外部访问
  (export "memory" (memory $main))
  
  ;; 简单的内存读写演示
  (func $memory_demo (param $offset i32) (param $value i32)
    ;; 写入32位整数到指定偏移
    (i32.store (local.get $offset) (local.get $value))
    
    ;; 读取并验证
    (i32.load (local.get $offset))
    drop)
  
  (export "memory_demo" (func $memory_demo)))

内存组织结构：

内存页 = 64KB (65536 字节)
地址空间 = 0 到 (页数 * 64KB - 1)

地址 0x0000: [字节 0] [字节 1] [字节 2] [字节 3] ...
地址 0x0004: [字节 4] [字节 5] [字节 6] [字节 7] ...
            ...
地址 0xFFFC: [倒数第4字节] [倒数第3字节] [倒数第2字节] [最后字节]

5.1.2 内存布局策略

有效的内存布局对性能至关重要：

(module
  (memory 1)  ;; 64KB 内存
  
  ;; 内存布局规划
  ;; 0x0000 - 0x0100: 系统保留区域 (256字节)
  ;; 0x0100 - 0x1000: 栈空间 (3840字节)
  ;; 0x1000 - 0x8000: 堆空间 (28KB)
  ;; 0x8000 - 0xFFFF: 静态数据区 (32KB)
  
  (global $RESERVED_START i32 (i32.const 0x0000))
  (global $STACK_START i32 (i32.const 0x0100))
  (global $HEAP_START i32 (i32.const 0x1000))
  (global $DATA_START i32 (i32.const 0x8000))
  
  ;; 当前栈指针
  (global $stack_ptr (mut i32) (i32.const 0x1000))
  
  ;; 堆分配指针
  (global $heap_ptr (mut i32) (i32.const 0x1000))
  
  ;; 栈操作：压栈
  (func $push (param $value i32)
    ;; 移动栈指针
    (global.set $stack_ptr
      (i32.sub (global.get $stack_ptr) (i32.const 4)))
    
    ;; 存储值
    (i32.store (global.get $stack_ptr) (local.get $value)))
  
  ;; 栈操作：弹栈
  (func $pop (result i32)
    (local $value i32)
    
    ;; 读取值
    (local.set $value (i32.load (global.get $stack_ptr)))
    
    ;; 移动栈指针
    (global.set $stack_ptr
      (i32.add (global.get $stack_ptr) (i32.const 4)))
    
    local.get $value)
  
  ;; 简单的堆分配器
  (func $malloc (param $size i32) (result i32)
    (local $ptr i32)
    
    ;; 获取当前堆指针
    (local.set $ptr (global.get $heap_ptr))
    
    ;; 对齐到4字节边界
    (local.set $size
      (i32.and
        (i32.add (local.get $size) (i32.const 3))
        (i32.const 0xFFFFFFFC)))
    
    ;; 更新堆指针
    (global.set $heap_ptr
      (i32.add (global.get $heap_ptr) (local.get $size)))
    
    ;; 检查是否超出堆空间
    (if (i32.gt_u (global.get $heap_ptr) (global.get $DATA_START))
      (then 
        ;; 分配失败，返回 NULL
        (global.set $heap_ptr (local.get $ptr))
        (return (i32.const 0))))
    
    local.get $ptr)
  
  (export "push" (func $push))
  (export "pop" (func $pop))
  (export "malloc" (func $malloc))
  (export "memory" (memory 0)))

5.1.3 内存增长机制

WebAssembly 支持运行时动态增长内存：

(module
  (memory 1 100)  ;; 初始1页，最大100页
  
  ;; 内存状态监控
  (func $get_memory_size (result i32)
    (memory.size))  ;; 返回当前页数
  
  ;; 增长内存
  (func $grow_memory (param $pages i32) (result i32)
    (local $old_size i32)
    
    ;; 获取增长前的大小
    (local.set $old_size (memory.size))
    
    ;; 尝试增长内存
    (memory.grow (local.get $pages))
    
    ;; memory.grow 返回增长前的页数，失败时返回 -1
    (if (result i32)
      (i32.eq (memory.grow (i32.const 0)) (i32.const -1))
      (then (i32.const 0))  ;; 失败
      (else (i32.const 1))))  ;; 成功
  
  ;; 检查内存是否足够
  (func $ensure_memory (param $required_bytes i32) (result i32)
    (local $current_bytes i32)
    (local $required_pages i32)
    (local $current_pages i32)
    
    ;; 计算当前总字节数
    (local.set $current_pages (memory.size))
    (local.set $current_bytes 
      (i32.mul (local.get $current_pages) (i32.const 65536)))
    
    ;; 检查是否需要增长
    (if (i32.ge_u (local.get $current_bytes) (local.get $required_bytes))
      (then (return (i32.const 1))))  ;; 已经足够
    
    ;; 计算需要的页数
    (local.set $required_pages
      (i32.div_u
        (i32.add (local.get $required_bytes) (i32.const 65535))
        (i32.const 65536)))
    
    ;; 尝试增长到所需大小
    (call $grow_memory
      (i32.sub (local.get $required_pages) (local.get $current_pages))))
  
  (export "get_memory_size" (func $get_memory_size))
  (export "grow_memory" (func $grow_memory))
  (export "ensure_memory" (func $ensure_memory))
  (export "memory" (memory 0)))

内存操作指令

5.2.1 加载指令详解

WebAssembly 提供多种粒度的内存加载指令：

(module
  (memory 1)
  
  ;; 初始化测试数据
  (data (i32.const 0) "\01\02\03\04\05\06\07\08\09\0A\0B\0C\0D\0E\0F\10")
  
  (func $load_operations (param $addr i32)
    ;; 8位加载
    (i32.load8_u (local.get $addr))    ;; 无符号8位 → i32
    (i32.load8_s (local.get $addr))    ;; 有符号8位 → i32
    
    ;; 16位加载  
    (i32.load16_u (local.get $addr))   ;; 无符号16位 → i32
    (i32.load16_s (local.get $addr))   ;; 有符号16位 → i32
    
    ;; 32位加载
    (i32.load (local.get $addr))       ;; 32位 → i32
    
    ;; 64位加载（到 i64）
    (i64.load8_u (local.get $addr))    ;; 无符号8位 → i64
    (i64.load8_s (local.get $addr))    ;; 有符号8位 → i64
    (i64.load16_u (local.get $addr))   ;; 无符号16位 → i64
    (i64.load16_s (local.get $addr))   ;; 有符号16位 → i64
    (i64.load32_u (local.get $addr))   ;; 无符号32位 → i64
    (i64.load32_s (local.get $addr))   ;; 有符号32位 → i64
    (i64.load (local.get $addr))       ;; 64位 → i64
    
    ;; 浮点数加载
    (f32.load (local.get $addr))       ;; 32位浮点
    (f64.load (local.get $addr))       ;; 64位浮点
    
    ;; 清空栈
    drop drop drop drop drop drop drop drop
    drop drop drop drop drop drop)
  
  (export "load_operations" (func $load_operations))
  (export "memory" (memory 0)))

5.2.2 存储指令详解

相应的存储指令支持不同的数据宽度：

(module
  (memory 1)
  
  (func $store_operations (param $addr i32) (param $value i32)
    ;; 8位存储
    (i32.store8 (local.get $addr) (local.get $value))
    
    ;; 16位存储
    (i32.store16 (local.get $addr) (local.get $value))
    
    ;; 32位存储
    (i32.store (local.get $addr) (local.get $value)))
  
  ;; 批量数据复制
  (func $memory_copy (param $dest i32) (param $src i32) (param $size i32)
    (local $i i32)
    
    (local.set $i (i32.const 0))
    
    (loop $copy_loop
      ;; 检查是否完成
      (if (i32.ge_u (local.get $i) (local.get $size))
        (then (br $copy_loop)))
      
      ;; 复制一个字节
      (i32.store8
        (i32.add (local.get $dest) (local.get $i))
        (i32.load8_u
          (i32.add (local.get $src) (local.get $i))))
      
      ;; 递增计数器
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      (br $copy_loop)))
  
  ;; 内存填充
  (func $memory_fill (param $addr i32) (param $value i32) (param $size i32)
    (local $i i32)
    
    (local.set $i (i32.const 0))
    
    (loop $fill_loop
      (if (i32.ge_u (local.get $i) (local.get $size))
        (then (br $fill_loop)))
      
      (i32.store8
        (i32.add (local.get $addr) (local.get $i))
        (local.get $value))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      (br $fill_loop)))
  
  (export "store_operations" (func $store_operations))
  (export "memory_copy" (func $memory_copy))
  (export "memory_fill" (func $memory_fill))
  (export "memory" (memory 0)))

5.2.3 批量内存操作（WASM 扩展）

现代 WebAssembly 支持高效的批量内存操作：

(module
  (memory 1)
  
  ;; 使用 memory.copy 批量复制（需要 bulk-memory 提案）
  (func $fast_memory_copy (param $dest i32) (param $src i32) (param $size i32)
    (memory.copy 
      (local.get $dest) 
      (local.get $src) 
      (local.get $size)))
  
  ;; 使用 memory.fill 批量填充
  (func $fast_memory_fill (param $addr i32) (param $value i32) (param $size i32)
    (memory.fill 
      (local.get $addr) 
      (local.get $value) 
      (local.get $size)))
  
  ;; 初始化内存段
  (func $init_data_segment (param $dest i32) (param $segment_index i32) (param $size i32)
    (memory.init $segment_index
      (local.get $dest)
      (i32.const 0)
      (local.get $size)))
  
  (export "fast_memory_copy" (func $fast_memory_copy))
  (export "fast_memory_fill" (func $fast_memory_fill))
  (export "init_data_segment" (func $init_data_segment))
  (export "memory" (memory 0)))

数据段初始化

5.3.1 静态数据段

数据段用于在模块实例化时初始化内存：

(module
  (memory 1)
  
  ;; 字符串数据段
  (data $hello (i32.const 0x1000) "Hello, WebAssembly!")
  (data $numbers (i32.const 0x1020) "\01\02\03\04\05\06\07\08")
  
  ;; 结构化数据
  (data $person_record (i32.const 0x1100)
    ;; 年龄 (4字节)
    "\1A\00\00\00"      ;; 26岁
    ;; 身高 (4字节浮点)
    "\00\00\B4\42"      ;; 90.0
    ;; 名字长度 (4字节)
    "\05\00\00\00"      ;; 5个字符
    ;; 名字数据
    "Alice")
  
  ;; 查找表数据
  (data $lookup_table (i32.const 0x2000)
    ;; 平方表：0² 到 15²
    "\00\00\00\00"  ;; 0
    "\01\00\00\00"  ;; 1
    "\04\00\00\00"  ;; 4
    "\09\00\00\00"  ;; 9
    "\10\00\00\00"  ;; 16
    "\19\00\00\00"  ;; 25
    "\24\00\00\00"  ;; 36
    "\31\00\00\00"  ;; 49
    "\40\00\00\00"  ;; 64
    "\51\00\00\00"  ;; 81
    "\64\00\00\00"  ;; 100
    "\79\00\00\00"  ;; 121
    "\90\00\00\00"  ;; 144
    "\A9\00\00\00"  ;; 169
    "\C4\00\00\00"  ;; 196
    "\E1\00\00\00") ;; 225
  
  ;; 读取字符串
  (func $get_string_char (param $index i32) (result i32)
    (if (result i32)
      (i32.ge_u (local.get $index) (i32.const 20))
      (then (i32.const 0))  ;; 超出范围
      (else
        (i32.load8_u
          (i32.add (i32.const 0x1000) (local.get $index))))))
  
  ;; 快速平方查找
  (func $fast_square (param $n i32) (result i32)
    (if (result i32)
      (i32.ge_u (local.get $n) (i32.const 16))
      (then (i32.mul (local.get $n) (local.get $n)))  ;; 计算
      (else  ;; 查表
        (i32.load
          (i32.add
            (i32.const 0x2000)
            (i32.mul (local.get $n) (i32.const 4)))))))
  
  ;; 读取人员记录
  (func $get_person_age (result i32)
    (i32.load (i32.const 0x1100)))
  
  (func $get_person_height (result f32)
    (f32.load (i32.const 0x1104)))
  
  (func $get_person_name_length (result i32)
    (i32.load (i32.const 0x1108)))
  
  (export "get_string_char" (func $get_string_char))
  (export "fast_square" (func $fast_square))
  (export "get_person_age" (func $get_person_age))
  (export "get_person_height" (func $get_person_height))
  (export "get_person_name_length" (func $get_person_name_length))
  (export "memory" (memory 0)))

5.3.2 动态数据段（被动段）

被动数据段可以在运行时按需初始化：

(module
  (memory 1)
  
  ;; 被动数据段（不会自动初始化）
  (data $template_data passive "Template: ")
  (data $error_messages passive 
    "Error 1: Invalid input\00"
    "Error 2: Out of memory\00"  
    "Error 3: Division by zero\00")
  
  ;; 消息偏移表
  (data $message_offsets passive
    "\00\00\00\00"  ;; 错误1偏移: 0
    "\14\00\00\00"  ;; 错误2偏移: 20
    "\2B\00\00\00") ;; 错误3偏移: 43
  
  ;; 字符串工作缓冲区基址
  (global $string_buffer i32 (i32.const 0x3000))
  
  ;; 初始化错误消息系统
  (func $init_error_system
    ;; 初始化错误消息到缓冲区
    (memory.init $error_messages
      (global.get $string_buffer)  ;; 目标地址
      (i32.const 0)                ;; 源偏移
      (i32.const 60))              ;; 大小
    
    ;; 初始化偏移表
    (memory.init $message_offsets
      (i32.add (global.get $string_buffer) (i32.const 1000))
      (i32.const 0)
      (i32.const 12))
    
    ;; 删除数据段以释放内存
    (data.drop $error_messages)
    (data.drop $message_offsets))
  
  ;; 构建带模板的错误消息
  (func $build_error_message (param $error_code i32) (param $dest i32)
    (local $template_len i32)
    (local $msg_offset i32)
    (local $msg_addr i32)
    
    ;; 复制模板前缀
    (memory.init $template_data
      (local.get $dest)
      (i32.const 0)
      (i32.const 10))  ;; "Template: " 长度
    
    ;; 获取错误消息偏移
    (local.set $msg_offset
      (i32.load
        (i32.add
          (i32.add (global.get $string_buffer) (i32.const 1000))
          (i32.mul (local.get $error_code) (i32.const 4)))))
    
    ;; 计算消息实际地址
    (local.set $msg_addr
      (i32.add (global.get $string_buffer) (local.get $msg_offset)))
    
    ;; 复制错误消息（简化版，假设长度为20）
    (call $copy_string
      (i32.add (local.get $dest) (i32.const 10))
      (local.get $msg_addr)
      (i32.const 20)))
  
  ;; 辅助：复制字符串
  (func $copy_string (param $dest i32) (param $src i32) (param $len i32)
    (local $i i32)
    
    (loop $copy_loop
      (if (i32.ge_u (local.get $i) (local.get $len))
        (then (br $copy_loop)))
      
      (i32.store8
        (i32.add (local.get $dest) (local.get $i))
        (i32.load8_u
          (i32.add (local.get $src) (local.get $i))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $copy_loop)))
  
  (export "init_error_system" (func $init_error_system))
  (export "build_error_message" (func $build_error_message))
  (export "memory" (memory 0)))

内存对齐与性能

5.4.1 对齐原理

内存对齐对性能有重要影响：

(module
  (memory 1)
  
  ;; 演示对齐访问
  (func $alignment_demo
    ;; 对齐的32位访问（地址是4的倍数）
    (i32.store align=4 (i32.const 0x1000) (i32.const 0x12345678))
    (i32.load align=4 (i32.const 0x1000))
    
    ;; 非对齐访问（可能较慢，但仍然有效）
    (i32.store align=1 (i32.const 0x1001) (i32.const 0x87654321))
    (i32.load align=1 (i32.const 0x1001))
    
    ;; 64位对齐访问
    (i64.store align=8 (i32.const 0x2000) (i64.const 0x123456789ABCDEF0))
    (i64.load align=8 (i32.const 0x2000))
    
    drop drop drop)
  
  ;; 数据结构对齐
  (func $aligned_struct_demo
    (local $base_addr i32)
    (local.set $base_addr (i32.const 0x3000))
    
    ;; 结构体：
    ;; struct Person {
    ;;   i32 id;        // 0-3
    ;;   f64 height;    // 8-15 (对齐到8字节)
    ;;   i32 age;       // 16-19
    ;; } // 总大小：24字节（末尾填充到8字节对齐）
    
    ;; 存储 ID
    (i32.store align=4 
      (local.get $base_addr) 
      (i32.const 12345))
    
    ;; 存储身高（注意8字节对齐）
    (f64.store align=8 
      (i32.add (local.get $base_addr) (i32.const 8)) 
      (f64.const 175.5))
    
    ;; 存储年龄
    (i32.store align=4 
      (i32.add (local.get $base_addr) (i32.const 16)) 
      (i32.const 25)))
  
  ;; 内存对齐工具函数
  (func $align_up (param $addr i32) (param $alignment i32) (result i32)
    (local $mask i32)
    
    ;; 计算掩码（对齐-1）
    (local.set $mask (i32.sub (local.get $alignment) (i32.const 1)))
    
    ;; 对齐公式：(addr + mask) & ~mask
    (i32.and
      (i32.add (local.get $addr) (local.get $mask))
      (i32.xor (local.get $mask) (i32.const -1))))
  
  ;; 检查地址是否对齐
  (func $is_aligned (param $addr i32) (param $alignment i32) (result i32)
    (i32.eqz
      (i32.rem_u (local.get $addr) (local.get $alignment))))
  
  (export "alignment_demo" (func $alignment_demo))
  (export "aligned_struct_demo" (func $aligned_struct_demo))
  (export "align_up" (func $align_up))
  (export "is_aligned" (func $is_aligned))
  (export "memory" (memory 0)))

5.4.2 性能优化技巧

(module
  (memory 1)
  
  ;; 缓存友好的数据访问
  (func $cache_friendly_sum (param $array_ptr i32) (param $length i32) (result i32)
    (local $sum i32)
    (local $i i32)
    
    ;; 顺序访问，利用缓存局部性
    (loop $sum_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $sum_loop)))
      
      (local.set $sum
        (i32.add 
          (local.get $sum)
          (i32.load 
            (i32.add 
              (local.get $array_ptr)
              (i32.mul (local.get $i) (i32.const 4))))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $sum_loop))
    
    local.get $sum)
  
  ;; 批量操作优化：一次处理多个元素
  (func $vectorized_add (param $a_ptr i32) (param $b_ptr i32) (param $result_ptr i32) (param $length i32)
    (local $i i32)
    (local $end i32)
    
    ;; 计算向量化结束位置（4的倍数）
    (local.set $end 
      (i32.and (local.get $length) (i32.const 0xFFFFFFFC)))
    
    ;; 向量化循环：一次处理4个元素
    (loop $vector_loop
      (if (i32.ge_u (local.get $i) (local.get $end))
        (then (br $vector_loop)))
      
      ;; 处理4个连续的32位整数
      (i32.store
        (i32.add (local.get $result_ptr) (i32.mul (local.get $i) (i32.const 4)))
        (i32.add
          (i32.load (i32.add (local.get $a_ptr) (i32.mul (local.get $i) (i32.const 4))))
          (i32.load (i32.add (local.get $b_ptr) (i32.mul (local.get $i) (i32.const 4))))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $vector_loop))
    
    ;; 处理剩余元素
    (loop $remainder_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $remainder_loop)))
      
      (i32.store
        (i32.add (local.get $result_ptr) (i32.mul (local.get $i) (i32.const 4)))
        (i32.add
          (i32.load (i32.add (local.get $a_ptr) (i32.mul (local.get $i) (i32.const 4))))
          (i32.load (i32.add (local.get $b_ptr) (i32.mul (local.get $i) (i32.const 4))))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $remainder_loop)))
  
  ;; 内存预取模拟（通过提前访问实现）
  (func $prefetch_demo (param $data_ptr i32) (param $length i32) (result i32)
    (local $sum i32)
    (local $i i32)
    (local $prefetch_distance i32)
    
    (local.set $prefetch_distance (i32.const 64))  ;; 提前64个元素
    
    (loop $prefetch_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $prefetch_loop)))
      
      ;; 预取未来的数据
      (if (i32.lt_u 
            (i32.add (local.get $i) (local.get $prefetch_distance))
            (local.get $length))
        (then
          (i32.load  ;; 触发缓存加载
            (i32.add 
              (local.get $data_ptr)
              (i32.mul 
                (i32.add (local.get $i) (local.get $prefetch_distance))
                (i32.const 4))))
          drop))
      
      ;; 处理当前数据
      (local.set $sum
        (i32.add 
          (local.get $sum)
          (i32.load 
            (i32.add 
              (local.get $data_ptr)
              (i32.mul (local.get $i) (i32.const 4))))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $prefetch_loop))
    
    local.get $sum)
  
  (export "cache_friendly_sum" (func $cache_friendly_sum))
  (export "vectorized_add" (func $vectorized_add))
  (export "prefetch_demo" (func $prefetch_demo))
  (export "memory" (memory 0)))

高级内存管理

5.5.1 简单的内存分配器

(module
  (memory 1)
  
  ;; 内存块头结构（8字节）
  ;; [0-3]: 块大小
  ;; [4-7]: 下一个块的偏移（0表示最后一个块）
  
  (global $heap_start i32 (i32.const 0x1000))
  (global $heap_end i32 (i32.const 0xF000))
  
  ;; 初始化堆
  (func $init_heap
    ;; 创建初始空闲块
    (i32.store (global.get $heap_start) 
      (i32.sub (global.get $heap_end) (global.get $heap_start)))
    (i32.store (i32.add (global.get $heap_start) (i32.const 4)) 
      (i32.const 0)))
  
  ;; 分配内存
  (func $heap_alloc (param $size i32) (result i32)
    (local $current i32)
    (local $block_size i32)
    (local $next_offset i32)
    (local $aligned_size i32)
    
    ;; 对齐到8字节边界
    (local.set $aligned_size
      (i32.and
        (i32.add (local.get $size) (i32.const 15))
        (i32.const 0xFFFFFFF8)))
    
    (local.set $current (global.get $heap_start))
    
    ;; 遍历空闲块链表
    (loop $find_block
      ;; 检查当前块
      (local.set $block_size (i32.load (local.get $current)))
      (local.set $next_offset (i32.load (i32.add (local.get $current) (i32.const 4))))
      
      ;; 如果块足够大
      (if (i32.ge_u (local.get $block_size) 
                    (i32.add (local.get $aligned_size) (i32.const 8)))
        (then
          ;; 分割块
          (call $split_block (local.get $current) (local.get $aligned_size))
          ;; 返回数据指针（跳过头部）
          (return (i32.add (local.get $current) (i32.const 8)))))
      
      ;; 移动到下一块
      (if (i32.eqz (local.get $next_offset))
        (then (return (i32.const 0))))  ;; 没有找到合适的块
      
      (local.set $current (i32.add (global.get $heap_start) (local.get $next_offset)))
      (br $find_block)))
  
  ;; 分割内存块
  (func $split_block (param $block i32) (param $size i32)
    (local $block_size i32)
    (local $remaining_size i32)
    (local $new_block i32)
    
    (local.set $block_size (i32.load (local.get $block)))
    (local.set $remaining_size 
      (i32.sub (local.get $block_size) (i32.add (local.get $size) (i32.const 8))))
    
    ;; 如果剩余大小足够创建新块
    (if (i32.gt_u (local.get $remaining_size) (i32.const 16))
      (then
        ;; 更新当前块大小
        (i32.store (local.get $block) (i32.add (local.get $size) (i32.const 8)))
        
        ;; 创建新的空闲块
        (local.set $new_block 
          (i32.add (local.get $block) (i32.add (local.get $size) (i32.const 8))))
        
        (i32.store (local.get $new_block) (local.get $remaining_size))
        (i32.store (i32.add (local.get $new_block) (i32.const 4))
          (i32.load (i32.add (local.get $block) (i32.const 4))))
        
        ;; 更新链接
        (i32.store (i32.add (local.get $block) (i32.const 4))
          (i32.sub (local.get $new_block) (global.get $heap_start))))))
  
  ;; 释放内存
  (func $heap_free (param $ptr i32)
    (local $block i32)
    
    ;; 获取块头地址
    (local.set $block (i32.sub (local.get $ptr) (i32.const 8)))
    
    ;; 简化版：直接添加到空闲链表头部
    (i32.store (i32.add (local.get $block) (i32.const 4))
      (i32.sub (global.get $heap_start) (global.get $heap_start)))
    
    ;; 这里应该实现块合并逻辑，但为简化省略
    )
  
  ;; 获取堆统计信息
  (func $heap_stats (param $total_size_ptr i32) (param $free_blocks_ptr i32)
    (local $current i32)
    (local $total_free i32)
    (local $block_count i32)
    
    (local.set $current (global.get $heap_start))
    
    (loop $count_blocks
      (if (i32.eqz (local.get $current))
        (then (br $count_blocks)))
      
      (local.set $total_free 
        (i32.add (local.get $total_free) (i32.load (local.get $current))))
      (local.set $block_count (i32.add (local.get $block_count) (i32.const 1)))
      
      (local.set $current 
        (i32.add (global.get $heap_start) 
          (i32.load (i32.add (local.get $current) (i32.const 4)))))
      
      (br $count_blocks))
    
    (i32.store (local.get $total_size_ptr) (local.get $total_free))
    (i32.store (local.get $free_blocks_ptr) (local.get $block_count)))
  
  (export "init_heap" (func $init_heap))
  (export "heap_alloc" (func $heap_alloc))
  (export "heap_free" (func $heap_free))
  (export "heap_stats" (func $heap_stats))
  (export "memory" (memory 0)))

5.5.2 内存池分配器

(module
  (memory 1)
  
  ;; 固定大小内存池
  (global $pool_16_start i32 (i32.const 0x2000))   ;; 16字节块池
  (global $pool_32_start i32 (i32.const 0x4000))   ;; 32字节块池
  (global $pool_64_start i32 (i32.const 0x6000))   ;; 64字节块池
  
  (global $pool_16_free_head (mut i32) (i32.const 0))
  (global $pool_32_free_head (mut i32) (i32.const 0))
  (global $pool_64_free_head (mut i32) (i32.const 0))
  
  ;; 初始化内存池
  (func $init_pools
    ;; 初始化16字节池（128个块 = 2KB）
    (call $init_pool (global.get $pool_16_start) (i32.const 128) (i32.const 16))
    (global.set $pool_16_free_head (global.get $pool_16_start))
    
    ;; 初始化32字节池（64个块 = 2KB）
    (call $init_pool (global.get $pool_32_start) (i32.const 64) (i32.const 32))
    (global.set $pool_32_free_head (global.get $pool_32_start))
    
    ;; 初始化64字节池（32个块 = 2KB）
    (call $init_pool (global.get $pool_64_start) (i32.const 32) (i32.const 64))
    (global.set $pool_64_free_head (global.get $pool_64_start)))
  
  ;; 初始化单个池
  (func $init_pool (param $start_addr i32) (param $block_count i32) (param $block_size i32)
    (local $i i32)
    (local $current i32)
    (local $next i32)
    
    (local.set $current (local.get $start_addr))
    
    (loop $init_loop
      (if (i32.ge_u (local.get $i) (i32.sub (local.get $block_count) (i32.const 1)))
        (then (br $init_loop)))
      
      ;; 计算下一个块的地址
      (local.set $next (i32.add (local.get $current) (local.get $block_size)))
      
      ;; 在当前块的开头存储下一个块的地址
      (i32.store (local.get $current) (local.get $next))
      
      (local.set $current (local.get $next))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $init_loop))
    
    ;; 最后一个块指向NULL
    (i32.store (local.get $current) (i32.const 0)))
  
  ;; 池分配
  (func $pool_alloc (param $size i32) (result i32)
    (local $ptr i32)
    
    ;; 根据大小选择合适的池
    (if (i32.le_u (local.get $size) (i32.const 16))
      (then
        (local.set $ptr (global.get $pool_16_free_head))
        (if (local.get $ptr)
          (then
            (global.set $pool_16_free_head (i32.load (local.get $ptr)))
            (return (local.get $ptr))))))
    
    (if (i32.le_u (local.get $size) (i32.const 32))
      (then
        (local.set $ptr (global.get $pool_32_free_head))
        (if (local.get $ptr)
          (then
            (global.set $pool_32_free_head (i32.load (local.get $ptr)))
            (return (local.get $ptr))))))
    
    (if (i32.le_u (local.get $size) (i32.const 64))
      (then
        (local.set $ptr (global.get $pool_64_free_head))
        (if (local.get $ptr)
          (then
            (global.set $pool_64_free_head (i32.load (local.get $ptr)))
            (return (local.get $ptr))))))
    
    ;; 如果所有池都满了，返回NULL
    i32.const 0)
  
  ;; 池释放
  (func $pool_free (param $ptr i32) (param $size i32)
    ;; 根据大小确定池类型
    (if (i32.le_u (local.get $size) (i32.const 16))
      (then
        (i32.store (local.get $ptr) (global.get $pool_16_free_head))
        (global.set $pool_16_free_head (local.get $ptr))
        (return)))
    
    (if (i32.le_u (local.get $size) (i32.const 32))
      (then
        (i32.store (local.get $ptr) (global.get $pool_32_free_head))
        (global.set $pool_32_free_head (local.get $ptr))
        (return)))
    
    (if (i32.le_u (local.get $size) (i32.const 64))
      (then
        (i32.store (local.get $ptr) (global.get $pool_64_free_head))
        (global.set $pool_64_free_head (local.get $ptr)))))
  
  ;; 获取池状态
  (func $pool_stats (param $pool_size i32) (result i32)
    (local $free_count i32)
    (local $current i32)
    
    ;; 根据池大小选择对应的空闲链表头
    (if (i32.eq (local.get $pool_size) (i32.const 16))
      (then (local.set $current (global.get $pool_16_free_head))))
    (if (i32.eq (local.get $pool_size) (i32.const 32))
      (then (local.set $current (global.get $pool_32_free_head))))
    (if (i32.eq (local.get $pool_size) (i32.const 64))
      (then (local.set $current (global.get $pool_64_free_head))))
    
    ;; 计算空闲块数量
    (loop $count_loop
      (if (i32.eqz (local.get $current))
        (then (br $count_loop)))
      
      (local.set $free_count (i32.add (local.get $free_count) (i32.const 1)))
      (local.set $current (i32.load (local.get $current)))
      (br $count_loop))
    
    local.get $free_count)
  
  (export "init_pools" (func $init_pools))
  (export "pool_alloc" (func $pool_alloc))
  (export "pool_free" (func $pool_free))
  (export "pool_stats" (func $pool_stats))
  (export "memory" (memory 0)))

本章小结

通过本章学习，你已经全面掌握了：

1. 线性内存模型：WebAssembly 的内存组织和布局策略
2. 内存操作：加载、存储指令及其对齐优化
3. 数据段：静态和动态数据初始化技术
4. 性能优化：缓存友好访问和向量化技术
5. 内存管理：分配器设计和内存池实现

这些技能为构建高性能的 WebAssembly 应用奠定了重要基础。

📝 进入下一步：第6章 控制流

🎯 重点技能：

• ✅ 内存模型理解
• ✅ 内存操作优化
• ✅ 数据段应用
• ✅ 性能调优技巧
• ✅ 内存管理设计

第5章 内存管理 - 练习题

本章练习旨在巩固 WebAssembly 内存管理的核心概念，包括线性内存模型、内存操作、数据段和性能优化等关键技能。

基础练习

练习 5.1 内存基础操作 (★★☆☆☆ 10分)

题目: 编写一个 WebAssembly 模块，实现基本的内存读写操作。

要求:

1. 定义一个 64KB 的内存空间
2. 实现一个函数 store_values，在内存偏移 0x1000 处存储四个 32 位整数：42, 84, 168, 336
3. 实现一个函数 load_sum，读取这四个值并返回它们的和

(module
  (memory (export "memory") 1)  ;; 64KB 内存
  
  (func $store_values
    ;; 在 0x1000 处存储四个值
    (i32.store (i32.const 0x1000) (i32.const 42))
    (i32.store (i32.const 0x1004) (i32.const 84))
    (i32.store (i32.const 0x1008) (i32.const 168))
    (i32.store (i32.const 0x100C) (i32.const 336)))
  
  (func $load_sum (result i32)
    (i32.add
      (i32.add
        (i32.load (i32.const 0x1000))
        (i32.load (i32.const 0x1004)))
      (i32.add
        (i32.load (i32.const 0x1008))
        (i32.load (i32.const 0x100C)))))
  
  (export "store_values" (func $store_values))
  (export "load_sum" (func $load_sum)))

练习 5.2 内存布局设计 (★★★☆☆ 15分)

题目: 设计一个合理的内存布局，支持栈、堆和静态数据区域。

要求:

1. 在 64KB 内存中划分不同区域
2. 实现栈的 push/pop 操作
3. 实现简单的堆分配器
4. 实现获取内存使用统计的函数

(module
  (memory (export "memory") 1)
  
  ;; 内存布局
  ;; 0x0000-0x0400: 栈区 (1KB)
  ;; 0x0400-0x8000: 堆区 (30KB) 
  ;; 0x8000-0xFFFF: 静态数据区 (32KB)
  
  (global $stack_base i32 (i32.const 0x0400))
  (global $stack_ptr (mut i32) (i32.const 0x0400))
  (global $heap_start i32 (i32.const 0x0400))
  (global $heap_ptr (mut i32) (i32.const 0x0400))
  (global $static_start i32 (i32.const 0x8000))
  
  ;; 栈操作
  (func $push (param $value i32)
    (global.set $stack_ptr (i32.sub (global.get $stack_ptr) (i32.const 4)))
    (i32.store (global.get $stack_ptr) (local.get $value)))
  
  (func $pop (result i32)
    (local $value i32)
    (local.set $value (i32.load (global.get $stack_ptr)))
    (global.set $stack_ptr (i32.add (global.get $stack_ptr) (i32.const 4)))
    local.get $value)
  
  ;; 堆分配
  (func $malloc (param $size i32) (result i32)
    (local $ptr i32)
    (local.set $ptr (global.get $heap_ptr))
    
    ;; 4字节对齐
    (local.set $size
      (i32.and (i32.add (local.get $size) (i32.const 3)) (i32.const 0xFFFFFFFC)))
    
    ;; 检查空间
    (if (i32.lt_u (i32.add (global.get $heap_ptr) (local.get $size)) (global.get $static_start))
      (then
        (global.set $heap_ptr (i32.add (global.get $heap_ptr) (local.get $size)))
        (return (local.get $ptr))))
    
    i32.const 0)  ;; 分配失败
  
  ;; 内存统计
  (func $get_stack_usage (result i32)
    (i32.sub (global.get $stack_base) (global.get $stack_ptr)))
  
  (func $get_heap_usage (result i32)
    (i32.sub (global.get $heap_ptr) (global.get $heap_start)))
  
  (export "push" (func $push))
  (export "pop" (func $pop))
  (export "malloc" (func $malloc))
  (export "get_stack_usage" (func $get_stack_usage))
  (export "get_heap_usage" (func $get_heap_usage)))

进阶练习

练习 5.3 数据段应用 (★★★☆☆ 20分)

题目: 使用数据段存储配置信息和查找表。

要求:

1. 在数据段中存储应用配置（版本号、最大用户数等）
2. 创建一个查找表用于快速计算平方根的整数近似值
3. 实现读取配置和查表函数

(module
  (memory (export "memory") 1)
  
  ;; 配置数据段
  (data $config (i32.const 0x1000)
    "\01\00\00\00"    ;; 版本号: 1
    "\E8\03\00\00"    ;; 最大用户数: 1000
    "\0A\00\00\00"    ;; 最大连接数: 10
    "\3C\00\00\00")   ;; 超时时间: 60秒
  
  ;; 平方根查找表 (0-255 的平方根整数近似值)
  (data $sqrt_table (i32.const 0x2000)
    "\00\01\01\02\02\02\02\03\03\03\03\03\03\04\04\04"
    "\04\04\04\04\04\05\05\05\05\05\05\05\05\05\06\06"
    "\06\06\06\06\06\06\06\06\06\07\07\07\07\07\07\07"
    "\07\07\07\07\07\07\08\08\08\08\08\08\08\08\08\08"
    "\08\08\08\08\08\09\09\09\09\09\09\09\09\09\09\09"
    "\09\09\09\09\09\09\0A\0A\0A\0A\0A\0A\0A\0A\0A\0A"
    "\0A\0A\0A\0A\0A\0A\0A\0A\0A\0B\0B\0B\0B\0B\0B\0B"
    "\0B\0B\0B\0B\0B\0B\0B\0B\0B\0B\0B\0B\0B\0B\0C\0C"
    "\0C\0C\0C\0C\0C\0C\0C\0C\0C\0C\0C\0C\0C\0C\0C\0C"
    "\0C\0C\0C\0C\0C\0D\0D\0D\0D\0D\0D\0D\0D\0D\0D\0D"
    "\0D\0D\0D\0D\0D\0D\0D\0D\0D\0D\0D\0D\0D\0D\0E\0E"
    "\0E\0E\0E\0E\0E\0E\0E\0E\0E\0E\0E\0E\0E\0E\0E\0E"
    "\0E\0E\0E\0E\0E\0E\0E\0E\0E\0F\0F\0F\0F\0F\0F\0F"
    "\0F\0F\0F\0F\0F\0F\0F\0F\0F\0F\0F\0F\0F\0F\0F\0F"
    "\0F\0F\0F\0F\0F\0F\10\10\10\10\10\10\10\10\10\10"
    "\10\10\10\10\10\10\10\10\10\10\10\10\10\10\10\10")
  
  ;; 读取配置
  (func $get_version (result i32)
    (i32.load (i32.const 0x1000)))
  
  (func $get_max_users (result i32)
    (i32.load (i32.const 0x1004)))
  
  (func $get_max_connections (result i32)
    (i32.load (i32.const 0x1008)))
  
  (func $get_timeout (result i32)
    (i32.load (i32.const 0x100C)))
  
  ;; 快速平方根查表
  (func $fast_sqrt (param $n i32) (result i32)
    (if (result i32)
      (i32.ge_u (local.get $n) (i32.const 256))
      (then
        ;; 超出查表范围，使用近似计算
        (i32.shr_u (local.get $n) (i32.const 4)))
      (else
        ;; 查表
        (i32.load8_u
          (i32.add (i32.const 0x2000) (local.get $n))))))
  
  ;; 验证配置完整性
  (func $validate_config (result i32)
    (local $version i32)
    (local $max_users i32)
    
    (local.set $version (call $get_version))
    (local.set $max_users (call $get_max_users))
    
    ;; 检查版本和用户数是否合理
    (i32.and
      (i32.and
        (i32.gt_u (local.get $version) (i32.const 0))
        (i32.le_u (local.get $version) (i32.const 10)))
      (i32.and
        (i32.gt_u (local.get $max_users) (i32.const 0))
        (i32.le_u (local.get $max_users) (i32.const 10000)))))
  
  (export "get_version" (func $get_version))
  (export "get_max_users" (func $get_max_users))
  (export "get_max_connections" (func $get_max_connections))
  (export "get_timeout" (func $get_timeout))
  (export "fast_sqrt" (func $fast_sqrt))
  (export "validate_config" (func $validate_config)))

练习 5.4 内存对齐优化 (★★★★☆ 25分)

题目: 实现一个性能优化的结构体操作库。

要求:

1. 定义 Person 结构体：id(i32), name(20字节), age(i32), height(f32)
2. 实现对齐优化的存储和读取
3. 实现批量操作函数
4. 对比对齐和非对齐访问的性能

(module
  (memory (export "memory") 1)
  
  ;; Person 结构体布局 (对齐优化):
  ;; [0-3]: id (i32)
  ;; [4-23]: name (20 bytes, 填充到4字节边界)
  ;; [24-27]: age (i32) 
  ;; [28-31]: height (f32)
  ;; 总大小: 32字节 (8字节对齐)
  
  (global $PERSON_SIZE i32 (i32.const 32))
  (global $person_count (mut i32) (i32.const 0))
  (global $persons_base i32 (i32.const 0x2000))
  
  ;; 创建 Person
  (func $create_person (param $id i32) (param $name_ptr i32) (param $age i32) (param $height f32) (result i32)
    (local $person_ptr i32)
    (local $i i32)
    
    ;; 分配空间
    (local.set $person_ptr
      (i32.add
        (global.get $persons_base)
        (i32.mul (global.get $person_count) (global.get $PERSON_SIZE))))
    
    ;; 检查空间
    (if (i32.gt_u (i32.add (local.get $person_ptr) (global.get $PERSON_SIZE)) (i32.const 0x8000))
      (then (return (i32.const 0))))  ;; 空间不足
    
    ;; 存储字段 (对齐访问)
    (i32.store align=4 (local.get $person_ptr) (local.get $id))
    
    ;; 复制名字 (最多20字节)
    (loop $copy_name
      (if (i32.ge_u (local.get $i) (i32.const 20))
        (then (br $copy_name)))
      
      (i32.store8
        (i32.add (i32.add (local.get $person_ptr) (i32.const 4)) (local.get $i))
        (i32.load8_u (i32.add (local.get $name_ptr) (local.get $i))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $copy_name))
    
    (i32.store align=4 (i32.add (local.get $person_ptr) (i32.const 24)) (local.get $age))
    (f32.store align=4 (i32.add (local.get $person_ptr) (i32.const 28)) (local.get $height))
    
    ;; 增加计数
    (global.set $person_count (i32.add (global.get $person_count) (i32.const 1)))
    
    local.get $person_ptr)
  
  ;; 读取 Person 字段
  (func $get_person_id (param $person_ptr i32) (result i32)
    (i32.load align=4 (local.get $person_ptr)))
  
  (func $get_person_age (param $person_ptr i32) (result i32)
    (i32.load align=4 (i32.add (local.get $person_ptr) (i32.const 24))))
  
  (func $get_person_height (param $person_ptr i32) (result f32)
    (f32.load align=4 (i32.add (local.get $person_ptr) (i32.const 28))))
  
  ;; 批量操作：计算平均年龄
  (func $calculate_average_age (result f32)
    (local $total_age i32)
    (local $i i32)
    (local $person_ptr i32)
    
    (if (i32.eqz (global.get $person_count))
      (then (return (f32.const 0))))
    
    (loop $sum_ages
      (if (i32.ge_u (local.get $i) (global.get $person_count))
        (then (br $sum_ages)))
      
      (local.set $person_ptr
        (i32.add
          (global.get $persons_base)
          (i32.mul (local.get $i) (global.get $PERSON_SIZE))))
      
      (local.set $total_age
        (i32.add (local.get $total_age) (call $get_person_age (local.get $person_ptr))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $sum_ages))
    
    (f32.div
      (f32.convert_i32_s (local.get $total_age))
      (f32.convert_i32_s (global.get $person_count))))
  
  ;; 性能测试：对齐 vs 非对齐访问
  (func $benchmark_aligned_access (param $iterations i32) (result i32)
    (local $i i32)
    (local $sum i32)
    (local $person_ptr i32)
    
    (loop $benchmark_loop
      (if (i32.ge_u (local.get $i) (local.get $iterations))
        (then (br $benchmark_loop)))
      
      (local.set $person_ptr (global.get $persons_base))
      
      ;; 对齐访问
      (local.set $sum
        (i32.add (local.get $sum)
          (i32.load align=4 (local.get $person_ptr))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $benchmark_loop))
    
    local.get $sum)
  
  (func $benchmark_unaligned_access (param $iterations i32) (result i32)
    (local $i i32)
    (local $sum i32)
    (local $person_ptr i32)
    
    (loop $benchmark_loop
      (if (i32.ge_u (local.get $i) (local.get $iterations))
        (then (br $benchmark_loop)))
      
      (local.set $person_ptr (i32.add (global.get $persons_base) (i32.const 1)))
      
      ;; 非对齐访问
      (local.set $sum
        (i32.add (local.get $sum)
          (i32.load align=1 (local.get $person_ptr))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $benchmark_loop))
    
    local.get $sum)
  
  (func $get_person_count (result i32)
    (global.get $person_count))
  
  (export "create_person" (func $create_person))
  (export "get_person_id" (func $get_person_id))
  (export "get_person_age" (func $get_person_age))
  (export "get_person_height" (func $get_person_height))
  (export "calculate_average_age" (func $calculate_average_age))
  (export "benchmark_aligned_access" (func $benchmark_aligned_access))
  (export "benchmark_unaligned_access" (func $benchmark_unaligned_access))
  (export "get_person_count" (func $get_person_count)))

挑战练习

练习 5.5 内存池分配器 (★★★★★ 30分)

题目: 实现一个高效的固定大小内存池分配器。

要求:

1. 支持 16, 32, 64 字节三种固定大小的内存池
2. 实现快速分配和释放
3. 支持内存池统计和碎片分析
4. 实现内存池的自动扩展

(module
  (memory (export "memory") 2)  ;; 128KB，为池扩展预留空间
  
  ;; 内存池配置
  (global $POOL_16_SIZE i32 (i32.const 16))
  (global $POOL_32_SIZE i32 (i32.const 32))
  (global $POOL_64_SIZE i32 (i32.const 64))
  (global $POOL_16_COUNT i32 (i32.const 128))  ;; 每池初始块数
  (global $POOL_32_COUNT i32 (i32.const 64))
  (global $POOL_64_COUNT i32 (i32.const 32))
  
  ;; 池基地址
  (global $pool_16_base i32 (i32.const 0x1000))
  (global $pool_32_base i32 (i32.const 0x3000))  
  (global $pool_64_base i32 (i32.const 0x5000))
  
  ;; 空闲链表头
  (global $pool_16_free_head (mut i32) (i32.const 0))
  (global $pool_32_free_head (mut i32) (i32.const 0))
  (global $pool_64_free_head (mut i32) (i32.const 0))
  
  ;; 统计信息
  (global $pool_16_allocated (mut i32) (i32.const 0))
  (global $pool_32_allocated (mut i32) (i32.const 0))
  (global $pool_64_allocated (mut i32) (i32.const 0))
  (global $pool_16_total (mut i32) (i32.const 0))
  (global $pool_32_total (mut i32) (i32.const 0))
  (global $pool_64_total (mut i32) (i32.const 0))
  
  ;; 初始化内存池
  (func $init_memory_pools
    (call $init_pool_16)
    (call $init_pool_32)
    (call $init_pool_64))
  
  ;; 初始化16字节池
  (func $init_pool_16
    (local $i i32)
    (local $current i32)
    (local $next i32)
    
    (local.set $current (global.get $pool_16_base))
    (global.set $pool_16_total (global.get $POOL_16_COUNT))
    
    (loop $init_16_loop
      (if (i32.ge_u (local.get $i) (i32.sub (global.get $POOL_16_COUNT) (i32.const 1)))
        (then (br $init_16_loop)))
      
      (local.set $next (i32.add (local.get $current) (global.get $POOL_16_SIZE)))
      (i32.store (local.get $current) (local.get $next))
      
      (local.set $current (local.get $next))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $init_16_loop))
    
    ;; 最后一个块指向NULL
    (i32.store (local.get $current) (i32.const 0))
    (global.set $pool_16_free_head (global.get $pool_16_base)))
  
  ;; 初始化32字节池
  (func $init_pool_32
    (local $i i32)
    (local $current i32)
    (local $next i32)
    
    (local.set $current (global.get $pool_32_base))
    (global.set $pool_32_total (global.get $POOL_32_COUNT))
    
    (loop $init_32_loop
      (if (i32.ge_u (local.get $i) (i32.sub (global.get $POOL_32_COUNT) (i32.const 1)))
        (then (br $init_32_loop)))
      
      (local.set $next (i32.add (local.get $current) (global.get $POOL_32_SIZE)))
      (i32.store (local.get $current) (local.get $next))
      
      (local.set $current (local.get $next))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $init_32_loop))
    
    (i32.store (local.get $current) (i32.const 0))
    (global.set $pool_32_free_head (global.get $pool_32_base)))
  
  ;; 初始化64字节池
  (func $init_pool_64
    (local $i i32)
    (local $current i32)
    (local $next i32)
    
    (local.set $current (global.get $pool_64_base))
    (global.set $pool_64_total (global.get $POOL_64_COUNT))
    
    (loop $init_64_loop
      (if (i32.ge_u (local.get $i) (i32.sub (global.get $POOL_64_COUNT) (i32.const 1)))
        (then (br $init_64_loop)))
      
      (local.set $next (i32.add (local.get $current) (global.get $POOL_64_SIZE)))
      (i32.store (local.get $current) (local.get $next))
      
      (local.set $current (local.get $next))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $init_64_loop))
    
    (i32.store (local.get $current) (i32.const 0))
    (global.set $pool_64_free_head (global.get $pool_64_base)))
  
  ;; 通用分配函数
  (func $pool_alloc (param $size i32) (result i32)
    (if (i32.le_u (local.get $size) (global.get $POOL_16_SIZE))
      (then (return (call $alloc_from_pool_16))))
    
    (if (i32.le_u (local.get $size) (global.get $POOL_32_SIZE))
      (then (return (call $alloc_from_pool_32))))
    
    (if (i32.le_u (local.get $size) (global.get $POOL_64_SIZE))
      (then (return (call $alloc_from_pool_64))))
    
    i32.const 0)  ;; 大小超出支持范围
  
  ;; 从16字节池分配
  (func $alloc_from_pool_16 (result i32)
    (local $ptr i32)
    
    (local.set $ptr (global.get $pool_16_free_head))
    (if (local.get $ptr)
      (then
        (global.set $pool_16_free_head (i32.load (local.get $ptr)))
        (global.set $pool_16_allocated 
          (i32.add (global.get $pool_16_allocated) (i32.const 1)))
        (return (local.get $ptr))))
    
    ;; 尝试扩展池
    (call $expand_pool_16)
    
    ;; 再次尝试分配
    (local.set $ptr (global.get $pool_16_free_head))
    (if (local.get $ptr)
      (then
        (global.set $pool_16_free_head (i32.load (local.get $ptr)))
        (global.set $pool_16_allocated 
          (i32.add (global.get $pool_16_allocated) (i32.const 1)))
        (return (local.get $ptr))))
    
    i32.const 0)  ;; 扩展失败
  
  ;; 从32字节池分配
  (func $alloc_from_pool_32 (result i32)
    (local $ptr i32)
    
    (local.set $ptr (global.get $pool_32_free_head))
    (if (local.get $ptr)
      (then
        (global.set $pool_32_free_head (i32.load (local.get $ptr)))
        (global.set $pool_32_allocated 
          (i32.add (global.get $pool_32_allocated) (i32.const 1)))
        (return (local.get $ptr))))
    
    (call $expand_pool_32)
    
    (local.set $ptr (global.get $pool_32_free_head))
    (if (local.get $ptr)
      (then
        (global.set $pool_32_free_head (i32.load (local.get $ptr)))
        (global.set $pool_32_allocated 
          (i32.add (global.get $pool_32_allocated) (i32.const 1)))
        (return (local.get $ptr))))
    
    i32.const 0)
  
  ;; 从64字节池分配
  (func $alloc_from_pool_64 (result i32)
    (local $ptr i32)
    
    (local.set $ptr (global.get $pool_64_free_head))
    (if (local.get $ptr)
      (then
        (global.set $pool_64_free_head (i32.load (local.get $ptr)))
        (global.set $pool_64_allocated 
          (i32.add (global.get $pool_64_allocated) (i32.const 1)))
        (return (local.get $ptr))))
    
    (call $expand_pool_64)
    
    (local.set $ptr (global.get $pool_64_free_head))
    (if (local.get $ptr)
      (then
        (global.set $pool_64_free_head (i32.load (local.get $ptr)))
        (global.set $pool_64_allocated 
          (i32.add (global.get $pool_64_allocated) (i32.const 1)))
        (return (local.get $ptr))))
    
    i32.const 0)
  
  ;; 扩展16字节池 (简化实现)
  (func $expand_pool_16
    ;; 简化：不实现动态扩展，实际应用中需要内存增长逻辑
    nop)
  
  (func $expand_pool_32
    nop)
  
  (func $expand_pool_64
    nop)
  
  ;; 释放到对应池
  (func $pool_free (param $ptr i32) (param $size i32)
    (if (i32.le_u (local.get $size) (global.get $POOL_16_SIZE))
      (then
        (call $free_to_pool_16 (local.get $ptr))
        (return)))
    
    (if (i32.le_u (local.get $size) (global.get $POOL_32_SIZE))
      (then
        (call $free_to_pool_32 (local.get $ptr))
        (return)))
    
    (if (i32.le_u (local.get $size) (global.get $POOL_64_SIZE))
      (then
        (call $free_to_pool_64 (local.get $ptr)))))
  
  ;; 释放到16字节池
  (func $free_to_pool_16 (param $ptr i32)
    (i32.store (local.get $ptr) (global.get $pool_16_free_head))
    (global.set $pool_16_free_head (local.get $ptr))
    (global.set $pool_16_allocated 
      (i32.sub (global.get $pool_16_allocated) (i32.const 1))))
  
  ;; 释放到32字节池
  (func $free_to_pool_32 (param $ptr i32)
    (i32.store (local.get $ptr) (global.get $pool_32_free_head))
    (global.set $pool_32_free_head (local.get $ptr))
    (global.set $pool_32_allocated 
      (i32.sub (global.get $pool_32_allocated) (i32.const 1))))
  
  ;; 释放到64字节池
  (func $free_to_pool_64 (param $ptr i32)
    (i32.store (local.get $ptr) (global.get $pool_64_free_head))
    (global.set $pool_64_free_head (local.get $ptr))
    (global.set $pool_64_allocated 
      (i32.sub (global.get $pool_64_allocated) (i32.const 1))))
  
  ;; 统计信息
  (func $get_pool_stats (param $pool_size i32) (param $total_ptr i32) (param $allocated_ptr i32) (param $free_ptr i32)
    (if (i32.eq (local.get $pool_size) (global.get $POOL_16_SIZE))
      (then
        (i32.store (local.get $total_ptr) (global.get $pool_16_total))
        (i32.store (local.get $allocated_ptr) (global.get $pool_16_allocated))
        (i32.store (local.get $free_ptr) 
          (i32.sub (global.get $pool_16_total) (global.get $pool_16_allocated)))
        (return)))
    
    (if (i32.eq (local.get $pool_size) (global.get $POOL_32_SIZE))
      (then
        (i32.store (local.get $total_ptr) (global.get $pool_32_total))
        (i32.store (local.get $allocated_ptr) (global.get $pool_32_allocated))
        (i32.store (local.get $free_ptr) 
          (i32.sub (global.get $pool_32_total) (global.get $pool_32_allocated)))
        (return)))
    
    (if (i32.eq (local.get $pool_size) (global.get $POOL_64_SIZE))
      (then
        (i32.store (local.get $total_ptr) (global.get $pool_64_total))
        (i32.store (local.get $allocated_ptr) (global.get $pool_64_allocated))
        (i32.store (local.get $free_ptr) 
          (i32.sub (global.get $pool_64_total) (global.get $pool_64_allocated))))))
  
  ;; 碎片分析：计算使用率
  (func $calculate_utilization (param $pool_size i32) (result f32)
    (local $total i32)
    (local $allocated i32)
    
    (if (i32.eq (local.get $pool_size) (global.get $POOL_16_SIZE))
      (then
        (local.set $total (global.get $pool_16_total))
        (local.set $allocated (global.get $pool_16_allocated))))
    
    (if (i32.eq (local.get $pool_size) (global.get $POOL_32_SIZE))
      (then
        (local.set $total (global.get $pool_32_total))
        (local.set $allocated (global.get $pool_32_allocated))))
    
    (if (i32.eq (local.get $pool_size) (global.get $POOL_64_SIZE))
      (then
        (local.set $total (global.get $pool_64_total))
        (local.set $allocated (global.get $pool_64_allocated))))
    
    (if (i32.eqz (local.get $total))
      (then (return (f32.const 0))))
    
    (f32.div
      (f32.convert_i32_u (local.get $allocated))
      (f32.convert_i32_u (local.get $total))))
  
  (export "init_memory_pools" (func $init_memory_pools))
  (export "pool_alloc" (func $pool_alloc))
  (export "pool_free" (func $pool_free))
  (export "get_pool_stats" (func $get_pool_stats))
  (export "calculate_utilization" (func $calculate_utilization)))

综合项目

练习 5.6 内存管理系统 (★★★★★ 40分)

题目: 设计一个完整的内存管理系统，集成多种分配策略。

要求:

1. 集成栈、堆、池三种内存管理方式
2. 实现内存使用监控和泄漏检测
3. 支持内存压缩和垃圾回收
4. 提供统一的管理接口

(module
  (memory (export "memory") 4)  ;; 256KB，支持各种管理策略
  
  ;; 内存布局
  ;; 0x0000-0x1000: 系统控制区
  ;; 0x1000-0x2000: 栈区
  ;; 0x2000-0x8000: 堆区  
  ;; 0x8000-0x20000: 池区
  ;; 0x20000-0x40000: 静态数据区
  
  ;; 分配策略枚举
  (global $ALLOC_STACK i32 (i32.const 1))
  (global $ALLOC_HEAP i32 (i32.const 2))
  (global $ALLOC_POOL i32 (i32.const 3))
  
  ;; 统一分配接口
  (func $mem_alloc (param $size i32) (param $strategy i32) (result i32)
    (if (i32.eq (local.get $strategy) (global.get $ALLOC_STACK))
      (then (return (call $stack_alloc (local.get $size)))))
    
    (if (i32.eq (local.get $strategy) (global.get $ALLOC_HEAP))
      (then (return (call $heap_alloc (local.get $size)))))
    
    (if (i32.eq (local.get $strategy) (global.get $ALLOC_POOL))
      (then (return (call $pool_alloc (local.get $size)))))
    
    i32.const 0)
  
  ;; 统一释放接口
  (func $mem_free (param $ptr i32) (param $strategy i32)
    (if (i32.eq (local.get $strategy) (global.get $ALLOC_STACK))
      (then (call $stack_free (local.get $ptr))))
    
    (if (i32.eq (local.get $strategy) (global.get $ALLOC_HEAP))
      (then (call $heap_free (local.get $ptr))))
    
    (if (i32.eq (local.get $strategy) (global.get $ALLOC_POOL))
      (then (call $pool_free_auto (local.get $ptr)))))
  
  ;; 内存监控
  (func $get_memory_usage (param $total_ptr i32) (param $used_ptr i32) (param $free_ptr i32)
    ;; 计算各区域使用情况并汇总
    ;; 实现细节略...)
  
  ;; 泄漏检测
  (func $detect_leaks (result i32)
    ;; 扫描已分配但长时间未使用的内存块
    ;; 实现细节略...)
  
  ;; 内存压缩
  (func $compact_memory
    ;; 整理堆内存，消除碎片
    ;; 实现细节略...)
  
  ;; 垃圾回收
  (func $garbage_collect (result i32)
    ;; 标记-清除式垃圾回收
    ;; 实现细节略...)
  
  ;; 其他必要的辅助函数...
  ;; stack_alloc, heap_alloc, pool_alloc_auto 等
  
  (export "mem_alloc" (func $mem_alloc))
  (export "mem_free" (func $mem_free))
  (export "get_memory_usage" (func $get_memory_usage))
  (export "detect_leaks" (func $detect_leaks))
  (export "compact_memory" (func $compact_memory))
  (export "garbage_collect" (func $garbage_collect)))

总结

通过这些练习，你应该能够：

1. ✅ 掌握基础内存操作：读写、布局设计、对齐优化
2. ✅ 理解数据段应用：静态数据、查找表、配置管理
3. ✅ 实现性能优化：缓存友好访问、批量操作、向量化
4. ✅ 设计内存分配器：堆分配、内存池、统一管理
5. ✅ 构建完整系统：集成多种策略、监控和优化

进阶建议：

• 研究现代内存分配器算法（如 jemalloc、tcmalloc）
• 学习内存访问模式优化技术
• 掌握 SIMD 指令在 WebAssembly 中的应用
• 了解内存安全和漏洞防护技术

📝 下一步: 第6章 控制流练习

第6章 控制流

WebAssembly 的控制流指令构成了程序逻辑的骨架。本章将深入学习条件分支、循环结构、异常处理等高级控制流技术，掌握编写复杂程序逻辑的核心技能。

结构化控制流

6.1.1 控制流基础

WebAssembly 采用结构化控制流，所有控制结构都有明确的开始和结束：

(module
  ;; 基本的控制流结构演示
  (func $basic_control_flow (param $x i32) (result i32)
    ;; 块（block）：创建标签作用域
    (block $exit
      ;; 条件分支（if-then-else）
      (if (i32.gt_s (local.get $x) (i32.const 10))
        (then
          ;; 如果 x > 10，跳出块并返回 x*2
          (br $exit (i32.mul (local.get $x) (i32.const 2)))))
      
      ;; 循环（loop）
      (loop $increment
        ;; 递增 x
        (local.set $x (i32.add (local.get $x) (i32.const 1)))
        
        ;; 如果 x < 10，继续循环
        (br_if $increment (i32.lt_s (local.get $x) (i32.const 10))))
      
      ;; 默认返回值
      local.get $x))
  
  (export "basic_control_flow" (func $basic_control_flow)))

控制流指令概览：

控制结构：
- block    : 创建标签块，可以跳出
- loop     : 创建循环标签，可以跳回
- if       : 条件分支，支持 then 和 else

跳转指令：
- br       : 无条件跳转
- br_if    : 条件跳转
- br_table : 多路跳转（类似 switch）
- return   : 函数返回

异常处理：
- try      : 异常捕获块
- catch    : 异常处理
- throw    : 抛出异常

6.1.2 条件分支的高级用法

(module
  ;; 复杂条件判断
  (func $complex_conditions (param $a i32) (param $b i32) (param $c i32) (result i32)
    ;; 嵌套条件分支
    (if (result i32)
      (i32.gt_s (local.get $a) (i32.const 0))
      (then
        ;; a > 0 的情况
        (if (result i32)
          (i32.gt_s (local.get $b) (i32.const 0))
          (then
            ;; a > 0 && b > 0
            (if (result i32)
              (i32.gt_s (local.get $c) (i32.const 0))
              (then (i32.const 1))    ;; 全部为正
              (else (i32.const 2))))  ;; a,b 为正，c 非正
          (else
            ;; a > 0 && b <= 0
            (i32.const 3))))
      (else
        ;; a <= 0 的情况
        (if (result i32)
          (i32.eqz (local.get $a))
          (then (i32.const 0))    ;; a == 0
          (else (i32.const -1))))))   ;; a < 0
  
  ;; 使用 select 指令进行简单条件选择
  (func $conditional_select (param $condition i32) (param $true_val i32) (param $false_val i32) (result i32)
    ;; select 相当于三元运算符 condition ? true_val : false_val
    (select 
      (local.get $true_val) 
      (local.get $false_val) 
      (local.get $condition)))
  
  ;; 条件链式判断
  (func $grade_calculator (param $score i32) (result i32)
    ;; 返回等级：A=90+, B=80+, C=70+, D=60+, F<60
    (if (result i32)
      (i32.ge_s (local.get $score) (i32.const 90))
      (then (i32.const 65))  ;; 'A'
      (else
        (if (result i32)
          (i32.ge_s (local.get $score) (i32.const 80))
          (then (i32.const 66))  ;; 'B'
          (else
            (if (result i32)
              (i32.ge_s (local.get $score) (i32.const 70))
              (then (i32.const 67))  ;; 'C'
              (else
                (if (result i32)
                  (i32.ge_s (local.get $score) (i32.const 60))
                  (then (i32.const 68))  ;; 'D'
                  (else (i32.const 70)))))))))  ;; 'F'
  
  ;; 短路求值模拟
  (func $short_circuit_and (param $a i32) (param $b i32) (result i32)
    ;; 模拟 a && b 的短路求值
    (if (result i32)
      (local.get $a)
      (then (local.get $b))  ;; 如果 a 为真，返回 b
      (else (i32.const 0))))  ;; 如果 a 为假，返回 0
  
  (func $short_circuit_or (param $a i32) (param $b i32) (result i32)
    ;; 模拟 a || b 的短路求值
    (if (result i32)
      (local.get $a)
      (then (local.get $a))   ;; 如果 a 为真，返回 a
      (else (local.get $b))))  ;; 如果 a 为假，返回 b
  
  (export "complex_conditions" (func $complex_conditions))
  (export "conditional_select" (func $conditional_select))
  (export "grade_calculator" (func $grade_calculator))
  (export "short_circuit_and" (func $short_circuit_and))
  (export "short_circuit_or" (func $short_circuit_or)))

6.1.3 多路分支与跳转表

(module
  ;; 使用 br_table 实现多路分支
  (func $switch_statement (param $value i32) (result i32)
    ;; br_table 类似于 C 语言的 switch 语句
    (block $default
      (block $case_3
        (block $case_2
          (block $case_1
            (block $case_0
              ;; 检查值的范围并跳转
              (br_table $case_0 $case_1 $case_2 $case_3 $default
                (local.get $value)))
            
            ;; case 0: 返回 100
            (return (i32.const 100)))
          
          ;; case 1: 返回 200
          (return (i32.const 200)))
        
        ;; case 2: 返回 300
        (return (i32.const 300)))
      
      ;; case 3: 返回 400
      (return (i32.const 400)))
    
    ;; default: 返回 -1
    i32.const -1)
  
  ;; 函数指针模拟：通过跳转表调用不同函数
  (func $operation_add (param $a i32) (param $b i32) (result i32)
    (i32.add (local.get $a) (local.get $b)))
  
  (func $operation_sub (param $a i32) (param $b i32) (result i32)
    (i32.sub (local.get $a) (local.get $b)))
  
  (func $operation_mul (param $a i32) (param $b i32) (result i32)
    (i32.mul (local.get $a) (local.get $b)))
  
  (func $operation_div (param $a i32) (param $b i32) (result i32)
    (if (result i32)
      (i32.eqz (local.get $b))
      (then (i32.const 0))  ;; 除零保护
      (else (i32.div_s (local.get $a) (local.get $b)))))
  
  ;; 通过操作码调用相应函数
  (func $calculator (param $op i32) (param $a i32) (param $b i32) (result i32)
    (block $invalid
      (block $div
        (block $mul
          (block $sub
            (block $add
              ;; 根据操作码跳转: 0=add, 1=sub, 2=mul, 3=div
              (br_table $add $sub $mul $div $invalid (local.get $op)))
            
            ;; 加法
            (return (call $operation_add (local.get $a) (local.get $b))))
          
          ;; 减法
          (return (call $operation_sub (local.get $a) (local.get $b))))
        
        ;; 乘法
        (return (call $operation_mul (local.get $a) (local.get $b))))
      
      ;; 除法
      (return (call $operation_div (local.get $a) (local.get $b))))
    
    ;; 无效操作
    i32.const -999)
  
  ;; 状态机实现
  (func $state_machine (param $current_state i32) (param $input i32) (result i32)
    ;; 状态转换表：根据当前状态和输入决定下一个状态
    ;; 状态：0=初始, 1=处理中, 2=完成, 3=错误
    (block $error_state
      (block $complete_state
        (block $processing_state
          (block $initial_state
            (br_table $initial_state $processing_state $complete_state $error_state
              (local.get $current_state)))
          
          ;; 初始状态 (0)
          (if (result i32)
            (i32.eq (local.get $input) (i32.const 1))  ;; 开始信号
            (then (i32.const 1))  ;; 转到处理中
            (else 
              (if (result i32)
                (i32.eq (local.get $input) (i32.const 99))  ;; 错误信号
                (then (i32.const 3))  ;; 转到错误
                (else (i32.const 0)))))  ;; 保持初始状态
          (return))
        
        ;; 处理中状态 (1)
        (if (result i32)
          (i32.eq (local.get $input) (i32.const 2))  ;; 完成信号
          (then (i32.const 2))  ;; 转到完成
          (else
            (if (result i32)
              (i32.eq (local.get $input) (i32.const 99))  ;; 错误信号
              (then (i32.const 3))  ;; 转到错误
              (else (i32.const 1)))))  ;; 保持处理中
        (return))
      
      ;; 完成状态 (2)
      (if (result i32)
        (i32.eq (local.get $input) (i32.const 0))  ;; 重置信号
        (then (i32.const 0))  ;; 转到初始
        (else (i32.const 2)))  ;; 保持完成状态
      (return))
    
    ;; 错误状态 (3)
    (if (result i32)
      (i32.eq (local.get $input) (i32.const 0))  ;; 重置信号
      (then (i32.const 0))  ;; 转到初始
      (else (i32.const 3))))  ;; 保持错误状态
  
  (export "switch_statement" (func $switch_statement))
  (export "calculator" (func $calculator))
  (export "state_machine" (func $state_machine)))

循环控制

6.2.1 循环的基本形式

(module
  ;; while 循环模拟
  (func $while_loop_sum (param $n i32) (result i32)
    (local $sum i32)
    (local $i i32)
    
    (local.set $sum (i32.const 0))
    (local.set $i (i32.const 1))
    
    ;; while (i <= n)
    (loop $while_loop
      ;; 检查循环条件
      (if (i32.gt_s (local.get $i) (local.get $n))
        (then (br $while_loop)))  ;; 跳出循环
      
      ;; 循环体
      (local.set $sum 
        (i32.add (local.get $sum) (local.get $i)))
      
      ;; 递增计数器
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      ;; 继续循环
      (br $while_loop))
    
    local.get $sum)
  
  ;; do-while 循环模拟
  (func $do_while_factorial (param $n i32) (result i32)
    (local $result i32)
    (local $i i32)
    
    (local.set $result (i32.const 1))
    (local.set $i (local.get $n))
    
    ;; do { ... } while (i > 0)
    (loop $do_while_loop
      ;; 循环体
      (local.set $result 
        (i32.mul (local.get $result) (local.get $i)))
      
      ;; 递减计数器
      (local.set $i (i32.sub (local.get $i) (i32.const 1)))
      
      ;; 检查继续条件
      (br_if $do_while_loop (i32.gt_s (local.get $i) (i32.const 0))))
    
    local.get $result)
  
  ;; for 循环模拟
  (func $for_loop_power (param $base i32) (param $exp i32) (result i32)
    (local $result i32)
    (local $i i32)
    
    (local.set $result (i32.const 1))
    (local.set $i (i32.const 0))
    
    ;; for (i = 0; i < exp; i++)
    (loop $for_loop
      ;; 检查循环条件
      (if (i32.ge_s (local.get $i) (local.get $exp))
        (then (br $for_loop)))  ;; 跳出循环
      
      ;; 循环体
      (local.set $result 
        (i32.mul (local.get $result) (local.get $base)))
      
      ;; 递增计数器
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      ;; 继续循环
      (br $for_loop))
    
    local.get $result)
  
  ;; 无限循环与 break 模拟
  (func $infinite_loop_with_break (param $target i32) (result i32)
    (local $counter i32)
    
    (local.set $counter (i32.const 0))
    
    ;; 无限循环
    (loop $infinite_loop
      ;; 递增计数器
      (local.set $counter (i32.add (local.get $counter) (i32.const 1)))
      
      ;; break 条件
      (if (i32.eq (local.get $counter) (local.get $target))
        (then (br $infinite_loop)))  ;; 跳出循环
      
      ;; continue 条件示例
      (if (i32.rem_s (local.get $counter) (i32.const 2))
        (then (br $infinite_loop)))  ;; 跳过奇数，继续循环
      
      ;; 这里可以添加其他处理逻辑
      
      ;; 继续循环
      (br $infinite_loop))
    
    local.get $counter)
  
  (export "while_loop_sum" (func $while_loop_sum))
  (export "do_while_factorial" (func $do_while_factorial))
  (export "for_loop_power" (func $for_loop_power))
  (export "infinite_loop_with_break" (func $infinite_loop_with_break)))

6.2.2 嵌套循环与复杂控制

(module
  ;; 嵌套循环：矩阵操作
  (func $matrix_multiply_trace (param $size i32) (param $matrix_a i32) (param $matrix_b i32) (result i32)
    ;; 计算两个方阵相乘后的对角线元素之和
    (local $trace i32)
    (local $i i32)
    (local $j i32)
    (local $k i32)
    (local $sum i32)
    (local $a_elem i32)
    (local $b_elem i32)
    
    (local.set $trace (i32.const 0))
    (local.set $i (i32.const 0))
    
    ;; 外层循环：遍历对角线元素
    (loop $outer_loop
      (if (i32.ge_s (local.get $i) (local.get $size))
        (then (br $outer_loop)))
      
      (local.set $sum (i32.const 0))
      (local.set $k (i32.const 0))
      
      ;; 内层循环：计算 C[i][i] = Σ A[i][k] * B[k][i]
      (loop $inner_loop
        (if (i32.ge_s (local.get $k) (local.get $size))
          (then (br $inner_loop)))
        
        ;; 读取 A[i][k]
        (local.set $a_elem
          (i32.load
            (i32.add
              (local.get $matrix_a)
              (i32.mul
                (i32.add
                  (i32.mul (local.get $i) (local.get $size))
                  (local.get $k))
                (i32.const 4)))))
        
        ;; 读取 B[k][i]
        (local.set $b_elem
          (i32.load
            (i32.add
              (local.get $matrix_b)
              (i32.mul
                (i32.add
                  (i32.mul (local.get $k) (local.get $size))
                  (local.get $i))
                (i32.const 4)))))
        
        ;; 累加乘积
        (local.set $sum
          (i32.add 
            (local.get $sum)
            (i32.mul (local.get $a_elem) (local.get $b_elem))))
        
        (local.set $k (i32.add (local.get $k) (i32.const 1)))
        (br $inner_loop))
      
      ;; 累加到对角线和
      (local.set $trace (i32.add (local.get $trace) (local.get $sum)))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $outer_loop))
    
    local.get $trace)
  
  ;; 多重 break 和 continue
  (func $complex_nested_loops (param $rows i32) (param $cols i32) (result i32)
    (local $found i32)
    (local $i i32)
    (local $j i32)
    (local $value i32)
    
    (local.set $found (i32.const 0))
    (local.set $i (i32.const 0))
    
    ;; 外层循环标签
    (block $outer_break
      (loop $outer_loop
        (if (i32.ge_s (local.get $i) (local.get $rows))
          (then (br $outer_break)))
        
        (local.set $j (i32.const 0))
        
        ;; 内层循环
        (loop $inner_loop
          (if (i32.ge_s (local.get $j) (local.get $cols))
            (then (br $inner_loop)))
          
          ;; 模拟一些计算
          (local.set $value 
            (i32.add
              (i32.mul (local.get $i) (local.get $cols))
              (local.get $j)))
          
          ;; 跳过偶数值（类似 continue）
          (if (i32.eqz (i32.rem_s (local.get $value) (i32.const 2)))
            (then
              (local.set $j (i32.add (local.get $j) (i32.const 1)))
              (br $inner_loop)))
          
          ;; 找到特定条件时跳出所有循环
          (if (i32.eq (local.get $value) (i32.const 15))
            (then
              (local.set $found (i32.const 1))
              (br $outer_break)))
          
          (local.set $j (i32.add (local.get $j) (i32.const 1)))
          (br $inner_loop))
        
        (local.set $i (i32.add (local.get $i) (i32.const 1)))
        (br $outer_loop)))
    
    local.get $found)
  
  ;; 循环展开优化示例
  (func $unrolled_sum (param $array_ptr i32) (param $length i32) (result i32)
    (local $sum i32)
    (local $i i32)
    (local $remaining i32)
    
    (local.set $sum (i32.const 0))
    (local.set $i (i32.const 0))
    
    ;; 计算可以4路展开的循环次数
    (local.set $remaining (i32.rem_u (local.get $length) (i32.const 4)))
    
    ;; 4路展开的主循环
    (loop $unrolled_loop
      (if (i32.ge_u (local.get $i) 
                    (i32.sub (local.get $length) (local.get $remaining)))
        (then (br $unrolled_loop)))
      
      ;; 一次处理4个元素
      (local.set $sum
        (i32.add (local.get $sum)
          (i32.add
            (i32.add
              (i32.load (i32.add (local.get $array_ptr) 
                                 (i32.mul (local.get $i) (i32.const 4))))
              (i32.load (i32.add (local.get $array_ptr) 
                                 (i32.mul (i32.add (local.get $i) (i32.const 1)) (i32.const 4)))))
            (i32.add
              (i32.load (i32.add (local.get $array_ptr) 
                                 (i32.mul (i32.add (local.get $i) (i32.const 2)) (i32.const 4))))
              (i32.load (i32.add (local.get $array_ptr) 
                                 (i32.mul (i32.add (local.get $i) (i32.const 3)) (i32.const 4))))))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 4)))
      (br $unrolled_loop))
    
    ;; 处理剩余元素
    (loop $remainder_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $remainder_loop)))
      
      (local.set $sum
        (i32.add (local.get $sum)
          (i32.load (i32.add (local.get $array_ptr) 
                             (i32.mul (local.get $i) (i32.const 4))))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $remainder_loop))
    
    local.get $sum)
  
  (export "matrix_multiply_trace" (func $matrix_multiply_trace))
  (export "complex_nested_loops" (func $complex_nested_loops))
  (export "unrolled_sum" (func $unrolled_sum)))

异常处理（实验性）

6.3.1 异常处理基础

WebAssembly 的异常处理仍在发展中，以下是基本概念：

(module
  ;; 定义异常标签
  (tag $division_by_zero_error)
  (tag $overflow_error (param i32))
  
  ;; 可能抛出异常的除法函数
  (func $safe_divide (param $a i32) (param $b i32) (result i32)
    ;; 检查除零
    (if (i32.eqz (local.get $b))
      (then (throw $division_by_zero_error)))
    
    ;; 检查溢出（简化检查）
    (if (i32.and 
          (i32.eq (local.get $a) (i32.const 0x80000000))
          (i32.eq (local.get $b) (i32.const -1)))
      (then (throw $overflow_error (local.get $a))))
    
    ;; 正常除法
    i32.div_s (local.get $a) (local.get $b))
  
  ;; 异常处理示例
  (func $division_with_error_handling (param $a i32) (param $b i32) (result i32)
    ;; try-catch 块
    (try (result i32)
      ;; try 块：尝试执行可能出错的代码
      (do 
        (call $safe_divide (local.get $a) (local.get $b)))
      
      ;; catch 块：处理除零异常
      (catch $division_by_zero_error
        ;; 返回特殊值表示除零错误
        (i32.const -1))
      
      ;; catch 块：处理溢出异常
      (catch $overflow_error
        ;; 参数已经在栈上，直接丢弃并返回最小值
        drop
        (i32.const 0x80000000))))
  
  ;; 嵌套异常处理
  (func $nested_exception_handling (param $values_ptr i32) (param $count i32) (result i32)
    (local $i i32)
    (local $sum i32)
    (local $value i32)
    
    (local.set $sum (i32.const 0))
    (local.set $i (i32.const 0))
    
    ;; 外层异常处理
    (try (result i32)
      (do
        ;; 遍历数组
        (loop $process_loop
          (if (i32.ge_u (local.get $i) (local.get $count))
            (then (br $process_loop)))
          
          ;; 读取值
          (local.set $value
            (i32.load 
              (i32.add (local.get $values_ptr) 
                       (i32.mul (local.get $i) (i32.const 4)))))
          
          ;; 内层异常处理：处理每个元素
          (try
            (do
              ;; 尝试用当前和除以当前值
              (local.set $sum 
                (call $safe_divide (local.get $sum) (local.get $value))))
            
            ;; 处理除零：跳过这个值
            (catch $division_by_zero_error
              nop)
            
            ;; 处理溢出：使用安全值
            (catch $overflow_error
              drop
              (local.set $sum (i32.const 1))))
          
          (local.set $i (i32.add (local.get $i) (i32.const 1)))
          (br $process_loop))
        
        ;; 返回最终和
        local.get $sum)
      
      ;; 外层捕获：处理意外情况
      (catch_all
        ;; 返回错误码
        (i32.const -999))))
  
  ;; 资源清理模式（模拟 finally）
  (func $resource_management (param $resource_id i32) (result i32)
    (local $result i32)
    (local $resource_acquired i32)
    
    ;; 获取资源
    (local.set $resource_acquired (i32.const 1))
    
    ;; 主要逻辑（可能抛出异常）
    (try (result i32)
      (do
        ;; 模拟可能失败的操作
        (if (i32.eq (local.get $resource_id) (i32.const 13))
          (then (throw $division_by_zero_error)))
        
        ;; 正常处理
        (local.set $result (i32.mul (local.get $resource_id) (i32.const 10)))
        local.get $result)
      
      ;; 异常处理
      (catch_all
        (local.set $result (i32.const -1))
        local.get $result))
    
    ;; 资源清理（无论是否有异常都会执行）
    (if (local.get $resource_acquired)
      (then
        ;; 释放资源的逻辑
        (local.set $resource_acquired (i32.const 0))))
    
    local.get $result)
  
  (export "safe_divide" (func $safe_divide))
  (export "division_with_error_handling" (func $division_with_error_handling))
  (export "nested_exception_handling" (func $nested_exception_handling))
  (export "resource_management" (func $resource_management)))

6.3.2 错误处理最佳实践

在异常处理不可用时，使用传统的错误处理模式：

(module
  ;; 错误码定义
  (global $ERROR_NONE i32 (i32.const 0))
  (global $ERROR_INVALID_PARAM i32 (i32.const 1))
  (global $ERROR_OUT_OF_MEMORY i32 (i32.const 2))
  (global $ERROR_DIVISION_BY_ZERO i32 (i32.const 3))
  (global $ERROR_OVERFLOW i32 (i32.const 4))
  
  ;; 全局错误状态
  (global $last_error (mut i32) (i32.const 0))
  
  ;; 设置错误状态
  (func $set_error (param $error_code i32)
    (global.set $last_error (local.get $error_code)))
  
  ;; 获取错误状态
  (func $get_error (result i32)
    (global.get $last_error))
  
  ;; 清除错误状态
  (func $clear_error
    (global.set $last_error (global.get $ERROR_NONE)))
  
  ;; 结果和错误组合类型（模拟 Result<T, E>）
  ;; 使用内存布局：[error_code][value]
  (func $create_result (param $error_code i32) (param $value i32) (param $result_ptr i32)
    (i32.store (local.get $result_ptr) (local.get $error_code))
    (i32.store (i32.add (local.get $result_ptr) (i32.const 4)) (local.get $value)))
  
  ;; 检查结果是否成功
  (func $result_is_ok (param $result_ptr i32) (result i32)
    (i32.eqz (i32.load (local.get $result_ptr))))
  
  ;; 获取结果值（假设已检查成功）
  (func $result_get_value (param $result_ptr i32) (result i32)
    (i32.load (i32.add (local.get $result_ptr) (i32.const 4))))
  
  ;; 获取错误码
  (func $result_get_error (param $result_ptr i32) (result i32)
    (i32.load (local.get $result_ptr)))
  
  ;; 安全的数学操作
  (func $safe_add (param $a i32) (param $b i32) (param $result_ptr i32)
    (local $sum i64)
    
    ;; 使用64位运算检查32位溢出
    (local.set $sum 
      (i64.add 
        (i64.extend_i32_s (local.get $a))
        (i64.extend_i32_s (local.get $b))))
    
    ;; 检查是否超出32位范围
    (if (i64.or
          (i64.gt_s (local.get $sum) (i64.const 0x7FFFFFFF))
          (i64.lt_s (local.get $sum) (i64.const -0x80000000)))
      (then
        ;; 溢出错误
        (call $create_result 
          (global.get $ERROR_OVERFLOW) 
          (i32.const 0) 
          (local.get $result_ptr)))
      (else
        ;; 成功
        (call $create_result 
          (global.get $ERROR_NONE) 
          (i32.wrap_i64 (local.get $sum))
          (local.get $result_ptr)))))
  
  (func $safe_multiply (param $a i32) (param $b i32) (param $result_ptr i32)
    (local $product i64)
    
    ;; 使用64位运算检查32位溢出
    (local.set $product 
      (i64.mul 
        (i64.extend_i32_s (local.get $a))
        (i64.extend_i32_s (local.get $b))))
    
    ;; 检查是否超出32位范围
    (if (i64.or
          (i64.gt_s (local.get $product) (i64.const 0x7FFFFFFF))
          (i64.lt_s (local.get $product) (i64.const -0x80000000)))
      (then
        ;; 溢出错误
        (call $create_result 
          (global.get $ERROR_OVERFLOW) 
          (i32.const 0) 
          (local.get $result_ptr)))
      (else
        ;; 成功
        (call $create_result 
          (global.get $ERROR_NONE) 
          (i32.wrap_i64 (local.get $product))
          (local.get $result_ptr)))))
  
  (func $safe_divide (param $a i32) (param $b i32) (param $result_ptr i32)
    ;; 检查除零
    (if (i32.eqz (local.get $b))
      (then
        (call $create_result 
          (global.get $ERROR_DIVISION_BY_ZERO) 
          (i32.const 0) 
          (local.get $result_ptr))
        (return)))
    
    ;; 检查最小值除以-1的特殊情况
    (if (i32.and
          (i32.eq (local.get $a) (i32.const 0x80000000))
          (i32.eq (local.get $b) (i32.const -1)))
      (then
        (call $create_result 
          (global.get $ERROR_OVERFLOW) 
          (i32.const 0) 
          (local.get $result_ptr))
        (return)))
    
    ;; 正常除法
    (call $create_result 
      (global.get $ERROR_NONE) 
      (i32.div_s (local.get $a) (local.get $b))
      (local.get $result_ptr)))
  
  ;; 错误传播示例
  (func $complex_calculation (param $a i32) (param $b i32) (param $c i32) (param $result_ptr i32)
    (local $temp_result i64)  ;; 8字节临时结果
    (local $intermediate i32)
    
    ;; 分配临时结果空间
    (local.set $temp_result (i64.const 0))
    
    ;; 第一步：a + b
    (call $safe_add (local.get $a) (local.get $b) (i32.wrap_i64 (local.get $temp_result)))
    
    ;; 检查第一步是否成功
    (if (i32.eqz (call $result_is_ok (i32.wrap_i64 (local.get $temp_result))))
      (then
        ;; 传播错误
        (call $create_result 
          (call $result_get_error (i32.wrap_i64 (local.get $temp_result)))
          (i32.const 0)
          (local.get $result_ptr))
        (return)))
    
    ;; 获取中间结果
    (local.set $intermediate (call $result_get_value (i32.wrap_i64 (local.get $temp_result))))
    
    ;; 第二步：result * c
    (call $safe_multiply (local.get $intermediate) (local.get $c) (i32.wrap_i64 (local.get $temp_result)))
    
    ;; 检查第二步是否成功
    (if (i32.eqz (call $result_is_ok (i32.wrap_i64 (local.get $temp_result))))
      (then
        ;; 传播错误
        (call $create_result 
          (call $result_get_error (i32.wrap_i64 (local.get $temp_result)))
          (i32.const 0)
          (local.get $result_ptr))
        (return)))
    
    ;; 所有操作都成功，复制最终结果
    (call $create_result 
      (global.get $ERROR_NONE)
      (call $result_get_value (i32.wrap_i64 (local.get $temp_result)))
      (local.get $result_ptr)))
  
  (export "set_error" (func $set_error))
  (export "get_error" (func $get_error))
  (export "clear_error" (func $clear_error))
  (export "result_is_ok" (func $result_is_ok))
  (export "result_get_value" (func $result_get_value))
  (export "result_get_error" (func $result_get_error))
  (export "safe_add" (func $safe_add))
  (export "safe_multiply" (func $safe_multiply))
  (export "safe_divide" (func $safe_divide))
  (export "complex_calculation" (func $complex_calculation)))

性能优化技巧

6.4.1 分支预测优化

(module
  ;; 分支预测友好的代码结构
  (func $optimized_search (param $array_ptr i32) (param $length i32) (param $target i32) (result i32)
    (local $i i32)
    (local $value i32)
    
    ;; 将最常见的情况放在 then 分支
    (loop $search_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $search_loop)))  ;; 跳出循环（不常见）
      
      (local.set $value 
        (i32.load (i32.add (local.get $array_ptr) 
                           (i32.mul (local.get $i) (i32.const 4)))))
      
      ;; 大多数情况下不会找到目标（继续循环）
      (if (i32.ne (local.get $value) (local.get $target))
        (then
          ;; 常见情况：继续搜索
          (local.set $i (i32.add (local.get $i) (i32.const 1)))
          (br $search_loop))
        (else
          ;; 不常见情况：找到目标
          (return (local.get $i))))
      
      ;; 这里不会执行到
      unreachable)
    
    ;; 没找到
    i32.const -1)
  
  ;; 减少分支的优化
  (func $branchless_max (param $a i32) (param $b i32) (result i32)
    ;; 使用 select 指令避免分支
    (select 
      (local.get $a) 
      (local.get $b) 
      (i32.gt_s (local.get $a) (local.get $b))))
  
  (func $branchless_abs (param $x i32) (result i32)
    (local $mask i32)
    
    ;; 算术右移获取符号掩码
    (local.set $mask (i32.shr_s (local.get $x) (i32.const 31)))
    
    ;; 无分支绝对值：(x ^ mask) - mask
    (i32.sub
      (i32.xor (local.get $x) (local.get $mask))
      (local.get $mask)))
  
  ;; 分支表优化
  (func $optimized_state_machine (param $state i32) (param $input i32) (result i32)
    ;; 将状态转换表存储在内存中以提高效率
    (local $table_offset i32)
    
    ;; 状态转换表基址
    (local.set $table_offset (i32.const 0x1000))
    
    ;; 计算表索引：state * 4 + input
    ;; 假设每个状态有4个可能的输入
    (i32.load
      (i32.add
        (local.get $table_offset)
        (i32.mul
          (i32.add
            (i32.mul (local.get $state) (i32.const 4))
            (local.get $input))
          (i32.const 4)))))
  
  (export "optimized_search" (func $optimized_search))
  (export "branchless_max" (func $branchless_max))
  (export "branchless_abs" (func $branchless_abs))
  (export "optimized_state_machine" (func $optimized_state_machine)))

6.4.2 循环优化技术

(module
  ;; 循环强度减少
  (func $strength_reduction (param $array_ptr i32) (param $length i32) (result i32)
    (local $sum i32)
    (local $i i32)
    (local $current_ptr i32)
    
    ;; 使用指针递增代替乘法
    (local.set $current_ptr (local.get $array_ptr))
    
    (loop $strength_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $strength_loop)))
      
      ;; 直接使用指针，避免地址计算
      (local.set $sum
        (i32.add (local.get $sum) (i32.load (local.get $current_ptr))))
      
      ;; 指针递增（比乘法更快）
      (local.set $current_ptr (i32.add (local.get $current_ptr) (i32.const 4)))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      (br $strength_loop))
    
    local.get $sum)
  
  ;; 循环分割优化
  (func $loop_splitting (param $array_ptr i32) (param $length i32) (param $threshold i32) (result i32)
    (local $sum i32)
    (local $i i32)
    (local $value i32)
    
    ;; 第一个循环：处理小于阈值的元素
    (local.set $i (i32.const 0))
    (loop $small_values_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $small_values_loop)))
      
      (local.set $value 
        (i32.load (i32.add (local.get $array_ptr) 
                           (i32.mul (local.get $i) (i32.const 4)))))
      
      ;; 只处理小值
      (if (i32.lt_s (local.get $value) (local.get $threshold))
        (then
          (local.set $sum (i32.add (local.get $sum) (local.get $value)))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $small_values_loop))
    
    ;; 第二个循环：处理大于等于阈值的元素
    (local.set $i (i32.const 0))
    (loop $large_values_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $large_values_loop)))
      
      (local.set $value 
        (i32.load (i32.add (local.get $array_ptr) 
                           (i32.mul (local.get $i) (i32.const 4)))))
      
      ;; 只处理大值
      (if (i32.ge_s (local.get $value) (local.get $threshold))
        (then
          (local.set $sum (i32.add (local.get $sum) (local.get $value)))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $large_values_loop))
    
    local.get $sum)
  
  ;; 循环融合
  (func $loop_fusion (param $a_ptr i32) (param $b_ptr i32) (param $c_ptr i32) (param $length i32)
    (local $i i32)
    (local $a_val i32)
    (local $b_val i32)
    
    ;; 融合两个独立的循环到一个
    (loop $fused_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $fused_loop)))
      
      ;; 原本的第一个循环：A[i] = A[i] * 2
      (local.set $a_val 
        (i32.load (i32.add (local.get $a_ptr) 
                           (i32.mul (local.get $i) (i32.const 4)))))
      (i32.store 
        (i32.add (local.get $a_ptr) (i32.mul (local.get $i) (i32.const 4)))
        (i32.mul (local.get $a_val) (i32.const 2)))
      
      ;; 原本的第二个循环：C[i] = A[i] + B[i]
      (local.set $a_val 
        (i32.load (i32.add (local.get $a_ptr) 
                           (i32.mul (local.get $i) (i32.const 4)))))
      (local.set $b_val 
        (i32.load (i32.add (local.get $b_ptr) 
                           (i32.mul (local.get $i) (i32.const 4)))))
      (i32.store 
        (i32.add (local.get $c_ptr) (i32.mul (local.get $i) (i32.const 4)))
        (i32.add (local.get $a_val) (local.get $b_val)))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $fused_loop)))
  
  (export "strength_reduction" (func $strength_reduction))
  (export "loop_splitting" (func $loop_splitting))
  (export "loop_fusion" (func $loop_fusion)))

本章小结

通过本章学习，你已经掌握了：

1. 结构化控制流：条件分支、多路跳转的高级技巧
2. 循环控制：各种循环模式和嵌套循环的高效实现
3. 异常处理：现代异常机制和传统错误处理模式
4. 性能优化：分支预测、循环优化等关键技术

这些技能为编写高效、可维护的 WebAssembly 程序奠定了坚实基础。

📝 进入下一步：第7章 JavaScript 交互

🎯 重点技能：

• ✅ 条件分支优化
• ✅ 循环设计模式
• ✅ 异常处理策略
• ✅ 控制流性能调优
• ✅ 复杂逻辑实现

第6章 控制流练习题

本章练习题旨在深入理解WebAssembly的控制流结构，包括条件分支、循环、异常处理和性能优化技术。通过这些练习，你将掌握WAT格式的控制流编程技巧。

练习1：基础条件分支 (10分)

题目：实现一个函数，根据输入参数的值返回不同的结果：

• 如果输入小于0，返回-1
• 如果输入等于0，返回0
• 如果输入大于0，返回1

(module
  ;; 符号函数：返回输入数字的符号
  (func $sign (param $num i32) (result i32)
    (local $result i32)
    
    ;; 检查是否小于0
    (if (i32.lt_s (local.get $num) (i32.const 0))
      (then
        (local.set $result (i32.const -1))
      )
      (else
        ;; 检查是否等于0
        (if (i32.eq (local.get $num) (i32.const 0))
          (then
            (local.set $result (i32.const 0))
          )
          (else
            (local.set $result (i32.const 1))
          )
        )
      )
    )
    
    (local.get $result)
  )
  
  (export "sign" (func $sign))
)

练习2：循环与累加 (15分)

题目：实现一个计算阶乘的函数，使用loop指令而不是递归。要求处理边界情况（0! = 1）。

(module
  ;; 计算阶乘函数
  (func $factorial (param $n i32) (result i32)
    (local $result i32)
    (local $counter i32)
    
    ;; 处理边界情况：0! = 1, 1! = 1
    (if (i32.le_u (local.get $n) (i32.const 1))
      (then
        (return (i32.const 1))
      )
    )
    
    ;; 初始化变量
    (local.set $result (i32.const 1))
    (local.set $counter (i32.const 2))
    
    ;; 循环计算阶乘
    (loop $factorial_loop
      ;; 累乘
      (local.set $result 
        (i32.mul 
          (local.get $result) 
          (local.get $counter)
        )
      )
      
      ;; 递增计数器
      (local.set $counter 
        (i32.add (local.get $counter) (i32.const 1))
      )
      
      ;; 检查是否继续循环
      (if (i32.le_u (local.get $counter) (local.get $n))
        (then
          (br $factorial_loop)
        )
      )
    )
    
    (local.get $result)
  )
  
  (export "factorial" (func $factorial))
)

练习3：嵌套循环与二维数组 (20分)

题目：实现一个函数，计算3x3矩阵的所有元素之和。矩阵以一维数组形式存储在线性内存中。

(module
  (memory 1)
  
  ;; 计算3x3矩阵元素之和
  (func $matrix_sum (param $matrix_ptr i32) (result i32)
    (local $sum i32)
    (local $row i32)
    (local $col i32)
    (local $offset i32)
    (local $value i32)
    
    (local.set $sum (i32.const 0))
    (local.set $row (i32.const 0))
    
    ;; 外层循环：遍历行
    (loop $row_loop
      (local.set $col (i32.const 0))
      
      ;; 内层循环：遍历列
      (loop $col_loop
        ;; 计算偏移量：offset = (row * 3 + col) * 4
        (local.set $offset
          (i32.mul
            (i32.add
              (i32.mul (local.get $row) (i32.const 3))
              (local.get $col)
            )
            (i32.const 4)
          )
        )
        
        ;; 从内存加载值
        (local.set $value
          (i32.load 
            (i32.add (local.get $matrix_ptr) (local.get $offset))
          )
        )
        
        ;; 累加
        (local.set $sum 
          (i32.add (local.get $sum) (local.get $value))
        )
        
        ;; 列计数器递增
        (local.set $col 
          (i32.add (local.get $col) (i32.const 1))
        )
        
        ;; 检查列循环条件
        (if (i32.lt_u (local.get $col) (i32.const 3))
          (then (br $col_loop))
        )
      )
      
      ;; 行计数器递增
      (local.set $row 
        (i32.add (local.get $row) (i32.const 1))
      )
      
      ;; 检查行循环条件
      (if (i32.lt_u (local.get $row) (i32.const 3))
        (then (br $row_loop))
      )
    )
    
    (local.get $sum)
  )
  
  ;; 辅助函数：初始化测试矩阵
  (func $init_test_matrix (param $ptr i32)
    ;; 设置3x3矩阵：
    ;; [1, 2, 3]
    ;; [4, 5, 6] 
    ;; [7, 8, 9]
    (i32.store (i32.add (local.get $ptr) (i32.const 0)) (i32.const 1))
    (i32.store (i32.add (local.get $ptr) (i32.const 4)) (i32.const 2))
    (i32.store (i32.add (local.get $ptr) (i32.const 8)) (i32.const 3))
    (i32.store (i32.add (local.get $ptr) (i32.const 12)) (i32.const 4))
    (i32.store (i32.add (local.get $ptr) (i32.const 16)) (i32.const 5))
    (i32.store (i32.add (local.get $ptr) (i32.const 20)) (i32.const 6))
    (i32.store (i32.add (local.get $ptr) (i32.const 24)) (i32.const 7))
    (i32.store (i32.add (local.get $ptr) (i32.const 28)) (i32.const 8))
    (i32.store (i32.add (local.get $ptr) (i32.const 32)) (i32.const 9))
  )
  
  (export "matrix_sum" (func $matrix_sum))
  (export "init_test_matrix" (func $init_test_matrix))
)

练习4：异常处理与错误检查 (20分)

题目：实现一个安全的除法函数，需要检查除零错误。如果除数为0，返回一个特殊的错误码(-1)，否则返回正常的除法结果。

(module
  ;; 全局变量存储错误状态
  (global $error_flag (mut i32) (i32.const 0))
  
  ;; 错误码定义
  (global $ERR_NONE i32 (i32.const 0))
  (global $ERR_DIVIDE_BY_ZERO i32 (i32.const 1))
  
  ;; 安全除法函数
  (func $safe_divide (param $dividend i32) (param $divisor i32) (result i32)
    ;; 重置错误标志
    (global.set $error_flag (global.get $ERR_NONE))
    
    ;; 检查除数是否为0
    (if (i32.eq (local.get $divisor) (i32.const 0))
      (then
        ;; 设置错误标志
        (global.set $error_flag (global.get $ERR_DIVIDE_BY_ZERO))
        ;; 返回错误码
        (return (i32.const -1))
      )
    )
    
    ;; 执行正常除法
    (i32.div_s (local.get $dividend) (local.get $divisor))
  )
  
  ;; 获取最后的错误码
  (func $get_last_error (result i32)
    (global.get $error_flag)
  )
  
  ;; 检查操作是否成功
  (func $is_success (result i32)
    (i32.eq (global.get $error_flag) (global.get $ERR_NONE))
  )
  
  ;; 批量除法操作（演示错误传播）
  (func $batch_divide (param $a i32) (param $b i32) (param $c i32) (param $d i32) (result i32)
    (local $result1 i32)
    (local $result2 i32)
    
    ;; 第一次除法：a / b
    (local.set $result1 (call $safe_divide (local.get $a) (local.get $b)))
    
    ;; 检查是否有错误
    (if (i32.ne (call $is_success) (i32.const 1))
      (then
        ;; 传播错误
        (return (i32.const -1))
      )
    )
    
    ;; 第二次除法：c / d
    (local.set $result2 (call $safe_divide (local.get $c) (local.get $d)))
    
    ;; 检查是否有错误
    (if (i32.ne (call $is_success) (i32.const 1))
      (then
        ;; 传播错误
        (return (i32.const -1))
      )
    )
    
    ;; 返回两次除法结果的和
    (i32.add (local.get $result1) (local.get $result2))
  )
  
  (export "safe_divide" (func $safe_divide))
  (export "get_last_error" (func $get_last_error))
  (export "is_success" (func $is_success))
  (export "batch_divide" (func $batch_divide))
)

练习5：状态机实现 (25分)

题目：实现一个简单的状态机，模拟一个自动售货机的工作流程：

• 状态：IDLE(0), COIN_INSERTED(1), ITEM_SELECTED(2), DISPENSING(3)
• 事件：INSERT_COIN(0), SELECT_ITEM(1), DISPENSE(2), RESET(3)

(module
  ;; 状态定义
  (global $STATE_IDLE i32 (i32.const 0))
  (global $STATE_COIN_INSERTED i32 (i32.const 1))
  (global $STATE_ITEM_SELECTED i32 (i32.const 2))
  (global $STATE_DISPENSING i32 (i32.const 3))
  
  ;; 事件定义
  (global $EVENT_INSERT_COIN i32 (i32.const 0))
  (global $EVENT_SELECT_ITEM i32 (i32.const 1))
  (global $EVENT_DISPENSE i32 (i32.const 2))
  (global $EVENT_RESET i32 (i32.const 3))
  
  ;; 当前状态
  (global $current_state (mut i32) (i32.const 0))
  
  ;; 错误码
  (global $ERROR_INVALID_TRANSITION i32 (i32.const -1))
  (global $SUCCESS i32 (i32.const 0))
  
  ;; 状态机处理函数
  (func $process_event (param $event i32) (result i32)
    (local $new_state i32)
    (local $current i32)
    
    (local.set $current (global.get $current_state))
    
    ;; 根据当前状态和事件确定新状态
    (block $state_machine
      ;; IDLE状态的处理
      (if (i32.eq (local.get $current) (global.get $STATE_IDLE))
        (then
          (if (i32.eq (local.get $event) (global.get $EVENT_INSERT_COIN))
            (then
              (local.set $new_state (global.get $STATE_COIN_INSERTED))
              (br $state_machine)
            )
          )
          ;; 无效转换
          (return (global.get $ERROR_INVALID_TRANSITION))
        )
      )
      
      ;; COIN_INSERTED状态的处理
      (if (i32.eq (local.get $current) (global.get $STATE_COIN_INSERTED))
        (then
          (block $coin_inserted_block
            (if (i32.eq (local.get $event) (global.get $EVENT_SELECT_ITEM))
              (then
                (local.set $new_state (global.get $STATE_ITEM_SELECTED))
                (br $state_machine)
              )
            )
            (if (i32.eq (local.get $event) (global.get $EVENT_RESET))
              (then
                (local.set $new_state (global.get $STATE_IDLE))
                (br $state_machine)
              )
            )
            ;; 无效转换
            (return (global.get $ERROR_INVALID_TRANSITION))
          )
        )
      )
      
      ;; ITEM_SELECTED状态的处理
      (if (i32.eq (local.get $current) (global.get $STATE_ITEM_SELECTED))
        (then
          (block $item_selected_block
            (if (i32.eq (local.get $event) (global.get $EVENT_DISPENSE))
              (then
                (local.set $new_state (global.get $STATE_DISPENSING))
                (br $state_machine)
              )
            )
            (if (i32.eq (local.get $event) (global.get $EVENT_RESET))
              (then
                (local.set $new_state (global.get $STATE_IDLE))
                (br $state_machine)
              )
            )
            ;; 无效转换
            (return (global.get $ERROR_INVALID_TRANSITION))
          )
        )
      )
      
      ;; DISPENSING状态的处理
      (if (i32.eq (local.get $current) (global.get $STATE_DISPENSING))
        (then
          ;; 分发完成后自动回到IDLE状态
          (local.set $new_state (global.get $STATE_IDLE))
        )
        (else
          ;; 未知状态
          (return (global.get $ERROR_INVALID_TRANSITION))
        )
      )
    )
    
    ;; 更新状态
    (global.set $current_state (local.get $new_state))
    (global.get $SUCCESS)
  )
  
  ;; 获取当前状态
  (func $get_current_state (result i32)
    (global.get $current_state)
  )
  
  ;; 重置状态机
  (func $reset_state_machine
    (global.set $current_state (global.get $STATE_IDLE))
  )
  
  ;; 状态名称获取（返回状态码对应的数值）
  (func $get_state_name (param $state i32) (result i32)
    ;; 简单返回状态值，实际应用中可以返回字符串指针
    (local.get $state)
  )
  
  ;; 模拟完整的购买流程
  (func $simulate_purchase (result i32)
    (local $result i32)
    
    ;; 重置状态机
    (call $reset_state_machine)
    
    ;; 投币
    (local.set $result (call $process_event (global.get $EVENT_INSERT_COIN)))
    (if (i32.ne (local.get $result) (global.get $SUCCESS))
      (then (return (local.get $result)))
    )
    
    ;; 选择商品
    (local.set $result (call $process_event (global.get $EVENT_SELECT_ITEM)))
    (if (i32.ne (local.get $result) (global.get $SUCCESS))
      (then (return (local.get $result)))
    )
    
    ;; 分发商品
    (local.set $result (call $process_event (global.get $EVENT_DISPENSE)))
    (if (i32.ne (local.get $result) (global.get $SUCCESS))
      (then (return (local.get $result)))
    )
    
    ;; 自动完成分发
    (call $process_event (global.get $EVENT_RESET))
  )
  
  (export "process_event" (func $process_event))
  (export "get_current_state" (func $get_current_state))
  (export "reset_state_machine" (func $reset_state_machine))
  (export "simulate_purchase" (func $simulate_purchase))
)

练习6：性能优化的控制流 (30分)

题目：实现一个高性能的数组搜索函数，要求：

1. 使用二分搜索算法
2. 针对分支预测进行优化
3. 处理边界情况
4. 提供详细的性能分析

(module
  (memory 1)
  
  ;; 二分搜索函数（优化版本）
  (func $binary_search_optimized (param $arr_ptr i32) (param $arr_len i32) (param $target i32) (result i32)
    (local $left i32)
    (local $right i32)
    (local $mid i32)
    (local $mid_value i32)
    (local $comparison i32)
    
    ;; 边界检查
    (if (i32.le_u (local.get $arr_len) (i32.const 0))
      (then (return (i32.const -1)))
    )
    
    ;; 初始化搜索范围
    (local.set $left (i32.const 0))
    (local.set $right (i32.sub (local.get $arr_len) (i32.const 1)))
    
    ;; 主搜索循环
    (loop $search_loop
      ;; 检查搜索范围是否有效
      (if (i32.gt_s (local.get $left) (local.get $right))
        (then (return (i32.const -1)))
      )
      
      ;; 计算中点（避免溢出的方法）
      (local.set $mid
        (i32.add
          (local.get $left)
          (i32.shr_u
            (i32.sub (local.get $right) (local.get $left))
            (i32.const 1)
          )
        )
      )
      
      ;; 加载中点元素值
      (local.set $mid_value
        (i32.load
          (i32.add
            (local.get $arr_ptr)
            (i32.mul (local.get $mid) (i32.const 4))
          )
        )
      )
      
      ;; 比较目标值与中点值
      (local.set $comparison (i32.sub (local.get $target) (local.get $mid_value)))
      
      ;; 优化的分支结构（减少分支错误预测）
      (if (i32.eq (local.get $comparison) (i32.const 0))
        (then
          ;; 找到目标值
          (return (local.get $mid))
        )
        (else
          ;; 根据比较结果调整搜索范围
          (if (i32.lt_s (local.get $comparison) (i32.const 0))
            (then
              ;; target < mid_value，搜索左半部分
              (local.set $right (i32.sub (local.get $mid) (i32.const 1)))
            )
            (else
              ;; target > mid_value，搜索右半部分
              (local.set $left (i32.add (local.get $mid) (i32.const 1)))
            )
          )
        )
      )
      
      ;; 继续循环
      (br $search_loop)
    )
    
    ;; 理论上不会执行到这里
    (i32.const -1)
  )
  
  ;; 线性搜索（用于性能对比）
  (func $linear_search (param $arr_ptr i32) (param $arr_len i32) (param $target i32) (result i32)
    (local $i i32)
    (local $current_value i32)
    
    (local.set $i (i32.const 0))
    
    (loop $linear_loop
      ;; 边界检查
      (if (i32.ge_u (local.get $i) (local.get $arr_len))
        (then (return (i32.const -1)))
      )
      
      ;; 加载当前元素
      (local.set $current_value
        (i32.load
          (i32.add
            (local.get $arr_ptr)
            (i32.mul (local.get $i) (i32.const 4))
          )
        )
      )
      
      ;; 检查是否匹配
      (if (i32.eq (local.get $current_value) (local.get $target))
        (then (return (local.get $i)))
      )
      
      ;; 递增计数器
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $linear_loop)
    )
    
    (i32.const -1)
  )
  
  ;; 预测优化的搜索函数
  (func $predictive_search (param $arr_ptr i32) (param $arr_len i32) (param $target i32) (result i32)
    (local $left i32)
    (local $right i32)
    (local $mid i32)
    (local $mid_value i32)
    (local $likely_direction i32)
    
    ;; 边界检查
    (if (i32.le_u (local.get $arr_len) (i32.const 0))
      (then (return (i32.const -1)))
    )
    
    ;; 快速检查边界值
    (if (i32.eq 
          (local.get $target) 
          (i32.load (local.get $arr_ptr)))
      (then (return (i32.const 0)))
    )
    
    (if (i32.eq 
          (local.get $target)
          (i32.load 
            (i32.add 
              (local.get $arr_ptr)
              (i32.mul 
                (i32.sub (local.get $arr_len) (i32.const 1))
                (i32.const 4)
              )
            )
          ))
      (then (return (i32.sub (local.get $arr_len) (i32.const 1))))
    )
    
    ;; 使用标准二分搜索
    (call $binary_search_optimized 
          (local.get $arr_ptr) 
          (local.get $arr_len) 
          (local.get $target))
  )
  
  ;; 批量搜索测试函数
  (func $batch_search_test (param $arr_ptr i32) (param $arr_len i32) (result i32)
    (local $found_count i32)
    (local $i i32)
    (local $search_target i32)
    (local $result i32)
    
    (local.set $found_count (i32.const 0))
    (local.set $i (i32.const 0))
    
    ;; 搜索一系列目标值
    (loop $batch_loop
      (if (i32.ge_u (local.get $i) (i32.const 10))
        (then (return (local.get $found_count)))
      )
      
      ;; 设置搜索目标（搜索值i）
      (local.set $search_target (local.get $i))
      
      ;; 执行搜索
      (local.set $result
        (call $binary_search_optimized
              (local.get $arr_ptr)
              (local.get $arr_len)
              (local.get $search_target)))
      
      ;; 如果找到，增加计数
      (if (i32.ge_s (local.get $result) (i32.const 0))
        (then
          (local.set $found_count 
                     (i32.add (local.get $found_count) (i32.const 1)))
        )
      )
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $batch_loop)
    )
    
    (local.get $found_count)
  )
  
  ;; 数组初始化辅助函数
  (func $init_sorted_array (param $arr_ptr i32) (param $size i32)
    (local $i i32)
    
    (local.set $i (i32.const 0))
    
    (loop $init_loop
      (if (i32.ge_u (local.get $i) (local.get $size))
        (then (return))
      )
      
      ;; 设置 arr[i] = i * 2
      (i32.store
        (i32.add
          (local.get $arr_ptr)
          (i32.mul (local.get $i) (i32.const 4))
        )
        (i32.mul (local.get $i) (i32.const 2))
      )
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $init_loop)
    )
  )
  
  (export "binary_search_optimized" (func $binary_search_optimized))
  (export "linear_search" (func $linear_search))
  (export "predictive_search" (func $predictive_search))
  (export "batch_search_test" (func $batch_search_test))
  (export "init_sorted_array" (func $init_sorted_array))
)

练习总结

通过这些练习，你应该掌握了：

1. 基础控制流：条件分支、循环结构的实现
2. 复杂控制逻辑：嵌套结构、状态机设计
3. 错误处理：异常检测、错误传播机制
4. 性能优化：分支预测、算法复杂度优化
5. 实际应用：数组操作、数值计算、状态管理

这些技能是开发高性能WebAssembly应用的基础，建议结合实际项目进行练习和应用。

第7章 JavaScript 交互

WebAssembly 与 JavaScript 的紧密集成是其强大之处。本章将深入探讨两种环境之间的数据传递、函数调用、内存共享等核心技术，以及性能优化的最佳实践。

WebAssembly JavaScript API

7.1.1 模块加载与实例化

WebAssembly 模块的加载和实例化是使用的第一步：

基础加载模式：

// 方法1：使用 WebAssembly.instantiate（推荐）
async function loadWasm() {
  const wasmModule = await WebAssembly.instantiateStreaming(
    fetch('module.wasm')
  );
  return wasmModule.instance.exports;
}

// 方法2：分步加载
async function loadWasmStep() {
  const wasmBytes = await fetch('module.wasm').then(r => r.arrayBuffer());
  const wasmModule = await WebAssembly.instantiate(wasmBytes);
  return wasmModule.instance.exports;
}

// 方法3：预编译模块（适合重复使用）
async function loadWasmPrecompiled() {
  const wasmBytes = await fetch('module.wasm').then(r => r.arrayBuffer());
  const module = await WebAssembly.compile(wasmBytes);
  const instance = await WebAssembly.instantiate(module);
  return instance.exports;
}

带导入的模块加载：

// JavaScript 函数供 WebAssembly 调用
const importObject = {
  env: {
    // 数学函数
    js_sin: Math.sin,
    js_cos: Math.cos,
    js_log: Math.log,
    
    // 控制台输出
    console_log: (value) => console.log('WASM:', value),
    console_error: (ptr, len) => {
      const memory = wasmInstance.exports.memory;
      const message = new TextDecoder().decode(
        new Uint8Array(memory.buffer, ptr, len)
      );
      console.error('WASM Error:', message);
    },
    
    // 内存分配辅助
    js_malloc: (size) => {
      // 简化的内存分配记录
      console.log(`Allocating ${size} bytes`);
      return 0; // 实际应该返回内存地址
    },
    
    // 时间函数
    current_time_ms: () => Date.now(),
    
    // 随机数生成
    random: () => Math.random()
  },
  
  // 内存导入（如果需要）
  memory: new WebAssembly.Memory({ initial: 256, maximum: 512 })
};

// 对应的 WAT 模块
const watSource = `
(module
  ;; 导入 JavaScript 函数
  (import "env" "js_sin" (func $js_sin (param f64) (result f64)))
  (import "env" "console_log" (func $console_log (param i32)))
  (import "env" "current_time_ms" (func $current_time_ms (result f64)))
  
  ;; 导入内存
  (import "env" "memory" (memory 256 512))
  
  ;; 使用导入函数的 WebAssembly 函数
  (func $math_demo (param $angle f64) (result f64)
    ;; 记录计算开始
    (call $console_log (i32.const 1))
    
    ;; 计算 sin(angle)
    (call $js_sin (local.get $angle)))
  
  (func $benchmark_demo (result f64)
    (local $start_time f64)
    (local $end_time f64)
    (local $i i32)
    (local $sum f64)
    
    ;; 记录开始时间
    (local.set $start_time (call $current_time_ms))
    
    ;; 执行一些计算
    (loop $calc_loop
      (if (i32.ge_s (local.get $i) (i32.const 1000000))
        (then (br $calc_loop)))
      
      (local.set $sum 
        (f64.add 
          (local.get $sum)
          (call $js_sin (f64.convert_i32_s (local.get $i)))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $calc_loop))
    
    ;; 记录结束时间
    (local.set $end_time (call $current_time_ms))
    
    ;; 返回耗时
    (f64.sub (local.get $end_time) (local.get $start_time)))
  
  (export "math_demo" (func $math_demo))
  (export "benchmark_demo" (func $benchmark_demo))
  (export "memory" (memory 0)))
`;

// 加载并实例化
async function loadWasmWithImports() {
  const wasmBytes = await WebAssembly.wat2wasm(watSource);
  const wasmModule = await WebAssembly.instantiate(wasmBytes, importObject);
  return wasmModule.instance.exports;
}

7.1.2 异步加载和错误处理

class WasmLoader {
  constructor() {
    this.modules = new Map();
    this.loading = new Map();
  }
  
  // 单例加载，避免重复请求
  async loadModule(name, wasmPath, importObject = {}) {
    // 如果已经加载，直接返回
    if (this.modules.has(name)) {
      return this.modules.get(name);
    }
    
    // 如果正在加载，等待完成
    if (this.loading.has(name)) {
      return await this.loading.get(name);
    }
    
    // 开始加载
    const loadPromise = this._loadModuleInternal(name, wasmPath, importObject);
    this.loading.set(name, loadPromise);
    
    try {
      const exports = await loadPromise;
      this.modules.set(name, exports);
      this.loading.delete(name);
      return exports;
    } catch (error) {
      this.loading.delete(name);
      throw error;
    }
  }
  
  async _loadModuleInternal(name, wasmPath, importObject) {
    try {
      console.log(`Loading WASM module: ${name}`);
      
      // 检查 WebAssembly 支持
      if (!WebAssembly) {
        throw new Error('WebAssembly not supported in this environment');
      }
      
      // 加载并实例化
      const response = await fetch(wasmPath);
      
      if (!response.ok) {
        throw new Error(`Failed to fetch ${wasmPath}: ${response.statusText}`);
      }
      
      const wasmModule = await WebAssembly.instantiateStreaming(response, importObject);
      
      console.log(`Successfully loaded WASM module: ${name}`);
      return wasmModule.instance.exports;
      
    } catch (error) {
      // 如果 instantiateStreaming 失败，尝试传统方法
      if (error.name === 'TypeError' && error.message.includes('streaming')) {
        console.warn('Falling back to non-streaming WASM loading');
        return await this._loadModuleFallback(wasmPath, importObject);
      }
      
      console.error(`Failed to load WASM module ${name}:`, error);
      throw new Error(`WASM loading failed: ${error.message}`);
    }
  }
  
  async _loadModuleFallback(wasmPath, importObject) {
    const response = await fetch(wasmPath);
    const wasmBytes = await response.arrayBuffer();
    const wasmModule = await WebAssembly.instantiate(wasmBytes, importObject);
    return wasmModule.instance.exports;
  }
  
  // 预加载多个模块
  async preloadModules(modules) {
    const loadPromises = modules.map(({ name, path, imports }) => 
      this.loadModule(name, path, imports)
    );
    
    return await Promise.all(loadPromises);
  }
  
  // 获取已加载的模块
  getModule(name) {
    return this.modules.get(name);
  }
  
  // 检查模块是否已加载
  hasModule(name) {
    return this.modules.has(name);
  }
  
  // 卸载模块
  unloadModule(name) {
    this.modules.delete(name);
  }
}

// 使用示例
const wasmLoader = new WasmLoader();

async function initializeApp() {
  try {
    // 定义要加载的模块
    const modules = [
      {
        name: 'math',
        path: './math.wasm',
        imports: {
          env: {
            sin: Math.sin,
            cos: Math.cos,
            sqrt: Math.sqrt
          }
        }
      },
      {
        name: 'image',
        path: './image.wasm',
        imports: {
          env: {
            memory: new WebAssembly.Memory({ initial: 64 })
          }
        }
      }
    ];
    
    // 预加载所有模块
    await wasmLoader.preloadModules(modules);
    
    console.log('All WASM modules loaded successfully');
    
    // 使用模块
    const mathModule = wasmLoader.getModule('math');
    const result = mathModule.calculate(3.14159);
    console.log('Calculation result:', result);
    
  } catch (error) {
    console.error('Failed to initialize app:', error);
    // 实现降级方案
    fallbackToJavaScript();
  }
}

function fallbackToJavaScript() {
  console.log('Using JavaScript fallback implementation');
  // 纯 JavaScript 实现
}

数据类型转换

7.2.1 基本类型传递

WebAssembly 和 JavaScript 之间的数据类型转换：

// 对应的 WAT 模块
const basicTypesWat = `
(module
  ;; 基本数据类型函数
  (func $add_i32 (param $a i32) (param $b i32) (result i32)
    (i32.add (local.get $a) (local.get $b)))
  
  (func $add_i64 (param $a i64) (param $b i64) (result i64)
    (i64.add (local.get $a) (local.get $b)))
  
  (func $add_f32 (param $a f32) (param $b f32) (result f32)
    (f32.add (local.get $a) (local.get $b)))
  
  (func $add_f64 (param $a f64) (param $b f64) (result f64)
    (f64.add (local.get $a) (local.get $b)))
  
  ;; 类型转换示例
  (func $int_to_float (param $x i32) (result f32)
    (f32.convert_i32_s (local.get $x)))
  
  (func $float_to_int (param $x f32) (result i32)
    (i32.trunc_f32_s (local.get $x)))
  
  ;; 布尔逻辑（使用 i32）
  (func $logical_and (param $a i32) (param $b i32) (result i32)
    (i32.and (local.get $a) (local.get $b)))
  
  (func $is_even (param $x i32) (result i32)
    (i32.eqz (i32.rem_u (local.get $x) (i32.const 2))))
  
  ;; 多返回值（需要较新的 WebAssembly 版本）
  (func $divmod (param $a i32) (param $b i32) (result i32 i32)
    (i32.div_s (local.get $a) (local.get $b))
    (i32.rem_s (local.get $a) (local.get $b)))
  
  (export "add_i32" (func $add_i32))
  (export "add_i64" (func $add_i64))
  (export "add_f32" (func $add_f32))
  (export "add_f64" (func $add_f64))
  (export "int_to_float" (func $int_to_float))
  (export "float_to_int" (func $float_to_int))
  (export "logical_and" (func $logical_and))
  (export "is_even" (func $is_even))
  (export "divmod" (func $divmod)))
`;

// JavaScript 类型转换辅助工具
class TypeConverter {
  constructor(wasmExports) {
    this.wasm = wasmExports;
  }
  
  // 安全的整数转换
  toWasmI32(jsValue) {
    if (typeof jsValue === 'boolean') {
      return jsValue ? 1 : 0;
    }
    
    const num = Number(jsValue);
    if (!Number.isFinite(num)) {
      throw new Error(`Cannot convert ${jsValue} to i32`);
    }
    
    // 确保在 32 位有符号整数范围内
    return Math.trunc(num) | 0;
  }
  
  // BigInt 到 i64 转换
  toWasmI64(jsValue) {
    if (typeof jsValue === 'bigint') {
      return jsValue;
    }
    
    if (typeof jsValue === 'number') {
      if (!Number.isFinite(jsValue)) {
        throw new Error(`Cannot convert ${jsValue} to i64`);
      }
      return BigInt(Math.trunc(jsValue));
    }
    
    return BigInt(jsValue);
  }
  
  // 浮点数转换
  toWasmF32(jsValue) {
    const num = Number(jsValue);
    if (!Number.isFinite(num) && !Number.isNaN(num)) {
      throw new Error(`Cannot convert ${jsValue} to f32`);
    }
    return Math.fround(num); // 强制转换为 32 位浮点
  }
  
  toWasmF64(jsValue) {
    const num = Number(jsValue);
    if (!Number.isFinite(num) && !Number.isNaN(num)) {
      throw new Error(`Cannot convert ${jsValue} to f64`);
    }
    return num;
  }
  
  // 从 WASM 返回值转换
  fromWasmI32(wasmValue) {
    return wasmValue | 0; // 确保是 32 位整数
  }
  
  fromWasmI64(wasmValue) {
    return BigInt.asIntN(64, wasmValue);
  }
  
  fromWasmF32(wasmValue) {
    return Math.fround(wasmValue);
  }
  
  fromWasmF64(wasmValue) {
    return wasmValue;
  }
  
  // 布尔值转换
  toWasmBool(jsValue) {
    return jsValue ? 1 : 0;
  }
  
  fromWasmBool(wasmValue) {
    return wasmValue !== 0;
  }
}

// 使用示例
async function demonstrateTypeConversion() {
  const wasmModule = await WebAssembly.instantiate(
    await WebAssembly.wat2wasm(basicTypesWat)
  );
  
  const converter = new TypeConverter(wasmModule.instance.exports);
  const { exports } = wasmModule.instance;
  
  // 基本运算
  console.log('32-bit addition:', exports.add_i32(10, 20)); // 30
  console.log('64-bit addition:', exports.add_i64(10n, 20n)); // 30n
  console.log('32-bit float addition:', exports.add_f32(3.14, 2.86)); // 6.0
  console.log('64-bit float addition:', exports.add_f64(3.14159, 2.71828)); // 5.85987
  
  // 类型转换
  console.log('Int to float:', exports.int_to_float(42)); // 42.0
  console.log('Float to int:', exports.float_to_int(3.99)); // 3
  
  // 布尔逻辑
  console.log('Logical AND:', converter.fromWasmBool(exports.logical_and(
    converter.toWasmBool(true),
    converter.toWasmBool(false)
  ))); // false
  
  console.log('Is even:', converter.fromWasmBool(exports.is_even(42))); // true
  
  // 边界情况处理
  try {
    console.log('Large number conversion:', converter.toWasmI32(2**50));
  } catch (error) {
    console.warn('Conversion error:', error.message);
  }
  
  // 多返回值（如果支持）
  if (exports.divmod) {
    const [quotient, remainder] = exports.divmod(17, 5);
    console.log(`17 ÷ 5 = ${quotient} remainder ${remainder}`); // 3 remainder 2
  }
}

7.2.2 复杂数据结构

// 复杂数据结构的 WAT 模块
const structuresWat = `
(module
  (memory (export "memory") 1)
  
  ;; 结构体操作：Point { x: f32, y: f32 }
  (func $create_point (param $x f32) (param $y f32) (param $ptr i32)
    (f32.store (local.get $ptr) (local.get $x))
    (f32.store (i32.add (local.get $ptr) (i32.const 4)) (local.get $y)))
  
  (func $get_point_x (param $ptr i32) (result f32)
    (f32.load (local.get $ptr)))
  
  (func $get_point_y (param $ptr i32) (result f32)
    (f32.load (i32.add (local.get $ptr) (i32.const 4))))
  
  (func $point_distance (param $p1 i32) (param $p2 i32) (result f32)
    (local $dx f32)
    (local $dy f32)
    
    ;; dx = p2.x - p1.x
    (local.set $dx
      (f32.sub
        (f32.load (local.get $p2))
        (f32.load (local.get $p1))))
    
    ;; dy = p2.y - p1.y
    (local.set $dy
      (f32.sub
        (f32.load (i32.add (local.get $p2) (i32.const 4)))
        (f32.load (i32.add (local.get $p1) (i32.const 4)))))
    
    ;; sqrt(dx*dx + dy*dy)
    (f32.sqrt
      (f32.add
        (f32.mul (local.get $dx) (local.get $dx))
        (f32.mul (local.get $dy) (local.get $dy)))))
  
  ;; 数组操作
  (func $sum_array (param $ptr i32) (param $length i32) (result f32)
    (local $sum f32)
    (local $i i32)
    
    (loop $sum_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $sum_loop)))
      
      (local.set $sum
        (f32.add
          (local.get $sum)
          (f32.load
            (i32.add
              (local.get $ptr)
              (i32.mul (local.get $i) (i32.const 4))))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $sum_loop))
    
    local.get $sum)
  
  (func $reverse_array (param $ptr i32) (param $length i32)
    (local $i i32)
    (local $j i32)
    (local $temp f32)
    
    (local.set $j (i32.sub (local.get $length) (i32.const 1)))
    
    (loop $reverse_loop
      (if (i32.ge_u (local.get $i) (local.get $j))
        (then (br $reverse_loop)))
      
      ;; 交换 arr[i] 和 arr[j]
      (local.set $temp
        (f32.load
          (i32.add (local.get $ptr) (i32.mul (local.get $i) (i32.const 4)))))
      
      (f32.store
        (i32.add (local.get $ptr) (i32.mul (local.get $i) (i32.const 4)))
        (f32.load
          (i32.add (local.get $ptr) (i32.mul (local.get $j) (i32.const 4)))))
      
      (f32.store
        (i32.add (local.get $ptr) (i32.mul (local.get $j) (i32.const 4)))
        (local.get $temp))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (local.set $j (i32.sub (local.get $j) (i32.const 1)))
      (br $reverse_loop)))
  
  ;; 字符串操作
  (func $string_length (param $ptr i32) (result i32)
    (local $len i32)
    
    (loop $strlen_loop
      (if (i32.eqz (i32.load8_u (i32.add (local.get $ptr) (local.get $len))))
        (then (br $strlen_loop)))
      
      (local.set $len (i32.add (local.get $len) (i32.const 1)))
      (br $strlen_loop))
    
    local.get $len)
  
  (func $string_compare (param $str1 i32) (param $str2 i32) (result i32)
    (local $i i32)
    (local $char1 i32)
    (local $char2 i32)
    
    (loop $strcmp_loop
      (local.set $char1 (i32.load8_u (i32.add (local.get $str1) (local.get $i))))
      (local.set $char2 (i32.load8_u (i32.add (local.get $str2) (local.get $i))))
      
      ;; 如果字符不同，返回差值
      (if (i32.ne (local.get $char1) (local.get $char2))
        (then (return (i32.sub (local.get $char1) (local.get $char2)))))
      
      ;; 如果到达字符串末尾，返回 0
      (if (i32.eqz (local.get $char1))
        (then (return (i32.const 0))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $strcmp_loop))
    
    i32.const 0)
  
  (export "create_point" (func $create_point))
  (export "get_point_x" (func $get_point_x))
  (export "get_point_y" (func $get_point_y))
  (export "point_distance" (func $point_distance))
  (export "sum_array" (func $sum_array))
  (export "reverse_array" (func $reverse_array))
  (export "string_length" (func $string_length))
  (export "string_compare" (func $string_compare)))
`;

// JavaScript 数据结构包装器
class StructureManager {
  constructor(wasmExports, memory) {
    this.wasm = wasmExports;
    this.memory = memory;
    this.heap = new Uint8Array(memory.buffer);
    this.heapF32 = new Float32Array(memory.buffer);
    this.heapI32 = new Int32Array(memory.buffer);
    this.allocatedPointers = new Set();
    this.nextPointer = 1024; // 从 1KB 开始分配
  }
  
  // 简单的内存分配器
  allocate(bytes) {
    const ptr = this.nextPointer;
    this.nextPointer += Math.ceil(bytes / 4) * 4; // 4字节对齐
    this.allocatedPointers.add(ptr);
    
    // 检查内存溢出
    if (this.nextPointer >= this.memory.buffer.byteLength) {
      throw new Error('Out of WebAssembly memory');
    }
    
    return ptr;
  }
  
  // 释放内存
  free(ptr) {
    this.allocatedPointers.delete(ptr);
  }
  
  // Point 结构体包装
  createPoint(x, y) {
    const ptr = this.allocate(8); // 2 个 f32 = 8 字节
    this.wasm.create_point(x, y, ptr);
    return new PointWrapper(this, ptr);
  }
  
  // 数组包装
  createFloatArray(jsArray) {
    const ptr = this.allocate(jsArray.length * 4);
    const wasmArray = new Float32Array(this.memory.buffer, ptr, jsArray.length);
    wasmArray.set(jsArray);
    return new FloatArrayWrapper(this, ptr, jsArray.length);
  }
  
  // 字符串包装
  createString(jsString) {
    const encoder = new TextEncoder();
    const bytes = encoder.encode(jsString + '\0'); // 添加 null 终止符
    const ptr = this.allocate(bytes.length);
    const wasmBytes = new Uint8Array(this.memory.buffer, ptr, bytes.length);
    wasmBytes.set(bytes);
    return new StringWrapper(this, ptr);
  }
  
  // 从内存读取字符串
  readString(ptr) {
    const length = this.wasm.string_length(ptr);
    const bytes = new Uint8Array(this.memory.buffer, ptr, length);
    return new TextDecoder().decode(bytes);
  }
  
  // 清理所有分配的内存
  cleanup() {
    this.allocatedPointers.clear();
    this.nextPointer = 1024;
  }
}

// Point 包装器
class PointWrapper {
  constructor(manager, ptr) {
    this.manager = manager;
    this.ptr = ptr;
  }
  
  get x() {
    return this.manager.wasm.get_point_x(this.ptr);
  }
  
  get y() {
    return this.manager.wasm.get_point_y(this.ptr);
  }
  
  distanceTo(other) {
    return this.manager.wasm.point_distance(this.ptr, other.ptr);
  }
  
  toObject() {
    return { x: this.x, y: this.y };
  }
  
  free() {
    this.manager.free(this.ptr);
  }
}

// 浮点数组包装器
class FloatArrayWrapper {
  constructor(manager, ptr, length) {
    this.manager = manager;
    this.ptr = ptr;
    this.length = length;
    this.view = new Float32Array(manager.memory.buffer, ptr, length);
  }
  
  get(index) {
    if (index < 0 || index >= this.length) {
      throw new Error('Array index out of bounds');
    }
    return this.view[index];
  }
  
  set(index, value) {
    if (index < 0 || index >= this.length) {
      throw new Error('Array index out of bounds');
    }
    this.view[index] = value;
  }
  
  sum() {
    return this.manager.wasm.sum_array(this.ptr, this.length);
  }
  
  reverse() {
    this.manager.wasm.reverse_array(this.ptr, this.length);
    return this;
  }
  
  toArray() {
    return Array.from(this.view);
  }
  
  free() {
    this.manager.free(this.ptr);
  }
}

// 字符串包装器
class StringWrapper {
  constructor(manager, ptr) {
    this.manager = manager;
    this.ptr = ptr;
  }
  
  length() {
    return this.manager.wasm.string_length(this.ptr);
  }
  
  compareTo(other) {
    return this.manager.wasm.string_compare(this.ptr, other.ptr);
  }
  
  toString() {
    return this.manager.readString(this.ptr);
  }
  
  free() {
    this.manager.free(this.ptr);
  }
}

// 使用示例
async function demonstrateStructures() {
  const wasmModule = await WebAssembly.instantiate(
    await WebAssembly.wat2wasm(structuresWat)
  );
  
  const manager = new StructureManager(
    wasmModule.instance.exports,
    wasmModule.instance.exports.memory
  );
  
  try {
    // Point 结构体
    const point1 = manager.createPoint(3.0, 4.0);
    const point2 = manager.createPoint(0.0, 0.0);
    
    console.log('Point 1:', point1.toObject()); // { x: 3, y: 4 }
    console.log('Point 2:', point2.toObject()); // { x: 0, y: 0 }
    console.log('Distance:', point1.distanceTo(point2)); // 5.0
    
    // 数组操作
    const array = manager.createFloatArray([1.5, 2.5, 3.5, 4.5, 5.5]);
    console.log('Original array:', array.toArray()); // [1.5, 2.5, 3.5, 4.5, 5.5]
    console.log('Sum:', array.sum()); // 17.5
    
    array.reverse();
    console.log('Reversed array:', array.toArray()); // [5.5, 4.5, 3.5, 2.5, 1.5]
    
    // 字符串操作
    const str1 = manager.createString('Hello');
    const str2 = manager.createString('World');
    const str3 = manager.createString('Hello');
    
    console.log('String 1 length:', str1.length()); // 5
    console.log('String 1 content:', str1.toString()); // "Hello"
    console.log('Compare Hello vs World:', str1.compareTo(str2)); // < 0
    console.log('Compare Hello vs Hello:', str1.compareTo(str3)); // 0
    
    // 清理内存
    point1.free();
    point2.free();
    array.free();
    str1.free();
    str2.free();
    str3.free();
    
  } finally {
    manager.cleanup();
  }
}

内存共享

7.3.1 共享内存操作

// 高级内存管理的 WAT 模块
const memoryManagementWat = `
(module
  (memory (export "memory") 16 256)  ;; 1MB 初始，16MB 最大
  
  ;; 全局内存状态
  (global $heap_base (mut i32) (i32.const 65536))  ;; 64KB 后开始堆
  (global $heap_top (mut i32) (i32.const 65536))
  (global $memory_size (mut i32) (i32.const 16))   ;; 当前页数
  
  ;; 内存统计
  (func $get_heap_base (result i32)
    (global.get $heap_base))
  
  (func $get_heap_top (result i32)
    (global.get $heap_top))
  
  (func $get_heap_size (result i32)
    (i32.sub (global.get $heap_top) (global.get $heap_base)))
  
  (func $get_memory_pages (result i32)
    (memory.size))
  
  ;; 简单的 bump 分配器
  (func $malloc (param $size i32) (result i32)
    (local $ptr i32)
    (local $new_top i32)
    
    ;; 对齐到 8 字节边界
    (local.set $size
      (i32.and
        (i32.add (local.get $size) (i32.const 7))
        (i32.const 0xFFFFFFF8)))
    
    ;; 获取当前指针
    (local.set $ptr (global.get $heap_top))
    (local.set $new_top (i32.add (local.get $ptr) (local.get $size)))
    
    ;; 检查是否需要增长内存
    (if (i32.gt_u (local.get $new_top) (i32.mul (memory.size) (i32.const 65536)))
      (then
        ;; 计算需要的页数
        (local.set $size 
          (i32.div_u
            (i32.add (local.get $new_top) (i32.const 65535))
            (i32.const 65536)))
        
        ;; 尝试增长内存
        (if (i32.eq (memory.grow (i32.sub (local.get $size) (memory.size))) (i32.const -1))
          (then (return (i32.const 0))))))  ;; 分配失败
    
    ;; 更新堆顶
    (global.set $heap_top (local.get $new_top))
    
    local.get $ptr)
  
  ;; 批量数据操作
  (func $memcpy (param $dest i32) (param $src i32) (param $size i32)
    (memory.copy (local.get $dest) (local.get $src) (local.get $size)))
  
  (func $memset (param $dest i32) (param $value i32) (param $size i32)
    (memory.fill (local.get $dest) (local.get $value) (local.get $size)))
  
  (func $memcmp (param $ptr1 i32) (param $ptr2 i32) (param $size i32) (result i32)
    (local $i i32)
    (local $byte1 i32)
    (local $byte2 i32)
    
    (loop $cmp_loop
      (if (i32.ge_u (local.get $i) (local.get $size))
        (then (br $cmp_loop)))
      
      (local.set $byte1 (i32.load8_u (i32.add (local.get $ptr1) (local.get $i))))
      (local.set $byte2 (i32.load8_u (i32.add (local.get $ptr2) (local.get $i))))
      
      (if (i32.ne (local.get $byte1) (local.get $byte2))
        (then (return (i32.sub (local.get $byte1) (local.get $byte2)))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $cmp_loop))
    
    i32.const 0)
  
  ;; 内存模式填充
  (func $pattern_fill (param $dest i32) (param $pattern i32) (param $pattern_size i32) (param $total_size i32)
    (local $written i32)
    (local $copy_size i32)
    
    (loop $pattern_loop
      (if (i32.ge_u (local.get $written) (local.get $total_size))
        (then (br $pattern_loop)))
      
      ;; 计算这次要复制的大小
      (local.set $copy_size 
        (select
          (local.get $pattern_size)
          (i32.sub (local.get $total_size) (local.get $written))
          (i32.le_u
            (i32.add (local.get $written) (local.get $pattern_size))
            (local.get $total_size))))
      
      ;; 复制模式
      (memory.copy
        (i32.add (local.get $dest) (local.get $written))
        (local.get $pattern)
        (local.get $copy_size))
      
      (local.set $written (i32.add (local.get $written) (local.get $copy_size)))
      (br $pattern_loop)))
  
  ;; 内存检查和验证
  (func $memory_checksum (param $ptr i32) (param $size i32) (result i32)
    (local $checksum i32)
    (local $i i32)
    
    (loop $checksum_loop
      (if (i32.ge_u (local.get $i) (local.get $size))
        (then (br $checksum_loop)))
      
      (local.set $checksum
        (i32.add
          (local.get $checksum)
          (i32.load8_u (i32.add (local.get $ptr) (local.get $i)))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $checksum_loop))
    
    local.get $checksum)
  
  (export "malloc" (func $malloc))
  (export "get_heap_base" (func $get_heap_base))
  (export "get_heap_top" (func $get_heap_top))
  (export "get_heap_size" (func $get_heap_size))
  (export "get_memory_pages" (func $get_memory_pages))
  (export "memcpy" (func $memcpy))
  (export "memset" (func $memset))
  (export "memcmp" (func $memcmp))
  (export "pattern_fill" (func $pattern_fill))
  (export "memory_checksum" (func $memory_checksum)))
`;

// 高级内存管理器
class AdvancedMemoryManager {
  constructor(wasmExports, memory) {
    this.wasm = wasmExports;
    this.memory = memory;
    this.memoryViews = new Map();
    this.allocations = new Map();
    this.nextId = 1;
    
    // 创建不同类型的视图
    this.updateMemoryViews();
  }
  
  updateMemoryViews() {
    const buffer = this.memory.buffer;
    this.memoryViews.set('uint8', new Uint8Array(buffer));
    this.memoryViews.set('uint16', new Uint16Array(buffer));
    this.memoryViews.set('uint32', new Uint32Array(buffer));
    this.memoryViews.set('int8', new Int8Array(buffer));
    this.memoryViews.set('int16', new Int16Array(buffer));
    this.memoryViews.set('int32', new Int32Array(buffer));
    this.memoryViews.set('float32', new Float32Array(buffer));
    this.memoryViews.set('float64', new Float64Array(buffer));
  }
  
  // 检查内存是否发生了增长
  checkMemoryGrowth() {
    const currentPages = this.wasm.get_memory_pages();
    const currentSize = currentPages * 65536;
    
    if (currentSize !== this.memory.buffer.byteLength) {
      console.log(`Memory grew from ${this.memory.buffer.byteLength} to ${currentSize} bytes`);
      this.updateMemoryViews();
    }
  }
  
  // 分配内存并跟踪
  allocate(size, description = '') {
    this.checkMemoryGrowth();
    
    const ptr = this.wasm.malloc(size);
    if (ptr === 0) {
      throw new Error(`Failed to allocate ${size} bytes`);
    }
    
    const id = this.nextId++;
    this.allocations.set(id, {
      ptr,
      size,
      description,
      timestamp: Date.now()
    });
    
    return { id, ptr, size };
  }
  
  // 获取内存视图
  getView(type, ptr, length) {
    this.checkMemoryGrowth();
    
    const view = this.memoryViews.get(type);
    if (!view) {
      throw new Error(`Unknown view type: ${type}`);
    }
    
    const elementSize = view.BYTES_PER_ELEMENT;
    const start = Math.floor(ptr / elementSize);
    
    return view.subarray(start, start + length);
  }
  
  // 写入 JavaScript 数组到 WebAssembly 内存
  writeArray(jsArray, type = 'uint8') {
    const allocation = this.allocate(jsArray.length * this.getTypeSize(type));
    const view = this.getView(type, allocation.ptr, jsArray.length);
    view.set(jsArray);
    return allocation;
  }
  
  // 从 WebAssembly 内存读取到 JavaScript 数组
  readArray(ptr, length, type = 'uint8') {
    const view = this.getView(type, ptr, length);
    return Array.from(view);
  }
  
  // 获取类型大小
  getTypeSize(type) {
    const sizes = {
      'uint8': 1, 'int8': 1,
      'uint16': 2, 'int16': 2,
      'uint32': 4, 'int32': 4,
      'float32': 4, 'float64': 8
    };
    return sizes[type] || 1;
  }
  
  // 内存操作包装
  copy(destPtr, srcPtr, size) {
    this.wasm.memcpy(destPtr, srcPtr, size);
  }
  
  fill(ptr, value, size) {
    this.wasm.memset(ptr, value, size);
  }
  
  compare(ptr1, ptr2, size) {
    return this.wasm.memcmp(ptr1, ptr2, size);
  }
  
  // 模式填充
  fillPattern(destPtr, pattern, totalSize) {
    // 先分配模式数据
    const patternAlloc = this.writeArray(pattern);
    this.wasm.pattern_fill(destPtr, patternAlloc.ptr, pattern.length, totalSize);
    return patternAlloc;
  }
  
  // 计算校验和
  checksum(ptr, size) {
    return this.wasm.memory_checksum(ptr, size);
  }
  
  // 内存状态信息
  getMemoryStatus() {
    this.checkMemoryGrowth();
    
    return {
      heapBase: this.wasm.get_heap_base(),
      heapTop: this.wasm.get_heap_top(),
      heapSize: this.wasm.get_heap_size(),
      memoryPages: this.wasm.get_memory_pages(),
      totalMemory: this.memory.buffer.byteLength,
      allocations: this.allocations.size,
      allocatedBytes: Array.from(this.allocations.values())
        .reduce((sum, alloc) => sum + alloc.size, 0)
    };
  }
  
  // 分配统计
  getAllocationStats() {
    const stats = {
      total: this.allocations.size,
      totalBytes: 0,
      byDescription: new Map()
    };
    
    for (const alloc of this.allocations.values()) {
      stats.totalBytes += alloc.size;
      
      const desc = alloc.description || 'unknown';
      if (!stats.byDescription.has(desc)) {
        stats.byDescription.set(desc, { count: 0, bytes: 0 });
      }
      
      const descStats = stats.byDescription.get(desc);
      descStats.count++;
      descStats.bytes += alloc.size;
    }
    
    return stats;
  }
  
  // 内存泄漏检测
  detectLeaks(maxAge = 60000) { // 1分钟
    const now = Date.now();
    const leaks = [];
    
    for (const [id, alloc] of this.allocations) {
      if (now - alloc.timestamp > maxAge) {
        leaks.push({ id, ...alloc, age: now - alloc.timestamp });
      }
    }
    
    return leaks;
  }
  
  // 内存碎片分析
  analyzeFragmentation() {
    // 简化的碎片分析
    const status = this.getMemoryStatus();
    const usedRatio = status.heapSize / status.totalMemory;
    const allocationCount = this.allocations.size;
    
    return {
      usedRatio,
      allocationCount,
      averageAllocationSize: allocationCount > 0 ? status.heapSize / allocationCount : 0,
      fragmentation: allocationCount > 10 ? 'high' : allocationCount > 5 ? 'medium' : 'low'
    };
  }
}

// 使用示例
async function demonstrateAdvancedMemory() {
  const wasmModule = await WebAssembly.instantiate(
    await WebAssembly.wat2wasm(memoryManagementWat)
  );
  
  const memManager = new AdvancedMemoryManager(
    wasmModule.instance.exports,
    wasmModule.instance.exports.memory
  );
  
  console.log('Initial memory status:', memManager.getMemoryStatus());
  
  // 分配一些数据
  const dataAlloc = memManager.writeArray([1, 2, 3, 4, 5], 'uint32');
  console.log('Allocated array:', dataAlloc);
  
  // 读取数据
  const readData = memManager.readArray(dataAlloc.ptr, 5, 'uint32');
  console.log('Read back:', readData); // [1, 2, 3, 4, 5]
  
  // 复制数据
  const copyAlloc = memManager.allocate(20, 'copy of array');
  memManager.copy(copyAlloc.ptr, dataAlloc.ptr, 20);
  
  const copiedData = memManager.readArray(copyAlloc.ptr, 5, 'uint32');
  console.log('Copied data:', copiedData); // [1, 2, 3, 4, 5]
  
  // 填充模式
  const patternAlloc = memManager.allocate(40, 'pattern filled');
  memManager.fillPattern(patternAlloc.ptr, [0xAA, 0xBB], 40);
  
  const patternData = memManager.readArray(patternAlloc.ptr, 40, 'uint8');
  console.log('Pattern data:', patternData); // [0xAA, 0xBB, 0xAA, 0xBB, ...]
  
  // 计算校验和
  const checksum1 = memManager.checksum(dataAlloc.ptr, 20);
  const checksum2 = memManager.checksum(copyAlloc.ptr, 20);
  console.log('Checksums match:', checksum1 === checksum2); // true
  
  // 内存状态
  console.log('Final memory status:', memManager.getMemoryStatus());
  console.log('Allocation stats:', memManager.getAllocationStats());
  console.log('Fragmentation analysis:', memManager.analyzeFragmentation());
  
  // 泄漏检测（这里应该没有泄漏）
  setTimeout(() => {
    const leaks = memManager.detectLeaks(1000); // 1秒
    console.log('Memory leaks detected:', leaks);
  }, 2000);
}

7.3.2 高性能数据传输

// 高性能数据传输示例
class HighPerformanceTransfer {
  constructor(wasmExports, memory) {
    this.wasm = wasmExports;
    this.memory = memory;
    this.transferBuffers = new Map();
    this.compressionEnabled = false;
  }
  
  // 创建传输缓冲区
  createTransferBuffer(name, size) {
    const buffer = {
      ptr: this.wasm.malloc(size),
      size: size,
      view: new Uint8Array(this.memory.buffer, this.wasm.malloc(size), size),
      position: 0
    };
    
    if (buffer.ptr === 0) {
      throw new Error(`Failed to allocate transfer buffer: ${size} bytes`);
    }
    
    this.transferBuffers.set(name, buffer);
    return buffer;
  }
  
  // 批量传输数据
  transferBatch(bufferName, dataChunks) {
    const buffer = this.transferBuffers.get(bufferName);
    if (!buffer) {
      throw new Error(`Transfer buffer not found: ${bufferName}`);
    }
    
    const results = [];
    let totalBytes = 0;
    const startTime = performance.now();
    
    for (const chunk of dataChunks) {
      if (buffer.position + chunk.byteLength > buffer.size) {
        // 缓冲区满了，处理当前内容
        results.push(this.processBuffer(bufferName));
        buffer.position = 0;
      }
      
      // 复制数据到缓冲区
      buffer.view.set(new Uint8Array(chunk), buffer.position);
      buffer.position += chunk.byteLength;
      totalBytes += chunk.byteLength;
    }
    
    // 处理剩余数据
    if (buffer.position > 0) {
      results.push(this.processBuffer(bufferName));
    }
    
    const endTime = performance.now();
    
    return {
      results,
      totalBytes,
      transferTime: endTime - startTime,
      throughput: totalBytes / (endTime - startTime) * 1000 // bytes/second
    };
  }
  
  // 处理缓冲区数据
  processBuffer(bufferName) {
    const buffer = this.transferBuffers.get(bufferName);
    const checksum = this.wasm.memory_checksum(buffer.ptr, buffer.position);
    
    // 重置缓冲区位置
    const processedBytes = buffer.position;
    buffer.position = 0;
    
    return {
      bytes: processedBytes,
      checksum: checksum
    };
  }
  
  // 零拷贝数据访问
  getZeroCopyView(type, ptr, length) {
    const TypedArray = {
      'uint8': Uint8Array,
      'uint16': Uint16Array,
      'uint32': Uint32Array,
      'int8': Int8Array,
      'int16': Int16Array,
      'int32': Int32Array,
      'float32': Float32Array,
      'float64': Float64Array
    }[type];
    
    if (!TypedArray) {
      throw new Error(`Unsupported type: ${type}`);
    }
    
    return new TypedArray(this.memory.buffer, ptr, length);
  }
  
  // 流式数据处理
  async processStream(dataSource, chunkSize = 8192) {
    const buffer = this.createTransferBuffer('stream', chunkSize * 2);
    const results = [];
    
    try {
      const reader = dataSource.getReader();
      let totalProcessed = 0;
      
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        // 确保缓冲区足够大
        if (value.length > buffer.size) {
          throw new Error('Chunk size exceeds buffer capacity');
        }
        
        // 如果缓冲区空间不足，先处理现有数据
        if (buffer.position + value.length > buffer.size) {
          results.push(this.processBuffer('stream'));
        }
        
        // 复制新数据
        buffer.view.set(value, buffer.position);
        buffer.position += value.length;
        totalProcessed += value.length;
        
        // 可选：定期处理缓冲区以避免内存压力
        if (buffer.position >= chunkSize) {
          results.push(this.processBuffer('stream'));
        }
      }
      
      // 处理剩余数据
      if (buffer.position > 0) {
        results.push(this.processBuffer('stream'));
      }
      
      return {
        success: true,
        totalProcessed,
        results
      };
      
    } catch (error) {
      return {
        success: false,
        error: error.message,
        results
      };
    }
  }
  
  // 并行数据处理
  async processParallel(dataArrays, workerCount = 4) {
    const chunkSize = Math.ceil(dataArrays.length / workerCount);
    const promises = [];
    
    for (let i = 0; i < workerCount; i++) {
      const start = i * chunkSize;
      const end = Math.min(start + chunkSize, dataArrays.length);
      const chunk = dataArrays.slice(start, end);
      
      if (chunk.length > 0) {
        promises.push(this.processChunk(chunk, i));
      }
    }
    
    const results = await Promise.all(promises);
    
    return {
      workerResults: results,
      totalResults: results.reduce((sum, r) => sum + r.processedCount, 0),
      totalTime: Math.max(...results.map(r => r.processingTime))
    };
  }
  
  // 处理数据块
  async processChunk(dataChunk, workerId) {
    const bufferName = `worker_${workerId}`;
    
    // 为这个工作器创建专用缓冲区
    if (!this.transferBuffers.has(bufferName)) {
      this.createTransferBuffer(bufferName, 64 * 1024); // 64KB
    }
    
    const startTime = performance.now();
    const result = this.transferBatch(bufferName, dataChunk);
    const endTime = performance.now();
    
    return {
      workerId,
      processedCount: dataChunk.length,
      processingTime: endTime - startTime,
      throughput: result.throughput,
      results: result.results
    };
  }
  
  // 内存映射文件访问（模拟）
  mapFile(fileBuffer, readonly = true) {
    const size = fileBuffer.byteLength;
    const ptr = this.wasm.malloc(size);
    
    if (ptr === 0) {
      throw new Error(`Failed to map file: ${size} bytes`);
    }
    
    // 复制文件数据到 WebAssembly 内存
    const wasmView = new Uint8Array(this.memory.buffer, ptr, size);
    wasmView.set(new Uint8Array(fileBuffer));
    
    return {
      ptr,
      size,
      view: readonly ? wasmView : new Uint8Array(this.memory.buffer, ptr, size),
      readonly,
      
      // 同步更改回原文件缓冲区（如果可写）
      sync: () => {
        if (!readonly && fileBuffer instanceof ArrayBuffer) {
          new Uint8Array(fileBuffer).set(wasmView);
        }
      },
      
      // 取消映射
      unmap: () => {
        // 在实际实现中这里应该调用 free
        // this.wasm.free(ptr);
      }
    };
  }
  
  // 性能基准测试
  benchmark() {
    const testSizes = [1024, 8192, 65536, 524288]; // 1KB to 512KB
    const results = [];
    
    for (const size of testSizes) {
      const testData = new Uint8Array(size);
      
      // 填充测试数据
      for (let i = 0; i < size; i++) {
        testData[i] = i % 256;
      }
      
      // 测试传输性能
      const startTime = performance.now();
      const allocation = {
        ptr: this.wasm.malloc(size),
        size: size
      };
      
      const view = new Uint8Array(this.memory.buffer, allocation.ptr, size);
      view.set(testData);
      
      const checksum = this.wasm.memory_checksum(allocation.ptr, size);
      const endTime = performance.now();
      
      results.push({
        size,
        transferTime: endTime - startTime,
        throughput: size / (endTime - startTime) * 1000,
        checksum
      });
    }
    
    return results;
  }
}

// 使用示例
async function demonstrateHighPerformanceTransfer() {
  // 假设已经加载了 WASM 模块
  const wasmModule = await WebAssembly.instantiate(
    await WebAssembly.wat2wasm(memoryManagementWat)
  );
  
  const transfer = new HighPerformanceTransfer(
    wasmModule.instance.exports,
    wasmModule.instance.exports.memory
  );
  
  // 创建测试数据
  const testData = Array.from({ length: 10 }, (_, i) => {
    const chunk = new Uint8Array(1024);
    chunk.fill(i);
    return chunk.buffer;
  });
  
  console.log('=== 批量传输测试 ===');
  transfer.createTransferBuffer('test', 4096);
  const batchResult = transfer.transferBatch('test', testData);
  console.log('Batch transfer result:', batchResult);
  
  console.log('=== 并行处理测试 ===');
  const parallelResult = await transfer.processParallel(testData, 3);
  console.log('Parallel processing result:', parallelResult);
  
  console.log('=== 性能基准测试 ===');
  const benchmarkResults = transfer.benchmark();
  console.log('Benchmark results:', benchmarkResults);
  
  // 性能分析
  console.log('=== 性能分析 ===');
  benchmarkResults.forEach(result => {
    console.log(`Size: ${result.size} bytes`);
    console.log(`Transfer time: ${result.transferTime.toFixed(2)} ms`);
    console.log(`Throughput: ${(result.throughput / 1024 / 1024).toFixed(2)} MB/s`);
    console.log(`Checksum: ${result.checksum}`);
    console.log('---');
  });
}

本章小结

通过本章学习，你已经全面掌握了：

1. WebAssembly JavaScript API：模块加载、实例化和错误处理
2. 数据类型转换：基本类型和复杂结构的双向转换
3. 内存共享：高效的内存管理和数据传输技术
4. 性能优化：零拷贝访问、批量处理和并行计算

这些技能为构建高性能的 WebAssembly 应用程序提供了强大的基础。

📝 进入下一步：第8章 从 C/C++ 编译

🎯 重点技能：

• ✅ JavaScript API 熟练运用
• ✅ 数据转换机制
• ✅ 内存管理策略
• ✅ 高性能数据传输
• ✅ 跨语言集成技巧

第7章 JavaScript 交互 - 练习题

本章学习目标：掌握 WebAssembly 与 JavaScript 的深度集成，包括模块加载、数据传递、内存共享和性能优化技术。

基础练习

练习 7.1：模块加载器实现（20分）

题目：实现一个支持缓存和错误恢复的 WebAssembly 模块加载器。

要求：

1. 支持流式加载和传统加载两种方式
2. 实现模块缓存避免重复加载
3. 提供详细的错误信息和降级处理
4. 支持预加载多个模块

class EnhancedWasmLoader {
  constructor() {
    this.moduleCache = new Map();
    this.loadingPromises = new Map();
    this.loadAttempts = new Map();
    this.maxRetries = 3;
  }
  
  async loadModule(name, wasmPath, importObject = {}, options = {}) {
    // 检查缓存
    if (this.moduleCache.has(name)) {
      return this.moduleCache.get(name);
    }
    
    // 检查是否正在加载
    if (this.loadingPromises.has(name)) {
      return await this.loadingPromises.get(name);
    }
    
    const loadPromise = this._loadWithRetry(name, wasmPath, importObject, options);
    this.loadingPromises.set(name, loadPromise);
    
    try {
      const result = await loadPromise;
      this.moduleCache.set(name, result);
      this.loadingPromises.delete(name);
      return result;
    } catch (error) {
      this.loadingPromises.delete(name);
      throw error;
    }
  }
  
  async _loadWithRetry(name, wasmPath, importObject, options) {
    let lastError;
    const attempts = this.loadAttempts.get(name) || 0;
    
    for (let i = attempts; i < this.maxRetries; i++) {
      try {
        this.loadAttempts.set(name, i + 1);
        return await this._loadModuleInternal(name, wasmPath, importObject, options);
      } catch (error) {
        lastError = error;
        console.warn(`Loading attempt ${i + 1} failed for ${name}:`, error.message);
        
        if (i < this.maxRetries - 1) {
          await this._delay(Math.pow(2, i) * 1000); // 指数退避
        }
      }
    }
    
    throw new Error(`Failed to load ${name} after ${this.maxRetries} attempts: ${lastError.message}`);
  }
  
  async _loadModuleInternal(name, wasmPath, importObject, options) {
    console.log(`Loading WASM module: ${name}`);
    
    // 检查 WebAssembly 支持
    if (!WebAssembly || !WebAssembly.instantiateStreaming) {
      throw new Error('WebAssembly not supported');
    }
    
    try {
      // 尝试流式加载
      const response = await fetch(wasmPath, {
        method: 'GET',
        headers: options.headers || {},
        signal: options.signal
      });
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const wasmModule = await WebAssembly.instantiateStreaming(response, importObject);
      console.log(`Successfully loaded ${name} via streaming`);
      return wasmModule.instance.exports;
      
    } catch (streamError) {
      console.warn(`Streaming failed for ${name}, falling back to traditional loading`);
      
      // 降级到传统加载
      const response = await fetch(wasmPath);
      const wasmBytes = await response.arrayBuffer();
      const wasmModule = await WebAssembly.instantiate(wasmBytes, importObject);
      
      console.log(`Successfully loaded ${name} via traditional method`);
      return wasmModule.instance.exports;
    }
  }
  
  async preloadModules(modules, concurrency = 3) {
    const chunks = this._chunkArray(modules, concurrency);
    const results = [];
    
    for (const chunk of chunks) {
      const chunkPromises = chunk.map(({ name, path, imports, options }) => 
        this.loadModule(name, path, imports, options)
          .then(exports => ({ name, success: true, exports }))
          .catch(error => ({ name, success: false, error: error.message }))
      );
      
      const chunkResults = await Promise.all(chunkPromises);
      results.push(...chunkResults);
    }
    
    return results;
  }
  
  _chunkArray(array, size) {
    const chunks = [];
    for (let i = 0; i < array.length; i += size) {
      chunks.push(array.slice(i, i + size));
    }
    return chunks;
  }
  
  _delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  
  getLoadingStats() {
    return {
      cached: this.moduleCache.size,
      loading: this.loadingPromises.size,
      attempts: Object.fromEntries(this.loadAttempts)
    };
  }
  
  clearCache() {
    this.moduleCache.clear();
    this.loadAttempts.clear();
  }
}

// 使用示例
const loader = new EnhancedWasmLoader();

async function testLoader() {
  const modules = [
    { name: 'math', path: './math.wasm', imports: { env: { sin: Math.sin } } },
    { name: 'image', path: './image.wasm', imports: {} },
    { name: 'crypto', path: './crypto.wasm', imports: {} }
  ];
  
  console.log('Preloading modules...');
  const results = await loader.preloadModules(modules);
  
  results.forEach(result => {
    if (result.success) {
      console.log(`✅ ${result.name} loaded successfully`);
    } else {
      console.log(`❌ ${result.name} failed: ${result.error}`);
    }
  });
  
  console.log('Loading stats:', loader.getLoadingStats());
}

练习 7.2：类型安全的数据转换器（25分）

题目：创建一个类型安全的数据转换器，支持 JavaScript 和 WebAssembly 之间的复杂数据类型转换。

要求：

1. 支持所有基本类型的安全转换
2. 实现结构体和数组的序列化/反序列化
3. 提供类型验证和错误处理
4. 支持自定义类型定义

// 类型定义系统
class TypeDefinition {
  constructor(name, schema) {
    this.name = name;
    this.schema = schema;
    this.size = this._calculateSize(schema);
  }
  
  _calculateSize(schema) {
    if (typeof schema === 'string') {
      return this._getPrimitiveSize(schema);
    }
    
    if (schema.type === 'array') {
      return schema.length * this._calculateSize(schema.element);
    }
    
    if (schema.type === 'struct') {
      return schema.fields.reduce((sum, field) => {
        return sum + this._calculateSize(field.type);
      }, 0);
    }
    
    throw new Error(`Unknown schema type: ${JSON.stringify(schema)}`);
  }
  
  _getPrimitiveSize(type) {
    const sizes = {
      'i8': 1, 'u8': 1,
      'i16': 2, 'u16': 2,
      'i32': 4, 'u32': 4,
      'i64': 8, 'u64': 8,
      'f32': 4, 'f64': 8,
      'ptr': 4
    };
    
    if (!(type in sizes)) {
      throw new Error(`Unknown primitive type: ${type}`);
    }
    
    return sizes[type];
  }
}

// 类型安全转换器
class TypeSafeConverter {
  constructor(memory) {
    this.memory = memory;
    this.types = new Map();
    this.allocatedPointers = new Set();
    this.nextPtr = 1024; // 从 1KB 开始分配
    
    // 注册内置类型
    this._registerBuiltinTypes();
  }
  
  _registerBuiltinTypes() {
    // Point 类型
    this.registerType('Point', {
      type: 'struct',
      fields: [
        { name: 'x', type: 'f32' },
        { name: 'y', type: 'f32' }
      ]
    });
    
    // RGB 颜色类型
    this.registerType('RGB', {
      type: 'struct',
      fields: [
        { name: 'r', type: 'u8' },
        { name: 'g', type: 'u8' },
        { name: 'b', type: 'u8' },
        { name: 'a', type: 'u8' }
      ]
    });
    
    // 动态数组类型
    this.registerType('FloatArray', {
      type: 'struct',
      fields: [
        { name: 'ptr', type: 'ptr' },
        { name: 'length', type: 'u32' },
        { name: 'capacity', type: 'u32' }
      ]
    });
  }
  
  registerType(name, schema) {
    this.types.set(name, new TypeDefinition(name, schema));
  }
  
  getType(name) {
    const type = this.types.get(name);
    if (!type) {
      throw new Error(`Type not registered: ${name}`);
    }
    return type;
  }
  
  // 分配内存
  allocate(size) {
    const ptr = this.nextPtr;
    this.nextPtr += Math.ceil(size / 4) * 4; // 4字节对齐
    this.allocatedPointers.add(ptr);
    
    if (this.nextPtr >= this.memory.buffer.byteLength) {
      throw new Error('Out of memory');
    }
    
    return ptr;
  }
  
  // 基本类型转换
  convertToWasm(value, type) {
    switch (type) {
      case 'i8': return this._toInt8(value);
      case 'u8': return this._toUint8(value);
      case 'i16': return this._toInt16(value);
      case 'u16': return this._toUint16(value);
      case 'i32': return this._toInt32(value);
      case 'u32': return this._toUint32(value);
      case 'i64': return this._toInt64(value);
      case 'u64': return this._toUint64(value);
      case 'f32': return this._toFloat32(value);
      case 'f64': return this._toFloat64(value);
      default:
        if (this.types.has(type)) {
          return this.serializeStruct(value, type);
        }
        throw new Error(`Unsupported type: ${type}`);
    }
  }
  
  convertFromWasm(ptr, type) {
    switch (type) {
      case 'i8': return this._getInt8(ptr);
      case 'u8': return this._getUint8(ptr);
      case 'i16': return this._getInt16(ptr);
      case 'u16': return this._getUint16(ptr);
      case 'i32': return this._getInt32(ptr);
      case 'u32': return this._getUint32(ptr);
      case 'i64': return this._getInt64(ptr);
      case 'u64': return this._getUint64(ptr);
      case 'f32': return this._getFloat32(ptr);
      case 'f64': return this._getFloat64(ptr);
      default:
        if (this.types.has(type)) {
          return this.deserializeStruct(ptr, type);
        }
        throw new Error(`Unsupported type: ${type}`);
    }
  }
  
  // 结构体序列化
  serializeStruct(jsObject, typeName) {
    const typeDef = this.getType(typeName);
    const ptr = this.allocate(typeDef.size);
    let offset = 0;
    
    for (const field of typeDef.schema.fields) {
      if (!(field.name in jsObject)) {
        throw new Error(`Missing field: ${field.name} in ${typeName}`);
      }
      
      const value = jsObject[field.name];
      const fieldPtr = ptr + offset;
      
      this._writeValue(fieldPtr, value, field.type);
      offset += this._getPrimitiveSize(field.type);
    }
    
    return ptr;
  }
  
  // 结构体反序列化
  deserializeStruct(ptr, typeName) {
    const typeDef = this.getType(typeName);
    const result = {};
    let offset = 0;
    
    for (const field of typeDef.schema.fields) {
      const fieldPtr = ptr + offset;
      result[field.name] = this._readValue(fieldPtr, field.type);
      offset += this._getPrimitiveSize(field.type);
    }
    
    return result;
  }
  
  // 数组操作
  serializeArray(jsArray, elementType) {
    const elementSize = this._getPrimitiveSize(elementType);
    const totalSize = jsArray.length * elementSize;
    const ptr = this.allocate(totalSize);
    
    for (let i = 0; i < jsArray.length; i++) {
      const elementPtr = ptr + i * elementSize;
      this._writeValue(elementPtr, jsArray[i], elementType);
    }
    
    // 创建数组描述符
    const descriptorPtr = this.allocate(12); // ptr + length + capacity
    this._writeValue(descriptorPtr, ptr, 'ptr');
    this._writeValue(descriptorPtr + 4, jsArray.length, 'u32');
    this._writeValue(descriptorPtr + 8, jsArray.length, 'u32');
    
    return descriptorPtr;
  }
  
  deserializeArray(descriptorPtr, elementType) {
    const ptr = this._readValue(descriptorPtr, 'ptr');
    const length = this._readValue(descriptorPtr + 4, 'u32');
    const elementSize = this._getPrimitiveSize(elementType);
    
    const result = [];
    for (let i = 0; i < length; i++) {
      const elementPtr = ptr + i * elementSize;
      result.push(this._readValue(elementPtr, elementType));
    }
    
    return result;
  }
  
  // 类型验证
  validateType(value, type) {
    if (typeof type === 'string') {
      return this._validatePrimitive(value, type);
    }
    
    if (type.type === 'struct') {
      if (typeof value !== 'object' || value === null) {
        return false;
      }
      
      return type.fields.every(field => 
        field.name in value && this.validateType(value[field.name], field.type)
      );
    }
    
    if (type.type === 'array') {
      if (!Array.isArray(value)) {
        return false;
      }
      
      return value.every(item => this.validateType(item, type.element));
    }
    
    return false;
  }
  
  _validatePrimitive(value, type) {
    switch (type) {
      case 'i8': return Number.isInteger(value) && value >= -128 && value <= 127;
      case 'u8': return Number.isInteger(value) && value >= 0 && value <= 255;
      case 'i16': return Number.isInteger(value) && value >= -32768 && value <= 32767;
      case 'u16': return Number.isInteger(value) && value >= 0 && value <= 65535;
      case 'i32': return Number.isInteger(value) && value >= -2147483648 && value <= 2147483647;
      case 'u32': return Number.isInteger(value) && value >= 0 && value <= 4294967295;
      case 'i64': return typeof value === 'bigint';
      case 'u64': return typeof value === 'bigint' && value >= 0n;
      case 'f32': 
      case 'f64': return typeof value === 'number' && Number.isFinite(value);
      case 'ptr': return Number.isInteger(value) && value >= 0;
      default: return false;
    }
  }
  
  // 内部辅助方法
  _writeValue(ptr, value, type) {
    const view = new DataView(this.memory.buffer);
    
    switch (type) {
      case 'i8': view.setInt8(ptr, value); break;
      case 'u8': view.setUint8(ptr, value); break;
      case 'i16': view.setInt16(ptr, value, true); break;
      case 'u16': view.setUint16(ptr, value, true); break;
      case 'i32': view.setInt32(ptr, value, true); break;
      case 'u32': view.setUint32(ptr, value, true); break;
      case 'i64': view.setBigInt64(ptr, BigInt(value), true); break;
      case 'u64': view.setBigUint64(ptr, BigInt(value), true); break;
      case 'f32': view.setFloat32(ptr, value, true); break;
      case 'f64': view.setFloat64(ptr, value, true); break;
      case 'ptr': view.setUint32(ptr, value, true); break;
      default: throw new Error(`Cannot write type: ${type}`);
    }
  }
  
  _readValue(ptr, type) {
    const view = new DataView(this.memory.buffer);
    
    switch (type) {
      case 'i8': return view.getInt8(ptr);
      case 'u8': return view.getUint8(ptr);
      case 'i16': return view.getInt16(ptr, true);
      case 'u16': return view.getUint16(ptr, true);
      case 'i32': return view.getInt32(ptr, true);
      case 'u32': return view.getUint32(ptr, true);
      case 'i64': return view.getBigInt64(ptr, true);
      case 'u64': return view.getBigUint64(ptr, true);
      case 'f32': return view.getFloat32(ptr, true);
      case 'f64': return view.getFloat64(ptr, true);
      case 'ptr': return view.getUint32(ptr, true);
      default: throw new Error(`Cannot read type: ${type}`);
    }
  }
  
  _getPrimitiveSize(type) {
    const sizes = {
      'i8': 1, 'u8': 1, 'i16': 2, 'u16': 2,
      'i32': 4, 'u32': 4, 'i64': 8, 'u64': 8,
      'f32': 4, 'f64': 8, 'ptr': 4
    };
    return sizes[type] || 4;
  }
  
  // 内存管理
  free(ptr) {
    this.allocatedPointers.delete(ptr);
  }
  
  cleanup() {
    this.allocatedPointers.clear();
    this.nextPtr = 1024;
  }
  
  getMemoryUsage() {
    return {
      allocated: this.allocatedPointers.size,
      nextPtr: this.nextPtr,
      totalUsed: this.nextPtr - 1024
    };
  }
}

// 使用示例
async function testTypeConverter() {
  const memory = new WebAssembly.Memory({ initial: 1 });
  const converter = new TypeSafeConverter(memory);
  
  // 自定义类型注册
  converter.registerType('Person', {
    type: 'struct',
    fields: [
      { name: 'age', type: 'u8' },
      { name: 'height', type: 'f32' },
      { name: 'weight', type: 'f32' }
    ]
  });
  
  try {
    // 测试基本类型
    console.log('=== 基本类型测试 ===');
    const intPtr = converter.convertToWasm(42, 'i32');
    const intValue = converter.convertFromWasm(intPtr, 'i32');
    console.log('Integer conversion:', 42, '->', intValue);
    
    // 测试结构体
    console.log('=== 结构体测试 ===');
    const person = { age: 25, height: 175.5, weight: 70.2 };
    
    if (converter.validateType(person, converter.getType('Person').schema)) {
      const personPtr = converter.serializeStruct(person, 'Person');
      const deserializedPerson = converter.deserializeStruct(personPtr, 'Person');
      console.log('Person:', person, '->', deserializedPerson);
    } else {
      console.log('Person validation failed');
    }
    
    // 测试数组
    console.log('=== 数组测试 ===');
    const numbers = [1.1, 2.2, 3.3, 4.4, 5.5];
    const arrayPtr = converter.serializeArray(numbers, 'f32');
    const deserializedArray = converter.deserializeArray(arrayPtr, 'f32');
    console.log('Array:', numbers, '->', deserializedArray);
    
    // 内存使用情况
    console.log('=== 内存使用情况 ===');
    console.log('Memory usage:', converter.getMemoryUsage());
    
  } catch (error) {
    console.error('Conversion error:', error.message);
  } finally {
    converter.cleanup();
  }
}

进阶练习

练习 7.3：高性能内存池管理器（30分）

题目：设计并实现一个高性能的内存池管理器，用于优化 WebAssembly 内存分配。

要求：

1. 实现多种大小的内存池
2. 支持内存碎片整理
3. 提供内存使用统计和监控
4. 实现内存泄漏检测

// 内存块类
class MemoryBlock {
  constructor(ptr, size, pool) {
    this.ptr = ptr;
    this.size = size;
    this.pool = pool;
    this.allocated = false;
    this.allocatedAt = null;
    this.allocatedBy = null;
    this.next = null;
    this.prev = null;
  }
  
  allocate(allocatedBy = 'unknown') {
    this.allocated = true;
    this.allocatedAt = Date.now();
    this.allocatedBy = allocatedBy;
  }
  
  free() {
    this.allocated = false;
    this.allocatedAt = null;
    this.allocatedBy = null;
  }
  
  getAge() {
    return this.allocatedAt ? Date.now() - this.allocatedAt : 0;
  }
}

// 内存池类
class MemoryPool {
  constructor(blockSize, initialBlocks = 16) {
    this.blockSize = blockSize;
    this.blocks = [];
    this.freeBlocks = [];
    this.allocatedBlocks = new Set();
    this.totalAllocated = 0;
    this.peakAllocated = 0;
    this.allocationCount = 0;
    this.freeCount = 0;
    
    // 预分配初始块
    for (let i = 0; i < initialBlocks; i++) {
      this._createBlock();
    }
  }
  
  _createBlock() {
    // 这里应该从实际的 WebAssembly 内存分配
    // 为了演示，我们使用模拟指针
    const ptr = Math.floor(Math.random() * 1000000);
    const block = new MemoryBlock(ptr, this.blockSize, this);
    this.blocks.push(block);
    this.freeBlocks.push(block);
    return block;
  }
  
  allocate(allocatedBy = 'unknown') {
    if (this.freeBlocks.length === 0) {
      // 需要扩展池
      this._expandPool();
    }
    
    const block = this.freeBlocks.pop();
    block.allocate(allocatedBy);
    this.allocatedBlocks.add(block);
    
    this.totalAllocated += this.blockSize;
    this.peakAllocated = Math.max(this.peakAllocated, this.totalAllocated);
    this.allocationCount++;
    
    return block;
  }
  
  free(block) {
    if (!this.allocatedBlocks.has(block)) {
      throw new Error('Attempting to free unallocated block');
    }
    
    block.free();
    this.allocatedBlocks.delete(block);
    this.freeBlocks.push(block);
    
    this.totalAllocated -= this.blockSize;
    this.freeCount++;
  }
  
  _expandPool() {
    const expandSize = Math.max(8, Math.floor(this.blocks.length * 0.5));
    for (let i = 0; i < expandSize; i++) {
      this._createBlock();
    }
  }
  
  getStats() {
    return {
      blockSize: this.blockSize,
      totalBlocks: this.blocks.length,
      allocatedBlocks: this.allocatedBlocks.size,
      freeBlocks: this.freeBlocks.length,
      totalAllocated: this.totalAllocated,
      peakAllocated: this.peakAllocated,
      allocationCount: this.allocationCount,
      freeCount: this.freeCount,
      utilizationRate: this.totalAllocated / (this.blocks.length * this.blockSize)
    };
  }
  
  findLeaks(maxAge = 60000) {
    const leaks = [];
    for (const block of this.allocatedBlocks) {
      if (block.getAge() > maxAge) {
        leaks.push({
          ptr: block.ptr,
          size: block.size,
          age: block.getAge(),
          allocatedBy: block.allocatedBy,
          allocatedAt: new Date(block.allocatedAt)
        });
      }
    }
    return leaks;
  }
}

// 高性能内存池管理器
class HighPerformanceMemoryManager {
  constructor(wasmMemory, options = {}) {
    this.wasmMemory = wasmMemory;
    this.options = {
      poolSizes: [16, 32, 64, 128, 256, 512, 1024, 2048, 4096],
      initialBlocksPerPool: 16,
      enableLeakDetection: true,
      leakCheckInterval: 30000,
      maxLeakAge: 60000,
      enableFragmentationCheck: true,
      fragmentationThreshold: 0.3,
      ...options
    };
    
    // 创建内存池
    this.pools = new Map();
    this.largeAllocations = new Map();
    this.stats = {
      totalAllocations: 0,
      totalFrees: 0,
      largeAllocations: 0,
      fragmentationEvents: 0,
      leakDetectionRuns: 0,
      memoryGrowths: 0
    };
    
    this._initializePools();
    this._startMonitoring();
  }
  
  _initializePools() {
    for (const size of this.options.poolSizes) {
      this.pools.set(size, new MemoryPool(size, this.options.initialBlocksPerPool));
    }
  }
  
  allocate(size, allocatedBy = 'unknown') {
    this.stats.totalAllocations++;
    
    // 查找合适的池
    const poolSize = this._findBestPoolSize(size);
    
    if (poolSize) {
      const pool = this.pools.get(poolSize);
      const block = pool.allocate(allocatedBy);
      return {
        ptr: block.ptr,
        size: poolSize,
        actualSize: size,
        pooled: true,
        block: block
      };
    } else {
      // 大内存分配，直接从系统分配
      this.stats.largeAllocations++;
      return this._allocateLarge(size, allocatedBy);
    }
  }
  
  free(allocation) {
    this.stats.totalFrees++;
    
    if (allocation.pooled) {
      const pool = this.pools.get(allocation.size);
      pool.free(allocation.block);
    } else {
      this._freeLarge(allocation);
    }
  }
  
  _findBestPoolSize(size) {
    for (const poolSize of this.options.poolSizes) {
      if (size <= poolSize) {
        return poolSize;
      }
    }
    return null; // 需要大内存分配
  }
  
  _allocateLarge(size, allocatedBy) {
    // 模拟大内存分配
    const ptr = Math.floor(Math.random() * 1000000);
    const allocation = {
      ptr: ptr,
      size: size,
      actualSize: size,
      pooled: false,
      allocatedAt: Date.now(),
      allocatedBy: allocatedBy
    };
    
    this.largeAllocations.set(ptr, allocation);
    return allocation;
  }
  
  _freeLarge(allocation) {
    this.largeAllocations.delete(allocation.ptr);
  }
  
  // 内存碎片整理
  defragment() {
    console.log('Starting memory defragmentation...');
    let moved = 0;
    
    for (const [size, pool] of this.pools) {
      // 简化的碎片整理：重新组织空闲块
      const freeBlocks = [...pool.freeBlocks];
      const allocatedBlocks = [...pool.allocatedBlocks];
      
      // 按地址排序
      freeBlocks.sort((a, b) => a.ptr - b.ptr);
      allocatedBlocks.sort((a, b) => a.ptr - b.ptr);
      
      // 检查碎片化程度
      const fragmentationLevel = this._calculateFragmentation(pool);
      if (fragmentationLevel > this.options.fragmentationThreshold) {
        moved += this._compactPool(pool);
        this.stats.fragmentationEvents++;
      }
    }
    
    console.log(`Defragmentation completed. Moved ${moved} blocks.`);
    return moved;
  }
  
  _calculateFragmentation(pool) {
    if (pool.freeBlocks.length === 0) return 0;
    
    // 简化的碎片化计算
    const totalFree = pool.freeBlocks.length * pool.blockSize;
    const largestFreeBlock = pool.blockSize; // 假设所有块大小相同
    
    return 1 - (largestFreeBlock / totalFree);
  }
  
  _compactPool(pool) {
    // 简化的池压缩
    let moved = 0;
    
    // 重新排列空闲块
    pool.freeBlocks.sort((a, b) => a.ptr - b.ptr);
    
    // 在实际实现中，这里会移动内存中的数据
    // 这里我们只是模拟移动计数
    moved = Math.floor(pool.allocatedBlocks.size * 0.1);
    
    return moved;
  }
  
  // 内存泄漏检测
  detectLeaks() {
    this.stats.leakDetectionRuns++;
    const leaks = [];
    
    // 检查池中的泄漏
    for (const [size, pool] of this.pools) {
      const poolLeaks = pool.findLeaks(this.options.maxLeakAge);
      leaks.push(...poolLeaks.map(leak => ({ ...leak, pool: size })));
    }
    
    // 检查大内存分配的泄漏
    for (const [ptr, allocation] of this.largeAllocations) {
      const age = Date.now() - allocation.allocatedAt;
      if (age > this.options.maxLeakAge) {
        leaks.push({
          ptr: allocation.ptr,
          size: allocation.size,
          age: age,
          allocatedBy: allocation.allocatedBy,
          allocatedAt: new Date(allocation.allocatedAt),
          pool: 'large'
        });
      }
    }
    
    if (leaks.length > 0) {
      console.warn(`Detected ${leaks.length} potential memory leaks:`);
      leaks.forEach(leak => {
        console.warn(`  Leak: ${leak.size} bytes, age: ${leak.age}ms, by: ${leak.allocatedBy}`);
      });
    }
    
    return leaks;
  }
  
  // 获取详细统计信息
  getDetailedStats() {
    const poolStats = {};
    let totalPoolMemory = 0;
    let totalAllocatedMemory = 0;
    
    for (const [size, pool] of this.pools) {
      const stats = pool.getStats();
      poolStats[size] = stats;
      totalPoolMemory += stats.totalBlocks * stats.blockSize;
      totalAllocatedMemory += stats.totalAllocated;
    }
    
    const largeMemory = Array.from(this.largeAllocations.values())
      .reduce((sum, alloc) => sum + alloc.size, 0);
    
    return {
      pools: poolStats,
      largeAllocations: {
        count: this.largeAllocations.size,
        totalMemory: largeMemory
      },
      totals: {
        poolMemory: totalPoolMemory,
        allocatedMemory: totalAllocatedMemory + largeMemory,
        utilizationRate: (totalAllocatedMemory + largeMemory) / totalPoolMemory
      },
      statistics: this.stats
    };
  }
  
  // 内存使用建议
  getOptimizationSuggestions() {
    const suggestions = [];
    const stats = this.getDetailedStats();
    
    // 检查池利用率
    for (const [size, poolStats] of Object.entries(stats.pools)) {
      if (poolStats.utilizationRate < 0.2) {
        suggestions.push({
          type: 'underutilized_pool',
          message: `Pool ${size} is underutilized (${(poolStats.utilizationRate * 100).toFixed(1)}%)`,
          suggestion: 'Consider reducing initial block count or removing this pool size'
        });
      } else if (poolStats.utilizationRate > 0.9) {
        suggestions.push({
          type: 'pool_pressure',
          message: `Pool ${size} is under pressure (${(poolStats.utilizationRate * 100).toFixed(1)}%)`,
          suggestion: 'Consider increasing initial block count or pool expansion rate'
        });
      }
    }
    
    // 检查大内存分配
    if (stats.largeAllocations.count > stats.statistics.totalAllocations * 0.1) {
      suggestions.push({
        type: 'too_many_large_allocations',
        message: `${stats.largeAllocations.count} large allocations (${(stats.largeAllocations.count / stats.statistics.totalAllocations * 100).toFixed(1)}%)`,
        suggestion: 'Consider adding larger pool sizes'
      });
    }
    
    // 检查碎片化
    if (stats.statistics.fragmentationEvents > 10) {
      suggestions.push({
        type: 'high_fragmentation',
        message: `High fragmentation events: ${stats.statistics.fragmentationEvents}`,
        suggestion: 'Consider more frequent defragmentation or different allocation strategy'
      });
    }
    
    return suggestions;
  }
  
  _startMonitoring() {
    if (this.options.enableLeakDetection) {
      this.leakDetectionTimer = setInterval(() => {
        this.detectLeaks();
      }, this.options.leakCheckInterval);
    }
    
    if (this.options.enableFragmentationCheck) {
      this.fragmentationTimer = setInterval(() => {
        this.defragment();
      }, this.options.leakCheckInterval * 2);
    }
  }
  
  shutdown() {
    if (this.leakDetectionTimer) {
      clearInterval(this.leakDetectionTimer);
    }
    if (this.fragmentationTimer) {
      clearInterval(this.fragmentationTimer);
    }
    
    // 最终泄漏检测
    const leaks = this.detectLeaks();
    if (leaks.length > 0) {
      console.warn(`Shutdown with ${leaks.length} memory leaks`);
    }
  }
}

// 使用示例
function testMemoryManager() {
  const memory = new WebAssembly.Memory({ initial: 16 });
  const memManager = new HighPerformanceMemoryManager(memory, {
    enableLeakDetection: true,
    leakCheckInterval: 5000,
    maxLeakAge: 10000
  });
  
  console.log('=== 内存管理器测试 ===');
  
  // 模拟内存分配
  const allocations = [];
  
  // 分配各种大小的内存
  for (let i = 0; i < 100; i++) {
    const size = Math.floor(Math.random() * 1000) + 16;
    const allocation = memManager.allocate(size, `test_${i}`);
    allocations.push(allocation);
  }
  
  console.log('Initial stats:', memManager.getDetailedStats());
  
  // 释放一些内存
  for (let i = 0; i < 50; i++) {
    const allocation = allocations.pop();
    memManager.free(allocation);
  }
  
  console.log('After freeing 50 allocations:', memManager.getDetailedStats());
  
  // 强制内存整理
  memManager.defragment();
  
  // 检测泄漏
  const leaks = memManager.detectLeaks();
  console.log('Detected leaks:', leaks.length);
  
  // 获取优化建议
  const suggestions = memManager.getOptimizationSuggestions();
  console.log('Optimization suggestions:', suggestions);
  
  // 清理
  setTimeout(() => {
    memManager.shutdown();
  }, 15000);
}

练习 7.4：WebAssembly-JavaScript 性能基准测试套件（25分）

题目：创建一个全面的性能基准测试套件，用于评估不同数据传输和调用模式的性能。

要求：

1. 测试各种数据类型的传输性能
2. 比较不同调用模式的开销
3. 提供详细的性能分析报告
4. 支持性能回归检测

// 性能测试用的 WAT 模块
const benchmarkWat = `
(module
  (memory (export "memory") 16)
  
  ;; 简单函数调用测试
  (func $add (param $a i32) (param $b i32) (result i32)
    (i32.add (local.get $a) (local.get $b)))
  
  (func $multiply (param $a f64) (param $b f64) (result f64)
    (f64.mul (local.get $a) (local.get $b)))
  
  ;; 内存操作测试
  (func $memory_sum (param $ptr i32) (param $length i32) (result f64)
    (local $sum f64)
    (local $i i32)
    
    (loop $sum_loop
      (if (i32.ge_u (local.get $i) (local.get $length))
        (then (br $sum_loop)))
      
      (local.set $sum
        (f64.add
          (local.get $sum)
          (f64.load (i32.add (local.get $ptr) (i32.mul (local.get $i) (i32.const 8))))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $sum_loop))
    
    local.get $sum)
  
  ;; 复杂计算测试
  (func $fibonacci (param $n i32) (result i32)
    (local $a i32)
    (local $b i32)
    (local $temp i32)
    (local $i i32)
    
    (if (i32.le_s (local.get $n) (i32.const 1))
      (then (return (local.get $n))))
    
    (local.set $a (i32.const 0))
    (local.set $b (i32.const 1))
    (local.set $i (i32.const 2))
    
    (loop $fib_loop
      (if (i32.gt_s (local.get $i) (local.get $n))
        (then (br $fib_loop)))
      
      (local.set $temp (i32.add (local.get $a) (local.get $b)))
      (local.set $a (local.get $b))
      (local.set $b (local.get $temp))
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $fib_loop))
    
    local.get $b)
  
  ;; 大量参数测试
  (func $many_params 
    (param $p1 i32) (param $p2 i32) (param $p3 i32) (param $p4 i32)
    (param $p5 f32) (param $p6 f32) (param $p7 f32) (param $p8 f32)
    (param $p9 f64) (param $p10 f64)
    (result f64)
    
    (f64.add
      (f64.add
        (f64.add
          (f64.convert_i32_s (i32.add (local.get $p1) (local.get $p2)))
          (f64.convert_i32_s (i32.add (local.get $p3) (local.get $p4))))
        (f64.add
          (f64.promote_f32 (f32.add (local.get $p5) (local.get $p6)))
          (f64.promote_f32 (f32.add (local.get $p7) (local.get $p8)))))
      (f64.add (local.get $p9) (local.get $p10))))
  
  (export "add" (func $add))
  (export "multiply" (func $multiply))
  (export "memory_sum" (func $memory_sum))
  (export "fibonacci" (func $fibonacci))
  (export "many_params" (func $many_params)))
`;

// 性能基准测试类
class PerformanceBenchmark {
  constructor(wasmExports, memory) {
    this.wasm = wasmExports;
    this.memory = memory;
    this.results = new Map();
    this.baselineResults = null;
  }
  
  // 运行单个基准测试
  async runBenchmark(name, testFunction, iterations = 10000, warmupIterations = 1000) {
    console.log(`Running benchmark: ${name}`);
    
    // 预热
    for (let i = 0; i < warmupIterations; i++) {
      testFunction();
    }
    
    // 强制垃圾回收（如果可用）
    if (window.gc) {
      window.gc();
    }
    
    const measurements = [];
    
    for (let run = 0; run < 10; run++) {
      const startTime = performance.now();
      
      for (let i = 0; i < iterations; i++) {
        testFunction();
      }
      
      const endTime = performance.now();
      const totalTime = endTime - startTime;
      measurements.push(totalTime);
    }
    
    const stats = this._calculateStats(measurements, iterations);
    this.results.set(name, stats);
    
    console.log(`${name}: ${stats.avgTimePerOp.toFixed(3)} μs/op`);
    return stats;
  }
  
  // 计算统计信息
  _calculateStats(measurements, iterations) {
    measurements.sort((a, b) => a - b);
    
    const min = Math.min(...measurements);
    const max = Math.max(...measurements);
    const avg = measurements.reduce((sum, val) => sum + val, 0) / measurements.length;
    const median = measurements[Math.floor(measurements.length / 2)];
    
    const variance = measurements.reduce((sum, val) => sum + Math.pow(val - avg, 2), 0) / measurements.length;
    const stdDev = Math.sqrt(variance);
    
    return {
      iterations,
      runs: measurements.length,
      totalTimeMin: min,
      totalTimeMax: max,
      totalTimeAvg: avg,
      totalTimeMedian: median,
      totalTimeStdDev: stdDev,
      avgTimePerOp: (avg * 1000) / iterations, // 微秒
      medianTimePerOp: (median * 1000) / iterations,
      opsPerSecond: (iterations * 1000) / avg,
      measurements
    };
  }
  
  // 函数调用性能测试
  async benchmarkFunctionCalls() {
    console.log('=== Function Call Benchmarks ===');
    
    // 简单函数调用
    await this.runBenchmark('simple_add', () => {
      this.wasm.add(42, 58);
    });
    
    // 浮点运算
    await this.runBenchmark('float_multiply', () => {
      this.wasm.multiply(3.14159, 2.71828);
    });
    
    // 复杂计算
    await this.runBenchmark('fibonacci_20', () => {
      this.wasm.fibonacci(20);
    });
    
    // 多参数函数
    await this.runBenchmark('many_params', () => {
      this.wasm.many_params(1, 2, 3, 4, 1.1, 2.2, 3.3, 4.4, 5.5, 6.6);
    });
  }
  
  // 数据传输性能测试
  async benchmarkDataTransfer() {
    console.log('=== Data Transfer Benchmarks ===');
    
    const sizes = [100, 1000, 10000, 100000];
    
    for (const size of sizes) {
      // 创建测试数据
      const testData = new Float64Array(size);
      for (let i = 0; i < size; i++) {
        testData[i] = Math.random() * 1000;
      }
      
      // 分配 WebAssembly 内存
      const wasmArray = new Float64Array(this.memory.buffer, 1024, size);
      
      // 测试 JavaScript 到 WebAssembly 传输
      await this.runBenchmark(`js_to_wasm_${size}`, () => {
        wasmArray.set(testData);
      }, 1000);
      
      // 测试 WebAssembly 到 JavaScript 传输
      await this.runBenchmark(`wasm_to_js_${size}`, () => {
        const result = Array.from(wasmArray);
      }, 1000);
      
      // 测试 WebAssembly 内存操作
      await this.runBenchmark(`wasm_memory_sum_${size}`, () => {
        this.wasm.memory_sum(1024, size);
      }, 1000);
      
      // 对比 JavaScript 内存操作
      await this.runBenchmark(`js_array_sum_${size}`, () => {
        let sum = 0;
        for (let i = 0; i < testData.length; i++) {
          sum += testData[i];
        }
      }, 1000);
    }
  }
  
  // 不同调用模式的性能测试
  async benchmarkCallPatterns() {
    console.log('=== Call Pattern Benchmarks ===');
    
    // 直接调用
    await this.runBenchmark('direct_calls', () => {
      for (let i = 0; i < 100; i++) {
        this.wasm.add(i, i + 1);
      }
    }, 100);
    
    // 批量调用
    await this.runBenchmark('batched_calls', () => {
      const operations = [];
      for (let i = 0; i < 100; i++) {
        operations.push([i, i + 1]);
      }
      
      for (const [a, b] of operations) {
        this.wasm.add(a, b);
      }
    }, 100);
    
    // 函数引用缓存
    const addFunction = this.wasm.add;
    await this.runBenchmark('cached_function_ref', () => {
      for (let i = 0; i < 100; i++) {
        addFunction(i, i + 1);
      }
    }, 100);
  }
  
  // 内存访问模式测试
  async benchmarkMemoryPatterns() {
    console.log('=== Memory Access Pattern Benchmarks ===');
    
    const size = 10000;
    const data = new Float64Array(this.memory.buffer, 1024, size);
    
    // 填充测试数据
    for (let i = 0; i < size; i++) {
      data[i] = i;
    }
    
    // 顺序访问
    await this.runBenchmark('sequential_read', () => {
      let sum = 0;
      for (let i = 0; i < size; i++) {
        sum += data[i];
      }
    }, 100);
    
    // 随机访问
    const randomIndices = Array.from({ length: size }, () => Math.floor(Math.random() * size));
    await this.runBenchmark('random_read', () => {
      let sum = 0;
      for (let i = 0; i < size; i++) {
        sum += data[randomIndices[i]];
      }
    }, 100);
    
    // 步进访问
    await this.runBenchmark('strided_read', () => {
      let sum = 0;
      for (let i = 0; i < size; i += 10) {
        sum += data[i];
      }
    }, 100);
  }
  
  // 生成性能报告
  generateReport() {
    const report = {
      timestamp: new Date().toISOString(),
      environment: this._getEnvironmentInfo(),
      results: Object.fromEntries(this.results),
      summary: this._generateSummary(),
      recommendations: this._generateRecommendations()
    };
    
    return report;
  }
  
  _getEnvironmentInfo() {
    return {
      userAgent: navigator.userAgent,
      platform: navigator.platform,
      concurrency: navigator.hardwareConcurrency,
      memory: performance.memory ? {
        usedJSHeapSize: performance.memory.usedJSHeapSize,
        totalJSHeapSize: performance.memory.totalJSHeapSize,
        jsHeapSizeLimit: performance.memory.jsHeapSizeLimit
      } : null,
      wasmSupport: {
        instantiateStreaming: !!WebAssembly.instantiateStreaming,
        compileStreaming: !!WebAssembly.compileStreaming,
        threads: !!WebAssembly.Memory.prototype.grow
      }
    };
  }
  
  _generateSummary() {
    const functionCallTests = Array.from(this.results.entries())
      .filter(([name]) => ['simple_add', 'float_multiply', 'fibonacci_20', 'many_params'].includes(name));
    
    const dataTransferTests = Array.from(this.results.entries())
      .filter(([name]) => name.includes('_to_') || name.includes('_sum_'));
    
    return {
      totalTests: this.results.size,
      functionCallPerformance: {
        fastest: this._findFastest(functionCallTests),
        slowest: this._findSlowest(functionCallTests),
        average: this._calculateAverage(functionCallTests)
      },
      dataTransferPerformance: {
        fastest: this._findFastest(dataTransferTests),
        slowest: this._findSlowest(dataTransferTests),
        average: this._calculateAverage(dataTransferTests)
      }
    };
  }
  
  _findFastest(tests) {
    if (tests.length === 0) return null;
    return tests.reduce((fastest, [name, stats]) => {
      return !fastest || stats.avgTimePerOp < fastest.stats.avgTimePerOp
        ? { name, stats }
        : fastest;
    }, null);
  }
  
  _findSlowest(tests) {
    if (tests.length === 0) return null;
    return tests.reduce((slowest, [name, stats]) => {
      return !slowest || stats.avgTimePerOp > slowest.stats.avgTimePerOp
        ? { name, stats }
        : slowest;
    }, null);
  }
  
  _calculateAverage(tests) {
    if (tests.length === 0) return 0;
    const total = tests.reduce((sum, [, stats]) => sum + stats.avgTimePerOp, 0);
    return total / tests.length;
  }
  
  _generateRecommendations() {
    const recommendations = [];
    
    // 分析函数调用开销
    const simpleAdd = this.results.get('simple_add');
    const manyParams = this.results.get('many_params');
    
    if (simpleAdd && manyParams) {
      const overhead = manyParams.avgTimePerOp / simpleAdd.avgTimePerOp;
      if (overhead > 3) {
        recommendations.push({
          type: 'parameter_overhead',
          message: `函数参数过多会显著影响性能 (${overhead.toFixed(1)}x 开销)`,
          suggestion: '考虑使用结构体或减少参数数量'
        });
      }
    }
    
    // 分析内存访问模式
    const sequential = this.results.get('sequential_read');
    const random = this.results.get('random_read');
    
    if (sequential && random) {
      const ratio = random.avgTimePerOp / sequential.avgTimePerOp;
      if (ratio > 2) {
        recommendations.push({
          type: 'memory_access',
          message: `随机内存访问比顺序访问慢 ${ratio.toFixed(1)} 倍`,
          suggestion: '优化数据局部性，使用缓存友好的访问模式'
        });
      }
    }
    
    // 分析数据传输效率
    const transferTests = Array.from(this.results.entries())
      .filter(([name]) => name.includes('_to_'));
    
    if (transferTests.length > 0) {
      const avgTransferTime = this._calculateAverage(transferTests);
      if (avgTransferTime > 10) { // 10微秒阈值
        recommendations.push({
          type: 'data_transfer',
          message: '数据传输开销较高',
          suggestion: '考虑使用共享内存或减少数据传输频率'
        });
      }
    }
    
    return recommendations;
  }
  
  // 保存基准测试结果
  saveBaseline() {
    this.baselineResults = new Map(this.results);
    console.log('Baseline results saved');
  }
  
  // 与基准结果比较
  compareWithBaseline() {
    if (!this.baselineResults) {
      throw new Error('No baseline results available');
    }
    
    const comparison = {};
    
    for (const [testName, currentStats] of this.results) {
      const baselineStats = this.baselineResults.get(testName);
      if (baselineStats) {
        const ratio = currentStats.avgTimePerOp / baselineStats.avgTimePerOp;
        const change = ((ratio - 1) * 100);
        
        comparison[testName] = {
          current: currentStats.avgTimePerOp,
          baseline: baselineStats.avgTimePerOp,
          ratio: ratio,
          changePercent: change,
          isRegression: change > 5, // 5% 阈值
          isImprovement: change < -5
        };
      }
    }
    
    return comparison;
  }
  
  // 输出格式化的测试结果
  printResults() {
    console.log('\n=== Performance Benchmark Results ===');
    console.log('Test Name'.padEnd(25) + 'Time/Op (μs)'.padEnd(15) + 'Ops/Sec');
    console.log('-'.repeat(55));
    
    const sortedResults = Array.from(this.results.entries())
      .sort(([, a], [, b]) => a.avgTimePerOp - b.avgTimePerOp);
    
    for (const [name, stats] of sortedResults) {
      const timeStr = stats.avgTimePerOp.toFixed(3);
      const opsStr = Math.floor(stats.opsPerSecond).toLocaleString();
      console.log(name.padEnd(25) + timeStr.padEnd(15) + opsStr);
    }
    
    console.log('\n=== Environment Info ===');
    const env = this._getEnvironmentInfo();
    console.log(`Platform: ${env.platform}`);
    console.log(`Concurrency: ${env.concurrency} cores`);
    if (env.memory) {
      console.log(`JS Heap: ${(env.memory.usedJSHeapSize / 1024 / 1024).toFixed(1)} MB used`);
    }
  }
}

// 使用示例
async function runPerformanceTests() {
  console.log('Initializing WebAssembly module...');
  
  const wasmModule = await WebAssembly.instantiate(
    await WebAssembly.wat2wasm(benchmarkWat)
  );
  
  const benchmark = new PerformanceBenchmark(
    wasmModule.instance.exports,
    wasmModule.instance.exports.memory
  );
  
  console.log('Starting performance benchmarks...');
  
  try {
    // 运行各类基准测试
    await benchmark.benchmarkFunctionCalls();
    await benchmark.benchmarkDataTransfer();
    await benchmark.benchmarkCallPatterns();
    await benchmark.benchmarkMemoryPatterns();
    
    // 输出结果
    benchmark.printResults();
    
    // 生成详细报告
    const report = benchmark.generateReport();
    console.log('\n=== Performance Report ===');
    console.log(JSON.stringify(report, null, 2));
    
    // 保存基准
    benchmark.saveBaseline();
    
    // 模拟第二次运行来测试回归检测
    console.log('\n=== Running regression test ===');
    await benchmark.benchmarkFunctionCalls();
    
    const comparison = benchmark.compareWithBaseline();
    console.log('Baseline comparison:', comparison);
    
  } catch (error) {
    console.error('Benchmark failed:', error);
  }
}

挑战项目

练习 7.5：实时数据流处理系统（35分）

题目：设计一个高性能的实时数据流处理系统，结合 WebAssembly 和 JavaScript 处理大量数据流。

要求：

1. 支持多种数据源（WebSocket、文件、模拟数据）
2. 实现流式数据处理管道
3. 提供实时性能监控和可视化
4. 支持背压控制和错误恢复

// 数据流处理的 WAT 模块
const streamProcessingWat = `
(module
  (memory (export "memory") 64)
  
  ;; 滑动窗口求和
  (func $sliding_window_sum (param $data_ptr i32) (param $window_size i32) (param $data_length i32) (param $output_ptr i32)
    (local $i i32)
    (local $sum f64)
    (local $window_start i32)
    (local $window_end i32)
    (local $j i32)
    
    ;; 为每个位置计算滑动窗口和
    (loop $outer_loop
      (if (i32.ge_u (local.get $i) (local.get $data_length))
        (then (br $outer_loop)))
      
      ;; 计算窗口范围
      (local.set $window_start (local.get $i))
      (local.set $window_end 
        (select
          (i32.add (local.get $i) (local.get $window_size))
          (local.get $data_length)
          (i32.le_u
            (i32.add (local.get $i) (local.get $window_size))
            (local.get $data_length))))
      
      ;; 计算窗口内的和
      (local.set $sum (f64.const 0))
      (local.set $j (local.get $window_start))
      
      (loop $inner_loop
        (if (i32.ge_u (local.get $j) (local.get $window_end))
          (then (br $inner_loop)))
        
        (local.set $sum
          (f64.add
            (local.get $sum)
            (f64.load (i32.add (local.get $data_ptr) (i32.mul (local.get $j) (i32.const 8))))))
        
        (local.set $j (i32.add (local.get $j) (i32.const 1)))
        (br $inner_loop))
      
      ;; 存储结果
      (f64.store
        (i32.add (local.get $output_ptr) (i32.mul (local.get $i) (i32.const 8)))
        (local.get $sum))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $outer_loop)))
  
  ;; 移动平均
  (func $moving_average (param $data_ptr i32) (param $window_size i32) (param $data_length i32) (param $output_ptr i32)
    (local $i i32)
    (local $sum f64)
    (local $count f64)
    
    (call $sliding_window_sum (local.get $data_ptr) (local.get $window_size) (local.get $data_length) (local.get $output_ptr))
    
    ;; 除以窗口大小得到平均值
    (loop $avg_loop
      (if (i32.ge_u (local.get $i) (local.get $data_length))
        (then (br $avg_loop)))
      
      (local.set $count
        (f64.convert_i32_u
          (select
            (local.get $window_size)
            (i32.add (local.get $i) (i32.const 1))
            (i32.le_u (local.get $window_size) (i32.add (local.get $i) (i32.const 1))))))
      
      (f64.store
        (i32.add (local.get $output_ptr) (i32.mul (local.get $i) (i32.const 8)))
        (f64.div
          (f64.load (i32.add (local.get $output_ptr) (i32.mul (local.get $i) (i32.const 8))))
          (local.get $count)))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $avg_loop)))
  
  ;; 异常检测（简单阈值）
  (func $detect_anomalies (param $data_ptr i32) (param $threshold f64) (param $data_length i32) (param $output_ptr i32) (result i32)
    (local $i i32)
    (local $anomaly_count i32)
    (local $value f64)
    
    (loop $anomaly_loop
      (if (i32.ge_u (local.get $i) (local.get $data_length))
        (then (br $anomaly_loop)))
      
      (local.set $value
        (f64.load (i32.add (local.get $data_ptr) (i32.mul (local.get $i) (i32.const 8)))))
      
      (if (f64.gt (f64.abs (local.get $value)) (local.get $threshold))
        (then
          (i32.store8
            (i32.add (local.get $output_ptr) (local.get $i))
            (i32.const 1))
          (local.set $anomaly_count (i32.add (local.get $anomaly_count) (i32.const 1))))
        (else
          (i32.store8
            (i32.add (local.get $output_ptr) (local.get $i))
            (i32.const 0))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $anomaly_loop))
    
    local.get $anomaly_count)
  
  ;; 数据聚合
  (func $aggregate_data (param $data_ptr i32) (param $data_length i32) (param $result_ptr i32)
    (local $sum f64)
    (local $min f64)
    (local $max f64)
    (local $i i32)
    (local $value f64)
    
    ;; 初始化
    (local.set $min (f64.const inf))
    (local.set $max (f64.const -inf))
    
    (loop $agg_loop
      (if (i32.ge_u (local.get $i) (local.get $data_length))
        (then (br $agg_loop)))
      
      (local.set $value
        (f64.load (i32.add (local.get $data_ptr) (i32.mul (local.get $i) (i32.const 8)))))
      
      (local.set $sum (f64.add (local.get $sum) (local.get $value)))
      (local.set $min (f64.min (local.get $min) (local.get $value)))
      (local.set $max (f64.max (local.get $max) (local.get $value)))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br $agg_loop))
    
    ;; 存储结果: sum, avg, min, max
    (f64.store (local.get $result_ptr) (local.get $sum))
    (f64.store
      (i32.add (local.get $result_ptr) (i32.const 8))
      (f64.div (local.get $sum) (f64.convert_i32_u (local.get $data_length))))
    (f64.store (i32.add (local.get $result_ptr) (i32.const 16)) (local.get $min))
    (f64.store (i32.add (local.get $result_ptr) (i32.const 24)) (local.get $max)))
  
  (export "sliding_window_sum" (func $sliding_window_sum))
  (export "moving_average" (func $moving_average))
  (export "detect_anomalies" (func $detect_anomalies))
  (export "aggregate_data" (func $aggregate_data)))
`;

// 实时数据流处理器
class RealTimeStreamProcessor {
  constructor(options = {}) {
    this.options = {
      bufferSize: 8192,
      windowSize: 100,
      maxLatency: 100, // ms
      enableBackpressure: true,
      anomalyThreshold: 3.0,
      ...options
    };
    
    this.wasmModule = null;
    this.memory = null;
    this.isRunning = false;
    
    // 数据缓冲区
    this.inputBuffer = [];
    this.processingBuffer = null;
    this.outputBuffer = [];
    
    // 性能监控
    this.metrics = {
      totalProcessed: 0,
      totalLatency: 0,
      maxLatency: 0,
      errorCount: 0,
      backpressureEvents: 0,
      anomaliesDetected: 0,
      startTime: null
    };
    
    // 事件监听器
    this.listeners = new Map();
    
    // 处理管道
    this.pipeline = [];
  }
  
  async initialize() {
    console.log('Initializing stream processor...');
    
    // 加载 WebAssembly 模块
    this.wasmModule = await WebAssembly.instantiate(
      await WebAssembly.wat2wasm(streamProcessingWat)
    );
    
    this.memory = this.wasmModule.instance.exports.memory;
    this.wasm = this.wasmModule.instance.exports;
    
    // 设置处理缓冲区
    this.processingBuffer = {
      data: new Float64Array(this.memory.buffer, 1024, this.options.bufferSize),
      output: new Float64Array(this.memory.buffer, 1024 + this.options.bufferSize * 8, this.options.bufferSize),
      anomalies: new Uint8Array(this.memory.buffer, 1024 + this.options.bufferSize * 16, this.options.bufferSize)
    };
    
    console.log('Stream processor initialized');
  }
  
  // 注册处理步骤
  addProcessor(name, processor) {
    this.pipeline.push({ name, processor });
  }
  
  // 开始数据流处理
  start() {
    if (this.isRunning) {
      throw new Error('Processor is already running');
    }
    
    this.isRunning = true;
    this.metrics.startTime = Date.now();
    
    // 启动处理循环
    this.processingLoop();
    
    console.log('Stream processor started');
    this.emit('started');
  }
  
  // 停止数据流处理
  stop() {
    this.isRunning = false;
    console.log('Stream processor stopped');
    this.emit('stopped', this.getMetrics());
  }
  
  // 主处理循环
  async processingLoop() {
    while (this.isRunning) {
      try {
        if (this.inputBuffer.length > 0) {
          await this.processChunk();
        } else {
          // 短暂休眠以避免 CPU 占用过高
          await this.sleep(1);
        }
      } catch (error) {
        this.metrics.errorCount++;
        this.emit('error', error);
        console.error('Processing error:', error);
      }
    }
  }
  
  // 处理数据块
  async processChunk() {
    const startTime = performance.now();
    
    // 检查背压
    if (this.options.enableBackpressure && this.shouldApplyBackpressure()) {
      this.metrics.backpressureEvents++;
      this.emit('backpressure', { bufferSize: this.inputBuffer.length });
      await this.sleep(10); // 等待缓解压力
      return;
    }
    
    // 获取处理数据
    const chunkSize = Math.min(this.inputBuffer.length, this.options.bufferSize);
    const chunk = this.inputBuffer.splice(0, chunkSize);
    
    if (chunk.length === 0) return;
    
    // 复制数据到 WebAssembly 内存
    this.processingBuffer.data.set(chunk);
    
    // 执行处理管道
    let processedData = {
      raw: chunk,
      processed: new Array(chunk.length),
      metadata: {
        timestamp: Date.now(),
        size: chunk.length
      }
    };
    
    // 运行 WebAssembly 处理步骤
    await this.runWasmProcessing(processedData, chunk.length);
    
    // 运行 JavaScript 处理步骤
    for (const { name, processor } of this.pipeline) {
      try {
        processedData = await processor(processedData);
      } catch (error) {
        console.error(`Processor ${name} failed:`, error);
        this.metrics.errorCount++;
      }
    }
    
    // 输出结果
    this.outputBuffer.push(processedData);
    
    // 更新指标
    const latency = performance.now() - startTime;
    this.metrics.totalProcessed += chunk.length;
    this.metrics.totalLatency += latency;
    this.metrics.maxLatency = Math.max(this.metrics.maxLatency, latency);
    
    // 发出处理完成事件
    this.emit('processed', {
      data: processedData,
      latency: latency,
      throughput: chunk.length / latency * 1000 // 每秒处理的数据点
    });
    
    // 检查延迟警告
    if (latency > this.options.maxLatency) {
      this.emit('latency_warning', { latency, threshold: this.options.maxLatency });
    }
  }
  
  // WebAssembly 处理步骤
  async runWasmProcessing(processedData, dataLength) {
    const dataPtr = 1024;
    const outputPtr = dataPtr + this.options.bufferSize * 8;
    const anomalyPtr = outputPtr + this.options.bufferSize * 8;
    const aggregatePtr = anomalyPtr + this.options.bufferSize;
    
    // 移动平均
    this.wasm.moving_average(dataPtr, this.options.windowSize, dataLength, outputPtr);
    processedData.movingAverage = Array.from(this.processingBuffer.output.slice(0, dataLength));
    
    // 异常检测
    const anomalyCount = this.wasm.detect_anomalies(
      dataPtr, 
      this.options.anomalyThreshold, 
      dataLength, 
      anomalyPtr
    );
    
    if (anomalyCount > 0) {
      this.metrics.anomaliesDetected += anomalyCount;
      processedData.anomalies = Array.from(this.processingBuffer.anomalies.slice(0, dataLength));
      this.emit('anomaly_detected', { count: anomalyCount, data: processedData });
    }
    
    // 数据聚合
    this.wasm.aggregate_data(dataPtr, dataLength, aggregatePtr);
    const aggregateView = new Float64Array(this.memory.buffer, aggregatePtr, 4);
    processedData.aggregate = {
      sum: aggregateView[0],
      average: aggregateView[1],
      min: aggregateView[2],
      max: aggregateView[3]
    };
  }
  
  // 背压控制
  shouldApplyBackpressure() {
    return this.inputBuffer.length > this.options.bufferSize * 2;
  }
  
  // 添加数据到输入缓冲区
  addData(data) {
    if (!this.isRunning) {
      throw new Error('Processor is not running');
    }
    
    if (Array.isArray(data)) {
      this.inputBuffer.push(...data);
    } else {
      this.inputBuffer.push(data);
    }
  }
  
  // 获取处理结果
  getResults(count = 10) {
    return this.outputBuffer.splice(0, count);
  }
  
  // 获取性能指标
  getMetrics() {
    const runtime = this.metrics.startTime ? Date.now() - this.metrics.startTime : 0;
    
    return {
      ...this.metrics,
      runtime,
      averageLatency: this.metrics.totalProcessed > 0 ? 
        this.metrics.totalLatency / this.metrics.totalProcessed : 0,
      throughput: runtime > 0 ? this.metrics.totalProcessed / runtime * 1000 : 0,
      errorRate: this.metrics.totalProcessed > 0 ? 
        this.metrics.errorCount / this.metrics.totalProcessed : 0
    };
  }
  
  // 事件系统
  on(event, listener) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, []);
    }
    this.listeners.get(event).push(listener);
  }
  
  emit(event, data) {
    const eventListeners = this.listeners.get(event) || [];
    eventListeners.forEach(listener => {
      try {
        listener(data);
      } catch (error) {
        console.error(`Event listener error for ${event}:`, error);
      }
    });
  }
  
  sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

// 数据源类
class DataSource {
  constructor(type, options = {}) {
    this.type = type;
    this.options = options;
    this.isRunning = false;
    this.listeners = [];
  }
  
  onData(listener) {
    this.listeners.push(listener);
  }
  
  emit(data) {
    this.listeners.forEach(listener => listener(data));
  }
  
  start() {
    this.isRunning = true;
    
    switch (this.type) {
      case 'websocket':
        this.startWebSocket();
        break;
      case 'file':
        this.startFileStream();
        break;
      case 'simulation':
        this.startSimulation();
        break;
      default:
        throw new Error(`Unknown data source type: ${this.type}`);
    }
  }
  
  stop() {
    this.isRunning = false;
  }
  
  startWebSocket() {
    // WebSocket 数据源实现
    const ws = new WebSocket(this.options.url || 'wss://echo.websocket.org');
    
    ws.onmessage = (event) => {
      if (this.isRunning) {
        try {
          const data = JSON.parse(event.data);
          this.emit(data);
        } catch (error) {
          console.error('WebSocket data parse error:', error);
        }
      }
    };
    
    ws.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  }
  
  startFileStream() {
    // 文件流数据源实现（模拟）
    const reader = new FileReader();
    
    if (this.options.file) {
      reader.onload = (event) => {
        const content = event.target.result;
        const lines = content.split('\n');
        
        let index = 0;
        const interval = setInterval(() => {
          if (!this.isRunning || index >= lines.length) {
            clearInterval(interval);
            return;
          }
          
          try {
            const value = parseFloat(lines[index]);
            if (!isNaN(value)) {
              this.emit(value);
            }
          } catch (error) {
            console.error('File data parse error:', error);
          }
          
          index++;
        }, this.options.interval || 10);
      };
      
      reader.readAsText(this.options.file);
    }
  }
  
  startSimulation() {
    // 模拟数据源
    const interval = setInterval(() => {
      if (!this.isRunning) {
        clearInterval(interval);
        return;
      }
      
      // 生成模拟数据（正弦波 + 噪声 + 偶尔的异常值）
      const t = Date.now() / 1000;
      const baseValue = Math.sin(t * 0.1) * 10;
      const noise = (Math.random() - 0.5) * 2;
      const anomaly = Math.random() < 0.01 ? (Math.random() - 0.5) * 50 : 0; // 1% 异常概率
      
      const value = baseValue + noise + anomaly;
      this.emit(value);
      
    }, this.options.interval || 50); // 20Hz 采样率
  }
}

// 实时可视化组件
class RealTimeVisualizer {
  constructor(canvasId, options = {}) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.options = {
      maxPoints: 500,
      updateInterval: 50,
      showMovingAverage: true,
      showAnomalies: true,
      ...options
    };
    
    this.data = [];
    this.movingAverage = [];
    this.anomalies = [];
    this.metrics = null;
    
    this.setupCanvas();
    this.startAnimation();
  }
  
  setupCanvas() {
    this.canvas.width = this.canvas.offsetWidth;
    this.canvas.height = this.canvas.offsetHeight;
  }
  
  addData(processedData) {
    this.data.push(...processedData.raw);
    
    if (processedData.movingAverage) {
      this.movingAverage.push(...processedData.movingAverage);
    }
    
    if (processedData.anomalies) {
      this.anomalies.push(...processedData.anomalies);
    }
    
    // 保持数据长度在限制内
    if (this.data.length > this.options.maxPoints) {
      const excess = this.data.length - this.options.maxPoints;
      this.data.splice(0, excess);
      this.movingAverage.splice(0, excess);
      this.anomalies.splice(0, excess);
    }
  }
  
  updateMetrics(metrics) {
    this.metrics = metrics;
  }
  
  startAnimation() {
    const animate = () => {
      this.draw();
      setTimeout(() => {
        requestAnimationFrame(animate);
      }, this.options.updateInterval);
    };
    
    animate();
  }
  
  draw() {
    const { width, height } = this.canvas;
    this.ctx.clearRect(0, 0, width, height);
    
    if (this.data.length < 2) return;
    
    // 计算绘图范围
    const minValue = Math.min(...this.data);
    const maxValue = Math.max(...this.data);
    const range = maxValue - minValue;
    const margin = range * 0.1;
    
    const scaleY = (height - 60) / (range + margin * 2);
    const scaleX = (width - 60) / Math.max(this.data.length - 1, 1);
    
    // 绘制网格
    this.drawGrid(width, height, minValue - margin, maxValue + margin);
    
    // 绘制原始数据
    this.drawLine(this.data, scaleX, scaleY, minValue - margin, '#2196F3', 2);
    
    // 绘制移动平均
    if (this.options.showMovingAverage && this.movingAverage.length > 0) {
      this.drawLine(this.movingAverage, scaleX, scaleY, minValue - margin, '#FF9800', 1);
    }
    
    // 绘制异常点
    if (this.options.showAnomalies && this.anomalies.length > 0) {
      this.drawAnomalies(scaleX, scaleY, minValue - margin);
    }
    
    // 绘制图例和指标
    this.drawLegend();
    this.drawMetrics();
  }
  
  drawGrid(width, height, minValue, maxValue) {
    this.ctx.strokeStyle = '#E0E0E0';
    this.ctx.lineWidth = 1;
    
    // 水平网格线
    for (let i = 0; i <= 10; i++) {
      const y = 30 + (height - 60) * i / 10;
      this.ctx.beginPath();
      this.ctx.moveTo(30, y);
      this.ctx.lineTo(width - 30, y);
      this.ctx.stroke();
      
      // 标签
      const value = maxValue - (maxValue - minValue) * i / 10;
      this.ctx.fillStyle = '#666';
      this.ctx.font = '12px Arial';
      this.ctx.fillText(value.toFixed(1), 5, y + 4);
    }
    
    // 垂直网格线
    for (let i = 0; i <= 10; i++) {
      const x = 30 + (width - 60) * i / 10;
      this.ctx.beginPath();
      this.ctx.moveTo(x, 30);
      this.ctx.lineTo(x, height - 30);
      this.ctx.stroke();
    }
  }
  
  drawLine(data, scaleX, scaleY, minValue, color, lineWidth) {
    this.ctx.strokeStyle = color;
    this.ctx.lineWidth = lineWidth;
    this.ctx.beginPath();
    
    for (let i = 0; i < data.length; i++) {
      const x = 30 + i * scaleX;
      const y = 30 + (data[i] - minValue) * scaleY;
      
      if (i === 0) {
        this.ctx.moveTo(x, this.canvas.height - y);
      } else {
        this.ctx.lineTo(x, this.canvas.height - y);
      }
    }
    
    this.ctx.stroke();
  }
  
  drawAnomalies(scaleX, scaleY, minValue) {
    this.ctx.fillStyle = '#F44336';
    
    for (let i = 0; i < this.anomalies.length; i++) {
      if (this.anomalies[i]) {
        const x = 30 + i * scaleX;
        const y = 30 + (this.data[i] - minValue) * scaleY;
        
        this.ctx.beginPath();
        this.ctx.arc(x, this.canvas.height - y, 4, 0, Math.PI * 2);
        this.ctx.fill();
      }
    }
  }
  
  drawLegend() {
    this.ctx.font = '14px Arial';
    let y = 20;
    
    // 原始数据
    this.ctx.fillStyle = '#2196F3';
    this.ctx.fillRect(10, y - 8, 20, 3);
    this.ctx.fillStyle = '#333';
    this.ctx.fillText('原始数据', 35, y);
    y += 20;
    
    // 移动平均
    if (this.options.showMovingAverage) {
      this.ctx.fillStyle = '#FF9800';
      this.ctx.fillRect(10, y - 8, 20, 3);
      this.ctx.fillStyle = '#333';
      this.ctx.fillText('移动平均', 35, y);
      y += 20;
    }
    
    // 异常点
    if (this.options.showAnomalies) {
      this.ctx.fillStyle = '#F44336';
      this.ctx.beginPath();
      this.ctx.arc(20, y - 5, 4, 0, Math.PI * 2);
      this.ctx.fill();
      this.ctx.fillStyle = '#333';
      this.ctx.fillText('异常点', 35, y);
    }
  }
  
  drawMetrics() {
    if (!this.metrics) return;
    
    this.ctx.font = '12px monospace';
    this.ctx.fillStyle = '#333';
    
    const metricsText = [
      `吞吐量: ${this.metrics.throughput.toFixed(1)} 点/秒`,
      `延迟: ${this.metrics.averageLatency.toFixed(2)} ms`,
      `异常: ${this.metrics.anomaliesDetected}`,
      `错误: ${this.metrics.errorCount}`
    ];
    
    let y = this.canvas.height - 60;
    metricsText.forEach(text => {
      this.ctx.fillText(text, this.canvas.width - 180, y);
      y += 15;
    });
  }
}

// 完整的使用示例
async function createRealTimeStreamProcessingSystem() {
  console.log('=== 实时数据流处理系统 ===');
  
  // 创建处理器
  const processor = new RealTimeStreamProcessor({
    bufferSize: 1000,
    windowSize: 50,
    maxLatency: 50,
    anomalyThreshold: 2.5
  });
  
  // 初始化
  await processor.initialize();
  
  // 添加自定义处理步骤
  processor.addProcessor('outlier_filter', async (data) => {
    // 简单的离群值过滤
    const threshold = 3 * Math.sqrt(data.aggregate.average);
    data.filtered = data.raw.filter(value => Math.abs(value) < threshold);
    return data;
  });
  
  processor.addProcessor('trend_detection', async (data) => {
    // 简单的趋势检测
    if (data.movingAverage && data.movingAverage.length > 10) {
      const recent = data.movingAverage.slice(-10);
      const older = data.movingAverage.slice(-20, -10);
      const recentAvg = recent.reduce((sum, v) => sum + v, 0) / recent.length;
      const olderAvg = older.reduce((sum, v) => sum + v, 0) / older.length;
      
      data.trend = recentAvg > olderAvg ? 'up' : 'down';
    }
    return data;
  });
  
  // 创建可视化组件（需要 HTML canvas 元素）
  // const visualizer = new RealTimeVisualizer('dataCanvas');
  
  // 设置事件监听
  processor.on('processed', (result) => {
    console.log(`处理了 ${result.data.raw.length} 个数据点，延迟 ${result.latency.toFixed(2)} ms`);
    // visualizer.addData(result.data);
    // visualizer.updateMetrics(processor.getMetrics());
  });
  
  processor.on('anomaly_detected', (event) => {
    console.warn(`检测到 ${event.count} 个异常值`);
  });
  
  processor.on('backpressure', (event) => {
    console.warn(`背压激活，缓冲区大小: ${event.bufferSize}`);
  });
  
  processor.on('latency_warning', (event) => {
    console.warn(`延迟过高: ${event.latency.toFixed(2)} ms`);
  });
  
  // 创建数据源
  const dataSource = new DataSource('simulation', {
    interval: 20 // 50Hz
  });
  
  // 连接数据源到处理器
  dataSource.onData((data) => {
    processor.addData(data);
  });
  
  // 启动系统
  console.log('启动数据源...');
  dataSource.start();
  
  console.log('启动处理器...');
  processor.start();
  
  // 运行一段时间后显示统计信息
  setTimeout(() => {
    console.log('=== 性能统计 ===');
    const metrics = processor.getMetrics();
    console.log(JSON.stringify(metrics, null, 2));
    
    // 获取一些处理结果
    const results = processor.getResults(5);
    console.log('=== 最近的处理结果 ===');
    results.forEach((result, index) => {
      console.log(`结果 ${index + 1}:`, {
        size: result.raw.length,
        aggregate: result.aggregate,
        trend: result.trend,
        anomalyCount: result.anomalies ? result.anomalies.filter(a => a).length : 0
      });
    });
    
    // 停止系统
    setTimeout(() => {
      dataSource.stop();
      processor.stop();
      console.log('系统已停止');
    }, 5000);
    
  }, 10000);
}

总结与评分标准

🎯 学习目标检查表

完成本章练习后，你应该能够：

• 模块加载与管理（练习 7.1-7.2）

  • 实现健壮的模块加载器
  • 处理类型安全的数据转换
  • 管理内存分配和释放

• 性能优化技术（练习 7.3-7.4）

  • 设计高效的内存池管理
  • 实现性能基准测试
  • 分析和优化数据传输

• 实际应用开发（练习 7.5）

  • 构建实时数据处理系统
  • 实现流式数据处理
  • 集成监控和可视化

📊 评分标准

🔧 实践建议

1. 循序渐进：先完成基础练习，理解核心概念
2. 注重性能：在进阶练习中专注于性能测量和优化
3. 系统思维：在挑战项目中考虑完整的系统架构
4. 实际应用：尝试将练习中的技术应用到实际项目中

📚 扩展学习

• WebAssembly System Interface (WASI)：了解系统级接口
• Web Workers 集成：学习多线程 WebAssembly 应用
• 编译器工具链：深入学习 Emscripten 和 wasm-pack
• 性能调试工具：掌握 WebAssembly 性能分析工具

🎉 恭喜！ 完成这些练习后，你已经具备了深度掌握 WebAssembly 与 JavaScript 交互的能力，可以构建高性能的 Web 应用程序！

第8章 从 C/C++ 编译

C/C++ 是编译到 WebAssembly 的主要语言之一，通过 Emscripten 工具链可以将现有的 C/C++ 代码高效地转换为 WebAssembly。本章将详细介绍 C/C++ 到 WebAssembly 的编译流程、优化技巧和实践案例。

8.1 Emscripten 工具链

8.1.1 Emscripten 简介

Emscripten 是一个完整的工具链，用于将 C/C++ 代码编译为 WebAssembly：

核心组件：

• emcc: C 编译器（基于 Clang）
• em++: C++ 编译器（基于 Clang++）
• emsdk: Emscripten SDK 管理器
• emcmake: CMake 包装器
• emmake: Make 包装器

编译流程：

graph LR
    A[C/C++ 源码] --> B[Clang/LLVM]
    B --> C[LLVM IR]
    C --> D[Emscripten Backend]
    D --> E[WebAssembly]
    D --> F[JavaScript 胶水代码]

8.1.2 环境配置

安装 Emscripten：

# 下载 emsdk
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# 安装最新稳定版
./emsdk install latest
./emsdk activate latest

# 设置环境变量
source ./emsdk_env.sh

验证安装：

# 检查版本
emcc --version
em++ --version

# 测试编译
echo 'int main() { return 42; }' > test.c
emcc test.c -o test.html

8.1.3 基本编译命令

简单编译：

# 编译为 HTML + WASM
emcc hello.c -o hello.html

# 仅编译为 WASM + JS
emcc hello.c -o hello.js

# 编译为纯 WASM
emcc hello.c -o hello.wasm --no-entry

常用编译选项：

# 优化等级
emcc hello.c -O3 -o hello.js          # 最高优化
emcc hello.c -Os -o hello.js          # 体积优化
emcc hello.c -Oz -o hello.js          # 极致体积优化

# 调试模式
emcc hello.c -g -O0 -o hello.js       # 调试模式
emcc hello.c -gsource-map -o hello.js # 生成源码映射

# 内存设置
emcc hello.c -s INITIAL_MEMORY=64MB -o hello.js
emcc hello.c -s ALLOW_MEMORY_GROWTH=1 -o hello.js

8.2 基础编译示例

8.2.1 Hello World 示例

C 源码 (hello.c):

#include <stdio.h>

int main() {
    printf("Hello, WebAssembly from C!\n");
    return 0;
}

编译和运行：

# 编译为 HTML 页面
emcc hello.c -o hello.html

# 在浏览器中打开 hello.html
# 或使用 Python 启动本地服务器
python3 -m http.server 8000

生成的文件：

• hello.html: 包含运行环境的 HTML 页面
• hello.js: JavaScript 胶水代码
• hello.wasm: WebAssembly 二进制文件

8.2.2 数学计算示例

数学库 (math_lib.c):

#include <math.h>
#include <emscripten.h>

// 使用 EMSCRIPTEN_KEEPALIVE 防止函数被优化掉
EMSCRIPTEN_KEEPALIVE
double calculate_circle_area(double radius) {
    return M_PI * radius * radius;
}

EMSCRIPTEN_KEEPALIVE
double calculate_factorial(int n) {
    if (n <= 1) return 1.0;
    double result = 1.0;
    for (int i = 2; i <= n; i++) {
        result *= i;
    }
    return result;
}

EMSCRIPTEN_KEEPALIVE
double calculate_fibonacci(int n) {
    if (n <= 1) return n;
    
    double a = 0, b = 1, temp;
    for (int i = 2; i <= n; i++) {
        temp = a + b;
        a = b;
        b = temp;
    }
    return b;
}

// 向量运算
EMSCRIPTEN_KEEPALIVE
void vector_add(float* a, float* b, float* result, int length) {
    for (int i = 0; i < length; i++) {
        result[i] = a[i] + b[i];
    }
}

EMSCRIPTEN_KEEPALIVE
float vector_dot_product(float* a, float* b, int length) {
    float sum = 0.0f;
    for (int i = 0; i < length; i++) {
        sum += a[i] * b[i];
    }
    return sum;
}

编译数学库：

emcc math_lib.c -o math_lib.js \
  -s EXPORTED_FUNCTIONS='["_calculate_circle_area","_calculate_factorial","_calculate_fibonacci","_vector_add","_vector_dot_product"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]' \
  -O3

JavaScript 调用：

// 加载 WebAssembly 模块
Module.onRuntimeInitialized = function() {
    // 包装 C 函数
    const calculateCircleArea = Module.cwrap('calculate_circle_area', 'number', ['number']);
    const calculateFactorial = Module.cwrap('calculate_factorial', 'number', ['number']);
    const calculateFibonacci = Module.cwrap('calculate_fibonacci', 'number', ['number']);
    
    // 调用函数
    console.log('Circle area (r=5):', calculateCircleArea(5));
    console.log('Factorial(10):', calculateFactorial(10));
    console.log('Fibonacci(20):', calculateFibonacci(20));
    
    // 向量运算示例
    const vectorAdd = Module.cwrap('vector_add', null, ['number', 'number', 'number', 'number']);
    const vectorDot = Module.cwrap('vector_dot_product', 'number', ['number', 'number', 'number']);
    
    // 分配内存
    const length = 4;
    const bytesPerFloat = 4;
    const ptr_a = Module._malloc(length * bytesPerFloat);
    const ptr_b = Module._malloc(length * bytesPerFloat);
    const ptr_result = Module._malloc(length * bytesPerFloat);
    
    // 创建 TypedArray 视图
    const a = new Float32Array(Module.HEAPF32.buffer, ptr_a, length);
    const b = new Float32Array(Module.HEAPF32.buffer, ptr_b, length);
    const result = new Float32Array(Module.HEAPF32.buffer, ptr_result, length);
    
    // 设置数据
    a.set([1, 2, 3, 4]);
    b.set([5, 6, 7, 8]);
    
    // 执行向量加法
    vectorAdd(ptr_a, ptr_b, ptr_result, length);
    console.log('Vector addition result:', Array.from(result));
    
    // 执行点积
    const dotProduct = vectorDot(ptr_a, ptr_b, length);
    console.log('Dot product:', dotProduct);
    
    // 释放内存
    Module._free(ptr_a);
    Module._free(ptr_b);
    Module._free(ptr_result);
};

8.2.3 C++ 类和对象示例

C++ 类库 (geometry.cpp):

#include <emscripten/bind.h>
#include <vector>
#include <cmath>

class Point {
public:
    Point(double x, double y) : x_(x), y_(y) {}
    
    double getX() const { return x_; }
    double getY() const { return y_; }
    void setX(double x) { x_ = x; }
    void setY(double y) { y_ = y; }
    
    double distanceTo(const Point& other) const {
        double dx = x_ - other.x_;
        double dy = y_ - other.y_;
        return std::sqrt(dx * dx + dy * dy);
    }
    
    Point add(const Point& other) const {
        return Point(x_ + other.x_, y_ + other.y_);
    }
    
private:
    double x_, y_;
};

class Circle {
public:
    Circle(const Point& center, double radius) 
        : center_(center), radius_(radius) {}
    
    double getArea() const {
        return M_PI * radius_ * radius_;
    }
    
    double getCircumference() const {
        return 2 * M_PI * radius_;
    }
    
    bool contains(const Point& point) const {
        return center_.distanceTo(point) <= radius_;
    }
    
    Point getCenter() const { return center_; }
    double getRadius() const { return radius_; }
    
private:
    Point center_;
    double radius_;
};

class Polygon {
public:
    void addPoint(const Point& point) {
        points_.push_back(point);
    }
    
    double getPerimeter() const {
        if (points_.size() < 2) return 0.0;
        
        double perimeter = 0.0;
        for (size_t i = 0; i < points_.size(); i++) {
            size_t next = (i + 1) % points_.size();
            perimeter += points_[i].distanceTo(points_[next]);
        }
        return perimeter;
    }
    
    size_t getPointCount() const {
        return points_.size();
    }
    
    Point getPoint(size_t index) const {
        if (index < points_.size()) {
            return points_[index];
        }
        return Point(0, 0); // 默认值
    }
    
private:
    std::vector<Point> points_;
};

// 使用 Embind 绑定 C++ 类到 JavaScript
using namespace emscripten;

EMSCRIPTEN_BINDINGS(geometry) {
    class_<Point>("Point")
        .constructor<double, double>()
        .property("x", &Point::getX, &Point::setX)
        .property("y", &Point::getY, &Point::setY)
        .function("distanceTo", &Point::distanceTo)
        .function("add", &Point::add);
    
    class_<Circle>("Circle")
        .constructor<const Point&, double>()
        .function("getArea", &Circle::getArea)
        .function("getCircumference", &Circle::getCircumference)
        .function("contains", &Circle::contains)
        .property("center", &Circle::getCenter)
        .property("radius", &Circle::getRadius);
    
    class_<Polygon>("Polygon")
        .constructor<>()
        .function("addPoint", &Polygon::addPoint)
        .function("getPerimeter", &Polygon::getPerimeter)
        .function("getPointCount", &Polygon::getPointCount)
        .function("getPoint", &Polygon::getPoint);
}

编译 C++ 模块：

em++ geometry.cpp -o geometry.js \
  --bind \
  -O3 \
  -s ALLOW_MEMORY_GROWTH=1 \
  -s MODULARIZE=1 \
  -s EXPORT_NAME="'GeometryModule'"

JavaScript 使用：

GeometryModule().then(function(Module) {
    // 创建点对象
    const p1 = new Module.Point(0, 0);
    const p2 = new Module.Point(3, 4);
    
    console.log('Distance:', p1.distanceTo(p2)); // 5
    
    // 创建圆
    const center = new Module.Point(0, 0);
    const circle = new Module.Circle(center, 5);
    
    console.log('Circle area:', circle.getArea());
    console.log('Circle circumference:', circle.getCircumference());
    console.log('Contains p2:', circle.contains(p2));
    
    // 创建多边形
    const polygon = new Module.Polygon();
    polygon.addPoint(new Module.Point(0, 0));
    polygon.addPoint(new Module.Point(1, 0));
    polygon.addPoint(new Module.Point(1, 1));
    polygon.addPoint(new Module.Point(0, 1));
    
    console.log('Polygon perimeter:', polygon.getPerimeter()); // 4
    console.log('Point count:', polygon.getPointCount()); // 4
    
    // 清理内存
    p1.delete();
    p2.delete();
    center.delete();
    circle.delete();
    polygon.delete();
});

8.3 内存管理

8.3.1 内存分配和释放

C 内存管理：

#include <stdlib.h>
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
void* allocate_buffer(size_t size) {
    return malloc(size);
}

EMSCRIPTEN_KEEPALIVE
void free_buffer(void* ptr) {
    free(ptr);
}

EMSCRIPTEN_KEEPALIVE
void fill_buffer(int* buffer, int size, int value) {
    for (int i = 0; i < size; i++) {
        buffer[i] = value * i;
    }
}

EMSCRIPTEN_KEEPALIVE
int sum_buffer(int* buffer, int size) {
    int sum = 0;
    for (int i = 0; i < size; i++) {
        sum += buffer[i];
    }
    return sum;
}

JavaScript 内存管理：

Module.onRuntimeInitialized = function() {
    const allocateBuffer = Module.cwrap('allocate_buffer', 'number', ['number']);
    const freeBuffer = Module.cwrap('free_buffer', null, ['number']);
    const fillBuffer = Module.cwrap('fill_buffer', null, ['number', 'number', 'number']);
    const sumBuffer = Module.cwrap('sum_buffer', 'number', ['number', 'number']);
    
    // 分配内存
    const size = 1000;
    const bytesPerInt = 4;
    const bufferPtr = allocateBuffer(size * bytesPerInt);
    
    if (bufferPtr === 0) {
        console.error('Memory allocation failed');
        return;
    }
    
    try {
        // 创建 TypedArray 视图
        const buffer = new Int32Array(Module.HEAP32.buffer, bufferPtr, size);
        
        // 填充数据
        fillBuffer(bufferPtr, size, 10);
        
        // 验证数据
        console.log('First 10 elements:', Array.from(buffer.slice(0, 10)));
        
        // 计算总和
        const total = sumBuffer(bufferPtr, size);
        console.log('Sum:', total);
        
        // JavaScript 端操作
        for (let i = 0; i < Math.min(size, 10); i++) {
            buffer[i] *= 2; // 直接修改内存
        }
        
        console.log('Modified first 10:', Array.from(buffer.slice(0, 10)));
        
    } finally {
        // 释放内存
        freeBuffer(bufferPtr);
    }
};

8.3.2 内存布局和优化

内存配置选项：

# 设置初始内存大小
emcc code.c -s INITIAL_MEMORY=134217728 -o output.js  # 128MB

# 允许内存增长
emcc code.c -s ALLOW_MEMORY_GROWTH=1 -o output.js

# 设置最大内存
emcc code.c -s MAXIMUM_MEMORY=268435456 -o output.js  # 256MB

# 使用 64KB 页面
emcc code.c -s WASM_MEM_MAX=65536 -o output.js

内存对齐和优化：

#include <stdalign.h>
#include <emmintrin.h>  // SSE2 intrinsics

// 内存对齐的结构体
typedef struct {
    alignas(16) float data[4];  // 16字节对齐
    int count;
    char padding[12];  // 手动填充到32字节
} AlignedVector;

EMSCRIPTEN_KEEPALIVE
void process_aligned_vectors(AlignedVector* vectors, int count) {
    for (int i = 0; i < count; i++) {
        // 使用 SIMD 指令优化
        __m128 vec = _mm_load_ps(vectors[i].data);
        vec = _mm_mul_ps(vec, _mm_set1_ps(2.0f));
        _mm_store_ps(vectors[i].data, vec);
    }
}

// 缓存友好的数据访问
EMSCRIPTEN_KEEPALIVE
void cache_friendly_sum(float* matrix, int rows, int cols, float* result) {
    for (int i = 0; i < rows; i++) {
        float sum = 0.0f;
        for (int j = 0; j < cols; j++) {
            sum += matrix[i * cols + j];  // 行优先访问
        }
        result[i] = sum;
    }
}

8.3.3 垃圾回收和资源管理

RAII 风格的资源管理：

#include <memory>
#include <emscripten/bind.h>

class ResourceManager {
public:
    ResourceManager(size_t size) : size_(size) {
        data_ = std::make_unique<float[]>(size);
        std::fill(data_.get(), data_.get() + size, 0.0f);
    }
    
    ~ResourceManager() {
        // std::unique_ptr 自动清理
    }
    
    void setData(size_t index, float value) {
        if (index < size_) {
            data_[index] = value;
        }
    }
    
    float getData(size_t index) const {
        return (index < size_) ? data_[index] : 0.0f;
    }
    
    size_t getSize() const { return size_; }
    
    // 批量操作
    void transform(float multiplier) {
        for (size_t i = 0; i < size_; i++) {
            data_[i] *= multiplier;
        }
    }
    
    float sum() const {
        float total = 0.0f;
        for (size_t i = 0; i < size_; i++) {
            total += data_[i];
        }
        return total;
    }
    
private:
    std::unique_ptr<float[]> data_;
    size_t size_;
};

EMSCRIPTEN_BINDINGS(resource_manager) {
    class_<ResourceManager>("ResourceManager")
        .constructor<size_t>()
        .function("setData", &ResourceManager::setData)
        .function("getData", &ResourceManager::getData)
        .function("getSize", &ResourceManager::getSize)
        .function("transform", &ResourceManager::transform)
        .function("sum", &ResourceManager::sum);
}

8.4 性能优化

8.4.1 编译器优化

优化等级对比：

# 测试文件：performance_test.c
cat > performance_test.c << 'EOF'
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
double matrix_multiply(double* a, double* b, double* c, int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < n; j++) {
            double sum = 0.0;
            for (int k = 0; k < n; k++) {
                sum += a[i * n + k] * b[k * n + j];
            }
            c[i * n + j] = sum;
        }
    }
    return c[0];
}
EOF

# 不同优化等级编译
emcc performance_test.c -O0 -o test_O0.js  # 无优化
emcc performance_test.c -O1 -o test_O1.js  # 基础优化
emcc performance_test.c -O2 -o test_O2.js  # 标准优化
emcc performance_test.c -O3 -o test_O3.js  # 激进优化
emcc performance_test.c -Os -o test_Os.js  # 体积优化
emcc performance_test.c -Oz -o test_Oz.js  # 极致体积优化

高级优化选项：

# 链接时优化 (LTO)
emcc code.c -O3 -flto -o output.js

# 启用所有优化
emcc code.c -O3 -flto \
  -s AGGRESSIVE_VARIABLE_ELIMINATION=1 \
  -s ELIMINATE_DUPLICATE_FUNCTIONS=1 \
  -s SINGLE_FILE=1 \
  -o output.js

# 数学优化
emcc code.c -O3 -ffast-math -o output.js

# 循环优化
emcc code.c -O3 -funroll-loops -fvectorize -o output.js

8.4.2 代码级优化

循环优化示例：

#include <emscripten.h>

// 原始版本
EMSCRIPTEN_KEEPALIVE
void naive_sum(float* array, int size, float* result) {
    *result = 0.0f;
    for (int i = 0; i < size; i++) {
        *result += array[i];
    }
}

// 循环展开优化
EMSCRIPTEN_KEEPALIVE
void unrolled_sum(float* array, int size, float* result) {
    float sum = 0.0f;
    int i = 0;
    
    // 4路展开
    for (; i < size - 3; i += 4) {
        sum += array[i] + array[i+1] + array[i+2] + array[i+3];
    }
    
    // 处理剩余元素
    for (; i < size; i++) {
        sum += array[i];
    }
    
    *result = sum;
}

// 分块优化
EMSCRIPTEN_KEEPALIVE
void blocked_matrix_multiply(float* a, float* b, float* c, int n) {
    const int block_size = 64;
    
    for (int ii = 0; ii < n; ii += block_size) {
        for (int jj = 0; jj < n; jj += block_size) {
            for (int kk = 0; kk < n; kk += block_size) {
                
                int i_end = (ii + block_size < n) ? ii + block_size : n;
                int j_end = (jj + block_size < n) ? jj + block_size : n;
                int k_end = (kk + block_size < n) ? kk + block_size : n;
                
                for (int i = ii; i < i_end; i++) {
                    for (int j = jj; j < j_end; j++) {
                        float sum = 0.0f;
                        for (int k = kk; k < k_end; k++) {
                            sum += a[i * n + k] * b[k * n + j];
                        }
                        c[i * n + j] += sum;
                    }
                }
            }
        }
    }
}

SIMD 优化：

#include <wasm_simd128.h>
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
void simd_vector_add(float* a, float* b, float* result, int length) {
    int simd_length = length & ~3;  // 处理4的倍数
    
    for (int i = 0; i < simd_length; i += 4) {
        v128_t va = wasm_v128_load(&a[i]);
        v128_t vb = wasm_v128_load(&b[i]);
        v128_t vr = wasm_f32x4_add(va, vb);
        wasm_v128_store(&result[i], vr);
    }
    
    // 处理剩余元素
    for (int i = simd_length; i < length; i++) {
        result[i] = a[i] + b[i];
    }
}

EMSCRIPTEN_KEEPALIVE
float simd_dot_product(float* a, float* b, int length) {
    v128_t sum_vec = wasm_f32x4_splat(0.0f);
    int simd_length = length & ~3;
    
    for (int i = 0; i < simd_length; i += 4) {
        v128_t va = wasm_v128_load(&a[i]);
        v128_t vb = wasm_v128_load(&b[i]);
        v128_t prod = wasm_f32x4_mul(va, vb);
        sum_vec = wasm_f32x4_add(sum_vec, prod);
    }
    
    // 提取并累加四个分量
    float result = wasm_f32x4_extract_lane(sum_vec, 0) +
                   wasm_f32x4_extract_lane(sum_vec, 1) +
                   wasm_f32x4_extract_lane(sum_vec, 2) +
                   wasm_f32x4_extract_lane(sum_vec, 3);
    
    // 处理剩余元素
    for (int i = simd_length; i < length; i++) {
        result += a[i] * b[i];
    }
    
    return result;
}

编译 SIMD 代码：

emcc simd_code.c -o simd_output.js \
  -msimd128 \
  -O3 \
  -s EXPORTED_FUNCTIONS='["_simd_vector_add","_simd_dot_product"]'

8.5 文件系统和 I/O

8.5.1 虚拟文件系统

预加载文件：

# 创建测试文件
echo "Hello from file!" > data.txt
mkdir assets
echo "Asset content" > assets/config.json

# 预加载文件到虚拟文件系统
emcc file_io.c -o file_io.js \
  --preload-file data.txt \
  --preload-file assets

C 文件操作：

#include <stdio.h>
#include <stdlib.h>
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
char* read_file(const char* filename) {
    FILE* file = fopen(filename, "r");
    if (!file) {
        return NULL;
    }
    
    // 获取文件大小
    fseek(file, 0, SEEK_END);
    long size = ftell(file);
    fseek(file, 0, SEEK_SET);
    
    // 分配内存并读取
    char* content = malloc(size + 1);
    fread(content, 1, size, file);
    content[size] = '\0';
    
    fclose(file);
    return content;
}

EMSCRIPTEN_KEEPALIVE
int write_file(const char* filename, const char* content) {
    FILE* file = fopen(filename, "w");
    if (!file) {
        return 0;
    }
    
    fprintf(file, "%s", content);
    fclose(file);
    return 1;
}

EMSCRIPTEN_KEEPALIVE
void free_string(char* str) {
    free(str);
}

int main() {
    // 读取预加载的文件
    char* content = read_file("data.txt");
    if (content) {
        printf("File content: %s\n", content);
        free_string(content);
    }
    
    // 写入新文件
    write_file("output.txt", "Hello from WebAssembly!");
    
    return 0;
}

8.5.2 异步文件操作

JavaScript 文件操作接口：

Module.onRuntimeInitialized = function() {
    const readFile = Module.cwrap('read_file', 'string', ['string']);
    const writeFile = Module.cwrap('write_file', 'number', ['string', 'string']);
    const freeString = Module.cwrap('free_string', null, ['number']);
    
    // 文件操作包装器
    const FileSystem = {
        read: function(filename) {
            try {
                return readFile(filename);
            } catch (e) {
                console.error('Failed to read file:', filename, e);
                return null;
            }
        },
        
        write: function(filename, content) {
            try {
                return writeFile(filename, content) === 1;
            } catch (e) {
                console.error('Failed to write file:', filename, e);
                return false;
            }
        },
        
        exists: function(filename) {
            try {
                const stat = Module.FS.stat(filename);
                return stat !== null;
            } catch (e) {
                return false;
            }
        },
        
        list: function(path = '/') {
            try {
                return Module.FS.readdir(path);
            } catch (e) {
                console.error('Failed to list directory:', path, e);
                return [];
            }
        },
        
        // 从 JavaScript 创建文件
        createFromJS: function(filename, content) {
            try {
                if (typeof content === 'string') {
                    Module.FS.writeFile(filename, content);
                } else {
                    Module.FS.writeFile(filename, new Uint8Array(content));
                }
                return true;
            } catch (e) {
                console.error('Failed to create file from JS:', filename, e);
                return false;
            }
        }
    };
    
    // 使用示例
    console.log('Reading preloaded file:');
    const content = FileSystem.read('data.txt');
    console.log(content);
    
    console.log('\nCreating new file from JavaScript:');
    FileSystem.createFromJS('js_created.txt', 'Created from JavaScript!');
    
    console.log('\nReading JS-created file:');
    const jsContent = FileSystem.read('js_created.txt');
    console.log(jsContent);
    
    console.log('\nListing files:');
    console.log(FileSystem.list('/'));
    
    // 全局暴露文件系统接口
    window.WasmFileSystem = FileSystem;
};

8.6 调试和分析

8.6.1 调试配置

调试版本编译：

# 生成调试信息
emcc code.c -g -O0 -o debug.js \
  -s ASSERTIONS=1 \
  -s SAFE_HEAP=1 \
  -s STACK_OVERFLOW_CHECK=1 \
  -s DEMANGLE_SUPPORT=1

# 生成源码映射
emcc code.c -g -gsource-map -o debug.js \
  --source-map-base ./

运行时调试辅助：

#include <emscripten.h>
#include <emscripten/console.h>

EMSCRIPTEN_KEEPALIVE
void debug_function(int* array, int size) {
    emscripten_console_log("Debug: Starting function");
    emscripten_console_logf("Debug: Array size = %d", size);
    
    for (int i = 0; i < size; i++) {
        if (array[i] < 0) {
            emscripten_console_error("Error: Negative value found!");
            emscripten_debugger();  // 触发调试器断点
        }
        array[i] *= 2;
    }
    
    emscripten_console_log("Debug: Function completed");
}

8.6.2 性能分析

性能分析编译：

# 启用性能分析
emcc code.c -O2 -o profile.js \
  --profiling \
  -s PROFILE=1

# 内存分析
emcc code.c -O2 -o memory_profile.js \
  -s SAFE_HEAP=1 \
  -s STACK_OVERFLOW_CHECK=2

基准测试框架：

#include <emscripten.h>
#include <time.h>
#include <stdlib.h>

typedef struct {
    const char* name;
    void (*function)(void);
    double elapsed_ms;
} Benchmark;

static double get_time_ms() {
    return emscripten_get_now();
}

EMSCRIPTEN_KEEPALIVE
void run_benchmark(Benchmark* bench, int iterations) {
    double start_time = get_time_ms();
    
    for (int i = 0; i < iterations; i++) {
        bench->function();
    }
    
    double end_time = get_time_ms();
    bench->elapsed_ms = (end_time - start_time) / iterations;
}

// 测试函数示例
void test_malloc_free() {
    void* ptr = malloc(1024);
    free(ptr);
}

void test_math_operations() {
    volatile double result = 0.0;
    for (int i = 0; i < 1000; i++) {
        result += sqrt(i) * sin(i);
    }
}

static Benchmark benchmarks[] = {
    {"malloc_free", test_malloc_free, 0.0},
    {"math_operations", test_math_operations, 0.0}
};

EMSCRIPTEN_KEEPALIVE
void run_all_benchmarks() {
    int num_benchmarks = sizeof(benchmarks) / sizeof(Benchmark);
    
    for (int i = 0; i < num_benchmarks; i++) {
        run_benchmark(&benchmarks[i], 1000);
        emscripten_console_logf("Benchmark %s: %.3f ms", 
                               benchmarks[i].name, 
                               benchmarks[i].elapsed_ms);
    }
}

8.7 实际应用案例

8.7.1 图像处理库

图像处理核心 (image_processing.c):

#include <emscripten.h>
#include <math.h>
#include <stdlib.h>

typedef struct {
    int width;
    int height;
    unsigned char* data;  // RGBA format
} Image;

EMSCRIPTEN_KEEPALIVE
Image* create_image(int width, int height) {
    Image* img = malloc(sizeof(Image));
    img->width = width;
    img->height = height;
    img->data = malloc(width * height * 4);  // RGBA
    return img;
}

EMSCRIPTEN_KEEPALIVE
void destroy_image(Image* img) {
    if (img) {
        free(img->data);
        free(img);
    }
}

EMSCRIPTEN_KEEPALIVE
void apply_blur(Image* img, float radius) {
    int width = img->width;
    int height = img->height;
    unsigned char* src = img->data;
    unsigned char* dst = malloc(width * height * 4);
    
    int kernel_size = (int)(radius * 2) + 1;
    float sigma = radius / 3.0f;
    float* kernel = malloc(kernel_size * sizeof(float));
    
    // 生成高斯核
    float sum = 0.0f;
    for (int i = 0; i < kernel_size; i++) {
        int x = i - kernel_size / 2;
        kernel[i] = expf(-(x * x) / (2 * sigma * sigma));
        sum += kernel[i];
    }
    
    // 归一化核
    for (int i = 0; i < kernel_size; i++) {
        kernel[i] /= sum;
    }
    
    // 水平模糊
    for (int y = 0; y < height; y++) {
        for (int x = 0; x < width; x++) {
            float r = 0, g = 0, b = 0;
            
            for (int k = 0; k < kernel_size; k++) {
                int sx = x + k - kernel_size / 2;
                sx = (sx < 0) ? 0 : (sx >= width) ? width - 1 : sx;
                
                int src_idx = (y * width + sx) * 4;
                float weight = kernel[k];
                
                r += src[src_idx] * weight;
                g += src[src_idx + 1] * weight;
                b += src[src_idx + 2] * weight;
            }
            
            int dst_idx = (y * width + x) * 4;
            dst[dst_idx] = (unsigned char)r;
            dst[dst_idx + 1] = (unsigned char)g;
            dst[dst_idx + 2] = (unsigned char)b;
            dst[dst_idx + 3] = src[dst_idx + 3];  // Alpha 不变
        }
    }
    
    // 垂直模糊
    for (int y = 0; y < height; y++) {
        for (int x = 0; x < width; x++) {
            float r = 0, g = 0, b = 0;
            
            for (int k = 0; k < kernel_size; k++) {
                int sy = y + k - kernel_size / 2;
                sy = (sy < 0) ? 0 : (sy >= height) ? height - 1 : sy;
                
                int src_idx = (sy * width + x) * 4;
                float weight = kernel[k];
                
                r += dst[src_idx] * weight;
                g += dst[src_idx + 1] * weight;
                b += dst[src_idx + 2] * weight;
            }
            
            int final_idx = (y * width + x) * 4;
            src[final_idx] = (unsigned char)r;
            src[final_idx + 1] = (unsigned char)g;
            src[final_idx + 2] = (unsigned char)b;
        }
    }
    
    free(dst);
    free(kernel);
}

EMSCRIPTEN_KEEPALIVE
void adjust_brightness(Image* img, float factor) {
    int total_pixels = img->width * img->height;
    
    for (int i = 0; i < total_pixels * 4; i += 4) {
        img->data[i] = (unsigned char)(img->data[i] * factor);     // R
        img->data[i + 1] = (unsigned char)(img->data[i + 1] * factor); // G
        img->data[i + 2] = (unsigned char)(img->data[i + 2] * factor); // B
        // Alpha 保持不变
    }
}

EMSCRIPTEN_KEEPALIVE
unsigned char* get_image_data(Image* img) {
    return img->data;
}

EMSCRIPTEN_KEEPALIVE
int get_image_width(Image* img) {
    return img->width;
}

EMSCRIPTEN_KEEPALIVE
int get_image_height(Image* img) {
    return img->height;
}

JavaScript 图像处理接口：

class WasmImageProcessor {
    constructor(module) {
        this.Module = module;
        this.createImage = module.cwrap('create_image', 'number', ['number', 'number']);
        this.destroyImage = module.cwrap('destroy_image', null, ['number']);
        this.applyBlur = module.cwrap('apply_blur', null, ['number', 'number']);
        this.adjustBrightness = module.cwrap('adjust_brightness', null, ['number', 'number']);
        this.getImageData = module.cwrap('get_image_data', 'number', ['number']);
        this.getImageWidth = module.cwrap('get_image_width', 'number', ['number']);
        this.getImageHeight = module.cwrap('get_image_height', 'number', ['number']);
    }
    
    processCanvas(canvas, operations) {
        const ctx = canvas.getContext('2d');
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        
        // 创建 WASM 图像
        const wasmImage = this.createImage(canvas.width, canvas.height);
        const dataPtr = this.getImageData(wasmImage);
        
        // 复制数据到 WASM 内存
        const wasmImageData = new Uint8Array(
            this.Module.HEAPU8.buffer, 
            dataPtr, 
            canvas.width * canvas.height * 4
        );
        wasmImageData.set(imageData.data);
        
        // 应用处理操作
        operations.forEach(op => {
            switch(op.type) {
                case 'blur':
                    this.applyBlur(wasmImage, op.radius || 2);
                    break;
                case 'brightness':
                    this.adjustBrightness(wasmImage, op.factor || 1.2);
                    break;
            }
        });
        
        // 复制处理后的数据回 Canvas
        imageData.data.set(wasmImageData);
        ctx.putImageData(imageData, 0, 0);
        
        // 清理内存
        this.destroyImage(wasmImage);
    }
}

// 使用示例
Module.onRuntimeInitialized = function() {
    const processor = new WasmImageProcessor(Module);
    
    // 获取 canvas 元素
    const canvas = document.getElementById('imageCanvas');
    
    // 处理图像
    processor.processCanvas(canvas, [
        { type: 'blur', radius: 3 },
        { type: 'brightness', factor: 1.3 }
    ]);
    
    window.imageProcessor = processor;
};

8.8 最佳实践

8.8.1 代码组织

模块化设计：

// math_utils.h
#ifndef MATH_UTILS_H
#define MATH_UTILS_H

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE double fast_sqrt(double x);
EMSCRIPTEN_KEEPALIVE double fast_sin(double x);
EMSCRIPTEN_KEEPALIVE double fast_cos(double x);

#endif

// math_utils.c
#include "math_utils.h"
#include <math.h>

EMSCRIPTEN_KEEPALIVE
double fast_sqrt(double x) {
    // 牛顿法快速平方根
    if (x <= 0) return 0;
    
    double guess = x / 2.0;
    for (int i = 0; i < 10; i++) {
        guess = (guess + x / guess) / 2.0;
    }
    return guess;
}

// 更多实现...

构建脚本：

#!/bin/bash
# build.sh

set -e

echo "Building WebAssembly modules..."

# 编译选项
EMCC_OPTS="-O3 -flto -s MODULARIZE=1 -s EXPORT_NAME='WasmModule'"
EMCC_OPTS="$EMCC_OPTS -s ALLOW_MEMORY_GROWTH=1"
EMCC_OPTS="$EMCC_OPTS -s EXPORTED_RUNTIME_METHODS='[\"ccall\",\"cwrap\"]'"

# 编译数学库
emcc src/math_utils.c -o dist/math_utils.js $EMCC_OPTS \
  -s EXPORTED_FUNCTIONS='["_fast_sqrt","_fast_sin","_fast_cos"]'

# 编译图像处理库
emcc src/image_processing.c -o dist/image_processing.js $EMCC_OPTS \
  -s EXPORTED_FUNCTIONS='["_create_image","_destroy_image","_apply_blur"]'

echo "Build completed successfully!"

8.8.2 错误处理

健壮的错误处理：

#include <emscripten.h>
#include <errno.h>
#include <string.h>

typedef enum {
    WASM_SUCCESS = 0,
    WASM_ERROR_NULL_POINTER = 1,
    WASM_ERROR_INVALID_SIZE = 2,
    WASM_ERROR_MEMORY_ALLOCATION = 3,
    WASM_ERROR_INVALID_ARGUMENT = 4
} WasmErrorCode;

EMSCRIPTEN_KEEPALIVE
const char* get_error_message(WasmErrorCode code) {
    switch (code) {
        case WASM_SUCCESS: return "Success";
        case WASM_ERROR_NULL_POINTER: return "Null pointer error";
        case WASM_ERROR_INVALID_SIZE: return "Invalid size";
        case WASM_ERROR_MEMORY_ALLOCATION: return "Memory allocation failed";
        case WASM_ERROR_INVALID_ARGUMENT: return "Invalid argument";
        default: return "Unknown error";
    }
}

EMSCRIPTEN_KEEPALIVE
WasmErrorCode safe_array_process(float* input, float* output, int size) {
    if (!input || !output) {
        return WASM_ERROR_NULL_POINTER;
    }
    
    if (size <= 0 || size > 1000000) {
        return WASM_ERROR_INVALID_SIZE;
    }
    
    for (int i = 0; i < size; i++) {
        if (isnan(input[i]) || isinf(input[i])) {
            return WASM_ERROR_INVALID_ARGUMENT;
        }
        output[i] = input[i] * 2.0f;
    }
    
    return WASM_SUCCESS;
}

本章小结

通过本章学习，你已经掌握了：

1. Emscripten 工具链：从安装配置到基本使用
2. 编译流程：C/C++ 代码到 WebAssembly 的完整转换
3. 内存管理：高效的内存分配、使用和释放策略
4. 性能优化：编译器优化、代码级优化和 SIMD 加速
5. 文件系统：虚拟文件系统的使用和文件操作
6. 调试分析：调试技巧和性能分析方法
7. 实际应用：图像处理等复杂应用的实现

🎯 重点技能：

• ✅ 熟练使用 Emscripten 编译 C/C++ 代码
• ✅ 掌握内存管理和性能优化技巧
• ✅ 理解 WebAssembly 与 JavaScript 的交互机制
• ✅ 能够构建复杂的 WebAssembly 应用

📚 下一步：第8章 练习题

第8章 练习题

8.1 Emscripten 基础练习

练习 8.1.1 环境配置验证 (10分)

题目: 验证 Emscripten 环境配置，并编译一个简单的 C 程序。

任务:

1. 安装并配置 Emscripten SDK
2. 编写一个 C 程序输出当前时间戳
3. 分别编译为 HTML、JS 和 WASM 格式
4. 验证编译结果的文件大小差异

#!/bin/bash
# verify_emscripten.sh

echo "验证 Emscripten 环境..."

# 检查版本
echo "Emscripten 版本:"
emcc --version

echo -e "\nClang 版本:"
emcc --version | head -1

echo -e "\nNode.js 版本:"
node --version

echo -e "\nPython 版本:"
python3 --version

# 测试基本编译
echo -e "\n编译测试程序..."
echo 'int main() { return 42; }' > test.c
emcc test.c -o test.html
if [ -f "test.html" ]; then
    echo "✅ 基本编译测试成功"
    rm test.c test.html test.js test.wasm
else
    echo "❌ 基本编译测试失败"
fi

#include <stdio.h>
#include <time.h>
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
double get_current_timestamp() {
    return emscripten_get_now();
}

EMSCRIPTEN_KEEPALIVE
void print_current_time() {
    time_t rawtime;
    struct tm* timeinfo;
    
    time(&rawtime);
    timeinfo = localtime(&rawtime);
    
    printf("当前时间: %s", asctime(timeinfo));
    printf("时间戳: %.3f ms\n", emscripten_get_now());
}

int main() {
    printf("C 程序启动\n");
    print_current_time();
    return 0;
}

#!/bin/bash
# build_timestamp.sh

echo "编译时间戳程序为不同格式..."

# 编译为 HTML 格式
echo "编译为 HTML..."
emcc timestamp.c -o timestamp.html \
  -s EXPORTED_FUNCTIONS='["_get_current_timestamp","_print_current_time"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'

# 编译为 JS 格式
echo "编译为 JS..."
emcc timestamp.c -o timestamp.js \
  -s EXPORTED_FUNCTIONS='["_get_current_timestamp","_print_current_time"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'

# 编译为纯 WASM
echo "编译为纯 WASM..."
emcc timestamp.c -o timestamp.wasm --no-entry \
  -s EXPORTED_FUNCTIONS='["_get_current_timestamp","_print_current_time"]' \
  -s STANDALONE_WASM

# 显示文件大小
echo -e "\n文件大小对比:"
ls -lh timestamp.html timestamp.js timestamp.wasm | awk '{print $5 "\t" $9}'

// test_timestamp.js
Module.onRuntimeInitialized = function() {
    console.log('WebAssembly 模块已加载');
    
    // 包装函数
    const getCurrentTimestamp = Module.cwrap('get_current_timestamp', 'number', []);
    const printCurrentTime = Module.cwrap('print_current_time', null, []);
    
    // 测试函数调用
    console.log('JavaScript 获取的时间戳:', Date.now());
    console.log('WASM 获取的时间戳:', getCurrentTimestamp());
    
    printCurrentTime();
    
    // 性能对比
    const iterations = 10000;
    
    // JavaScript 时间戳
    console.time('JS timestamp');
    for (let i = 0; i < iterations; i++) {
        Date.now();
    }
    console.timeEnd('JS timestamp');
    
    // WASM 时间戳
    console.time('WASM timestamp');
    for (let i = 0; i < iterations; i++) {
        getCurrentTimestamp();
    }
    console.timeEnd('WASM timestamp');
};

练习 8.1.2 编译选项实验 (15分)

题目: 测试不同编译选项对程序性能和大小的影响。

任务:

1. 编写一个包含循环计算的 C 程序
2. 使用不同优化等级编译
3. 比较文件大小和执行性能
4. 分析优化效果

#include <emscripten.h>
#include <math.h>

EMSCRIPTEN_KEEPALIVE
double compute_pi(int iterations) {
    double pi = 0.0;
    for (int i = 0; i < iterations; i++) {
        double term = 1.0 / (2 * i + 1);
        if (i % 2 == 0) {
            pi += term;
        } else {
            pi -= term;
        }
    }
    return pi * 4.0;
}

EMSCRIPTEN_KEEPALIVE
double complex_calculation(int n) {
    double result = 0.0;
    for (int i = 1; i <= n; i++) {
        result += sqrt(i) * sin(i) * cos(i) / log(i + 1);
    }
    return result;
}

EMSCRIPTEN_KEEPALIVE
void matrix_multiply(double* a, double* b, double* c, int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < n; j++) {
            double sum = 0.0;
            for (int k = 0; k < n; k++) {
                sum += a[i * n + k] * b[k * n + j];
            }
            c[i * n + j] = sum;
        }
    }
}

int main() {
    printf("优化测试程序\n");
    return 0;
}

#!/bin/bash
# test_optimization.sh

echo "测试不同优化等级的效果..."

# 定义编译选项
declare -a OPT_LEVELS=("-O0" "-O1" "-O2" "-O3" "-Os" "-Oz")
declare -a OPT_NAMES=("无优化" "基础优化" "标准优化" "激进优化" "体积优化" "极致体积优化")

# 导出函数列表
EXPORTS='-s EXPORTED_FUNCTIONS=["_compute_pi","_complex_calculation","_matrix_multiply"]'
RUNTIME='-s EXPORTED_RUNTIME_METHODS=["ccall","cwrap"]'

echo "编译选项\t文件大小\t编译时间"
echo "----------------------------------------"

for i in "${!OPT_LEVELS[@]}"; do
    opt="${OPT_LEVELS[$i]}"
    name="${OPT_NAMES[$i]}"
    
    echo -n "${name} (${opt})\t"
    
    # 计时编译
    start_time=$(date +%s.%N)
    emcc optimization_test.c $opt -o "test_${opt//-/}.js" $EXPORTS $RUNTIME 2>/dev/null
    end_time=$(date +%s.%N)
    
    compile_time=$(echo "$end_time - $start_time" | bc)
    file_size=$(ls -lh "test_${opt//-/}.js" | awk '{print $5}')
    
    echo -e "${file_size}\t\t${compile_time}s"
done

echo -e "\n详细文件信息:"
ls -lh test_*.js | awk '{print $5 "\t" $9}'

<!DOCTYPE html>
<html>
<head>
    <title>优化等级性能测试</title>
</head>
<body>
    <h1>优化等级性能测试</h1>
    <div id="results"></div>
    
    <script>
    const results = document.getElementById('results');
    
    async function testOptimization(filename, optName) {
        return new Promise((resolve) => {
            const script = document.createElement('script');
            script.src = filename;
            script.onload = () => {
                Module.onRuntimeInitialized = () => {
                    const computePi = Module.cwrap('compute_pi', 'number', ['number']);
                    const complexCalc = Module.cwrap('complex_calculation', 'number', ['number']);
                    
                    // 性能测试
                    const iterations = 1000000;
                    
                    // 测试 Pi 计算
                    const start1 = performance.now();
                    const pi = computePi(iterations);
                    const end1 = performance.now();
                    
                    // 测试复杂计算
                    const start2 = performance.now();
                    const complex = complexCalc(10000);
                    const end2 = performance.now();
                    
                    resolve({
                        name: optName,
                        piTime: end1 - start1,
                        complexTime: end2 - start2,
                        piResult: pi,
                        complexResult: complex
                    });
                };
            };
            document.head.appendChild(script);
        });
    }
    
    async function runAllTests() {
        const tests = [
            { file: 'test_O0.js', name: '无优化 (-O0)' },
            { file: 'test_O1.js', name: '基础优化 (-O1)' },
            { file: 'test_O2.js', name: '标准优化 (-O2)' },
            { file: 'test_O3.js', name: '激进优化 (-O3)' },
            { file: 'test_Os.js', name: '体积优化 (-Os)' },
            { file: 'test_Oz.js', name: '极致体积优化 (-Oz)' }
        ];
        
        results.innerHTML = '<h2>测试进行中...</h2>';
        
        const testResults = [];
        for (const test of tests) {
            try {
                const result = await testOptimization(test.file, test.name);
                testResults.push(result);
                console.log(`完成测试: ${test.name}`);
            } catch (e) {
                console.error(`测试失败: ${test.name}`, e);
            }
        }
        
        // 显示结果
        let html = '<h2>性能测试结果</h2><table border="1"><tr><th>优化等级</th><th>Pi计算时间(ms)</th><th>复杂计算时间(ms)</th><th>Pi值</th></tr>';
        
        testResults.forEach(result => {
            html += `<tr>
                <td>${result.name}</td>
                <td>${result.piTime.toFixed(2)}</td>
                <td>${result.complexTime.toFixed(2)}</td>
                <td>${result.piResult.toFixed(6)}</td>
            </tr>`;
        });
        
        html += '</table>';
        results.innerHTML = html;
    }
    
    // 页面加载后开始测试
    // runAllTests();
    </script>
</body>
</html>

8.2 内存管理练习

练习 8.2.1 动态内存分配 (15分)

题目: 实现一个动态数组库，支持增长、缩减和内存管理。

任务:

1. 实现动态数组的 C 结构和函数
2. 提供 JavaScript 接口
3. 处理内存分配失败的情况
4. 实现内存使用统计

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <emscripten.h>

typedef struct {
    int* data;
    size_t size;
    size_t capacity;
    size_t total_allocated;
} DynamicArray;

// 全局内存统计
static size_t global_memory_used = 0;
static size_t global_allocations = 0;
static size_t global_deallocations = 0;

EMSCRIPTEN_KEEPALIVE
DynamicArray* create_array(size_t initial_capacity) {
    DynamicArray* arr = malloc(sizeof(DynamicArray));
    if (!arr) return NULL;
    
    arr->data = malloc(initial_capacity * sizeof(int));
    if (!arr->data) {
        free(arr);
        return NULL;
    }
    
    arr->size = 0;
    arr->capacity = initial_capacity;
    arr->total_allocated = initial_capacity * sizeof(int);
    
    global_memory_used += sizeof(DynamicArray) + arr->total_allocated;
    global_allocations++;
    
    return arr;
}

EMSCRIPTEN_KEEPALIVE
void destroy_array(DynamicArray* arr) {
    if (arr) {
        global_memory_used -= sizeof(DynamicArray) + arr->total_allocated;
        global_deallocations++;
        
        free(arr->data);
        free(arr);
    }
}

static int resize_array(DynamicArray* arr, size_t new_capacity) {
    if (new_capacity == 0) new_capacity = 1;
    
    int* new_data = realloc(arr->data, new_capacity * sizeof(int));
    if (!new_data) return 0; // 分配失败
    
    // 更新内存统计
    size_t old_size = arr->total_allocated;
    size_t new_size = new_capacity * sizeof(int);
    global_memory_used = global_memory_used - old_size + new_size;
    
    arr->data = new_data;
    arr->capacity = new_capacity;
    arr->total_allocated = new_size;
    
    if (arr->size > new_capacity) {
        arr->size = new_capacity;
    }
    
    return 1; // 成功
}

EMSCRIPTEN_KEEPALIVE
int push_back(DynamicArray* arr, int value) {
    if (!arr) return 0;
    
    if (arr->size >= arr->capacity) {
        size_t new_capacity = arr->capacity * 2;
        if (!resize_array(arr, new_capacity)) {
            return 0; // 扩容失败
        }
    }
    
    arr->data[arr->size++] = value;
    return 1;
}

EMSCRIPTEN_KEEPALIVE
int pop_back(DynamicArray* arr) {
    if (!arr || arr->size == 0) return 0;
    
    arr->size--;
    
    // 如果使用率低于25%，缩减容量
    if (arr->size > 0 && arr->size <= arr->capacity / 4) {
        resize_array(arr, arr->capacity / 2);
    }
    
    return 1;
}

EMSCRIPTEN_KEEPALIVE
int get_element(DynamicArray* arr, size_t index) {
    if (!arr || index >= arr->size) return -1;
    return arr->data[index];
}

EMSCRIPTEN_KEEPALIVE
int set_element(DynamicArray* arr, size_t index, int value) {
    if (!arr || index >= arr->size) return 0;
    arr->data[index] = value;
    return 1;
}

EMSCRIPTEN_KEEPALIVE
size_t get_size(DynamicArray* arr) {
    return arr ? arr->size : 0;
}

EMSCRIPTEN_KEEPALIVE
size_t get_capacity(DynamicArray* arr) {
    return arr ? arr->capacity : 0;
}

EMSCRIPTEN_KEEPALIVE
void shrink_to_fit(DynamicArray* arr) {
    if (arr && arr->size < arr->capacity) {
        resize_array(arr, arr->size);
    }
}

EMSCRIPTEN_KEEPALIVE
void clear_array(DynamicArray* arr) {
    if (arr) {
        arr->size = 0;
        // 可选：重置为初始容量
        resize_array(arr, 1);
    }
}

// 内存统计函数
EMSCRIPTEN_KEEPALIVE
size_t get_global_memory_used() {
    return global_memory_used;
}

EMSCRIPTEN_KEEPALIVE
size_t get_global_allocations() {
    return global_allocations;
}

EMSCRIPTEN_KEEPALIVE
size_t get_global_deallocations() {
    return global_deallocations;
}

EMSCRIPTEN_KEEPALIVE
void print_memory_stats() {
    printf("内存统计:\n");
    printf("  当前使用: %zu 字节\n", global_memory_used);
    printf("  总分配次数: %zu\n", global_allocations);
    printf("  总释放次数: %zu\n", global_deallocations);
    printf("  未释放对象: %zu\n", global_allocations - global_deallocations);
}

// 批量操作
EMSCRIPTEN_KEEPALIVE
void fill_array(DynamicArray* arr, int value, size_t count) {
    if (!arr) return;
    
    // 确保有足够空间
    while (arr->capacity < count) {
        if (!resize_array(arr, arr->capacity * 2)) {
            return; // 扩容失败
        }
    }
    
    for (size_t i = 0; i < count; i++) {
        arr->data[i] = value;
    }
    arr->size = count;
}

EMSCRIPTEN_KEEPALIVE
int* get_data_pointer(DynamicArray* arr) {
    return arr ? arr->data : NULL;
}

emcc dynamic_array.c -o dynamic_array.js \
  -s EXPORTED_FUNCTIONS='["_create_array","_destroy_array","_push_back","_pop_back","_get_element","_set_element","_get_size","_get_capacity","_shrink_to_fit","_clear_array","_get_global_memory_used","_get_global_allocations","_get_global_deallocations","_print_memory_stats","_fill_array","_get_data_pointer"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]' \
  -s ALLOW_MEMORY_GROWTH=1 \
  -O2

class WasmDynamicArray {
    constructor(module, initialCapacity = 10) {
        this.Module = module;
        this.ptr = module.ccall('create_array', 'number', ['number'], [initialCapacity]);
        
        if (this.ptr === 0) {
            throw new Error('Failed to allocate dynamic array');
        }
        
        // 包装函数
        this.pushBack = module.cwrap('push_back', 'number', ['number', 'number']);
        this.popBack = module.cwrap('pop_back', 'number', ['number']);
        this.getElement = module.cwrap('get_element', 'number', ['number', 'number']);
        this.setElement = module.cwrap('set_element', 'number', ['number', 'number', 'number']);
        this.getSize = module.cwrap('get_size', 'number', ['number']);
        this.getCapacity = module.cwrap('get_capacity', 'number', ['number']);
        this.shrinkToFit = module.cwrap('shrink_to_fit', null, ['number']);
        this.clear = module.cwrap('clear_array', null, ['number']);
        this.fillArray = module.cwrap('fill_array', null, ['number', 'number', 'number']);
        this.getDataPointer = module.cwrap('get_data_pointer', 'number', ['number']);
    }
    
    destructor() {
        if (this.ptr) {
            this.Module.ccall('destroy_array', null, ['number'], [this.ptr]);
            this.ptr = 0;
        }
    }
    
    push(value) {
        const result = this.pushBack(this.ptr, value);
        if (!result) {
            throw new Error('Failed to push element - memory allocation failed');
        }
        return this;
    }
    
    pop() {
        const result = this.popBack(this.ptr);
        if (!result) {
            throw new Error('Cannot pop from empty array');
        }
        return this;
    }
    
    get(index) {
        const result = this.getElement(this.ptr, index);
        if (result === -1) {
            throw new Error('Index out of bounds');
        }
        return result;
    }
    
    set(index, value) {
        const result = this.setElement(this.ptr, index, value);
        if (!result) {
            throw new Error('Index out of bounds');
        }
        return this;
    }
    
    get size() {
        return this.getSize(this.ptr);
    }
    
    get capacity() {
        return this.getCapacity(this.ptr);
    }
    
    shrink() {
        this.shrinkToFit(this.ptr);
        return this;
    }
    
    fill(value, count) {
        this.fillArray(this.ptr, value, count);
        return this;
    }
    
    toArray() {
        const size = this.size;
        const result = [];
        for (let i = 0; i < size; i++) {
            result.push(this.get(i));
        }
        return result;
    }
    
    // 直接访问底层内存（高性能操作）
    getDirectAccess() {
        const dataPtr = this.getDataPointer(this.ptr);
        const size = this.size;
        return new Int32Array(this.Module.HEAP32.buffer, dataPtr, size);
    }
    
    static getMemoryStats(module) {
        return {
            used: module.ccall('get_global_memory_used', 'number', []),
            allocations: module.ccall('get_global_allocations', 'number', []),
            deallocations: module.ccall('get_global_deallocations', 'number', [])
        };
    }
    
    static printMemoryStats(module) {
        module.ccall('print_memory_stats', null, []);
    }
}

// 使用示例和测试
Module.onRuntimeInitialized = function() {
    console.log('动态数组测试开始...');
    
    try {
        // 创建数组
        const arr = new WasmDynamicArray(Module, 5);
        console.log('初始容量:', arr.capacity); // 5
        
        // 添加元素
        for (let i = 0; i < 10; i++) {
            arr.push(i * i);
        }
        console.log('添加10个元素后:');
        console.log('  大小:', arr.size);     // 10
        console.log('  容量:', arr.capacity); // 应该是8或更大
        console.log('  内容:', arr.toArray());
        
        // 内存统计
        console.log('内存统计:', WasmDynamicArray.getMemoryStats(Module));
        
        // 修改元素
        arr.set(5, 999);
        console.log('修改索引5后:', arr.get(5)); // 999
        
        // 弹出元素
        arr.pop().pop().pop();
        console.log('弹出3个元素后大小:', arr.size); // 7
        
        // 收缩内存
        arr.shrink();
        console.log('收缩后容量:', arr.capacity);
        
        // 批量填充
        arr.fill(42, 15);
        console.log('批量填充后:', arr.size, arr.capacity);
        
        // 直接内存访问（高性能）
        const directAccess = arr.getDirectAccess();
        console.log('直接访问前5个元素:', Array.from(directAccess.slice(0, 5)));
        
        // 修改直接访问的数据
        directAccess[0] = 1000;
        console.log('直接修改后第一个元素:', arr.get(0)); // 1000
        
        // 清理
        arr.destructor();
        
        // 最终内存统计
        console.log('最终内存统计:', WasmDynamicArray.getMemoryStats(Module));
        WasmDynamicArray.printMemoryStats(Module);
        
    } catch (error) {
        console.error('测试错误:', error);
    }
    
    // 内存泄漏测试
    console.log('\n内存泄漏测试...');
    const initialStats = WasmDynamicArray.getMemoryStats(Module);
    
    // 创建并销毁多个数组
    for (let i = 0; i < 100; i++) {
        const tempArr = new WasmDynamicArray(Module, 10);
        tempArr.fill(i, 20);
        tempArr.destructor();
    }
    
    const finalStats = WasmDynamicArray.getMemoryStats(Module);
    console.log('内存泄漏测试结果:');
    console.log('  分配次数差:', finalStats.allocations - initialStats.allocations);
    console.log('  释放次数差:', finalStats.deallocations - initialStats.deallocations);
    console.log('  内存使用差:', finalStats.used - initialStats.used);
    
    if (finalStats.allocations === finalStats.deallocations) {
        console.log('✅ 无内存泄漏');
    } else {
        console.log('❌ 检测到内存泄漏');
    }
};

练习 8.2.2 内存池实现 (20分)

题目: 实现一个高效的内存池管理器，减少频繁的 malloc/free 调用。

任务:

1. 设计内存池数据结构
2. 实现固定大小块的分配和释放
3. 支持多种块大小
4. 提供内存使用统计和碎片分析

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdint.h>
#include <emscripten.h>

#define MAX_POOLS 8
#define POOL_BLOCK_COUNT 256

typedef struct Block {
    struct Block* next;
} Block;

typedef struct {
    size_t block_size;
    size_t total_blocks;
    size_t free_blocks;
    Block* free_list;
    void* memory_start;
    size_t total_memory;
} MemoryPool;

typedef struct {
    MemoryPool pools[MAX_POOLS];
    size_t pool_count;
    size_t total_allocated;
    size_t total_free_calls;
    size_t total_alloc_calls;
} PoolManager;

static PoolManager g_manager = {0};

// 内部函数
static MemoryPool* find_suitable_pool(size_t size) {
    for (size_t i = 0; i < g_manager.pool_count; i++) {
        if (g_manager.pools[i].block_size >= size) {
            return &g_manager.pools[i];
        }
    }
    return NULL;
}

static void init_pool(MemoryPool* pool, size_t block_size, size_t block_count) {
    pool->block_size = block_size;
    pool->total_blocks = block_count;
    pool->free_blocks = block_count;
    pool->total_memory = block_size * block_count;
    
    // 分配连续内存
    pool->memory_start = malloc(pool->total_memory);
    if (!pool->memory_start) {
        pool->free_blocks = 0;
        return;
    }
    
    // 初始化空闲链表
    pool->free_list = (Block*)pool->memory_start;
    Block* current = pool->free_list;
    
    for (size_t i = 0; i < block_count - 1; i++) {
        current->next = (Block*)((char*)current + block_size);
        current = current->next;
    }
    current->next = NULL;
}

EMSCRIPTEN_KEEPALIVE
int init_memory_pools() {
    if (g_manager.pool_count > 0) {
        return 1; // 已初始化
    }
    
    // 定义不同大小的内存池
    size_t sizes[] = {16, 32, 64, 128, 256, 512, 1024, 2048};
    
    g_manager.pool_count = sizeof(sizes) / sizeof(sizes[0]);
    
    for (size_t i = 0; i < g_manager.pool_count; i++) {
        init_pool(&g_manager.pools[i], sizes[i], POOL_BLOCK_COUNT);
        if (!g_manager.pools[i].memory_start) {
            // 初始化失败，清理已分配的池
            for (size_t j = 0; j < i; j++) {
                free(g_manager.pools[j].memory_start);
            }
            g_manager.pool_count = 0;
            return 0;
        }
    }
    
    return 1;
}

EMSCRIPTEN_KEEPALIVE
void destroy_memory_pools() {
    for (size_t i = 0; i < g_manager.pool_count; i++) {
        free(g_manager.pools[i].memory_start);
    }
    memset(&g_manager, 0, sizeof(g_manager));
}

EMSCRIPTEN_KEEPALIVE
void* pool_alloc(size_t size) {
    if (g_manager.pool_count == 0) {
        if (!init_memory_pools()) {
            return NULL;
        }
    }
    
    g_manager.total_alloc_calls++;
    
    MemoryPool* pool = find_suitable_pool(size);
    if (!pool || pool->free_blocks == 0) {
        // 回退到标准 malloc
        return malloc(size);
    }
    
    // 从空闲链表中取出一块
    Block* block = pool->free_list;
    pool->free_list = block->next;
    pool->free_blocks--;
    
    g_manager.total_allocated += pool->block_size;
    
    return block;
}

EMSCRIPTEN_KEEPALIVE
void pool_free(void* ptr, size_t size) {
    if (!ptr) return;
    
    g_manager.total_free_calls++;
    
    MemoryPool* pool = find_suitable_pool(size);
    if (!pool) {
        // 回退到标准 free
        free(ptr);
        return;
    }
    
    // 检查指针是否属于这个池
    char* start = (char*)pool->memory_start;
    char* end = start + pool->total_memory;
    char* p = (char*)ptr;
    
    if (p < start || p >= end) {
        // 不属于池，使用标准 free
        free(ptr);
        return;
    }
    
    // 将块添加回空闲链表
    Block* block = (Block*)ptr;
    block->next = pool->free_list;
    pool->free_list = block;
    pool->free_blocks++;
    
    g_manager.total_allocated -= pool->block_size;
}

// 统计函数
EMSCRIPTEN_KEEPALIVE
size_t get_pool_count() {
    return g_manager.pool_count;
}

EMSCRIPTEN_KEEPALIVE
size_t get_pool_block_size(size_t pool_index) {
    if (pool_index >= g_manager.pool_count) return 0;
    return g_manager.pools[pool_index].block_size;
}

EMSCRIPTEN_KEEPALIVE
size_t get_pool_total_blocks(size_t pool_index) {
    if (pool_index >= g_manager.pool_count) return 0;
    return g_manager.pools[pool_index].total_blocks;
}

EMSCRIPTEN_KEEPALIVE
size_t get_pool_free_blocks(size_t pool_index) {
    if (pool_index >= g_manager.pool_count) return 0;
    return g_manager.pools[pool_index].free_blocks;
}

EMSCRIPTEN_KEEPALIVE
size_t get_pool_used_blocks(size_t pool_index) {
    if (pool_index >= g_manager.pool_count) return 0;
    MemoryPool* pool = &g_manager.pools[pool_index];
    return pool->total_blocks - pool->free_blocks;
}

EMSCRIPTEN_KEEPALIVE
double get_pool_utilization(size_t pool_index) {
    if (pool_index >= g_manager.pool_count) return 0.0;
    MemoryPool* pool = &g_manager.pools[pool_index];
    if (pool->total_blocks == 0) return 0.0;
    return (double)(pool->total_blocks - pool->free_blocks) / pool->total_blocks;
}

EMSCRIPTEN_KEEPALIVE
size_t get_total_allocated() {
    return g_manager.total_allocated;
}

EMSCRIPTEN_KEEPALIVE
size_t get_total_alloc_calls() {
    return g_manager.total_alloc_calls;
}

EMSCRIPTEN_KEEPALIVE
size_t get_total_free_calls() {
    return g_manager.total_free_calls;
}

EMSCRIPTEN_KEEPALIVE
void print_pool_stats() {
    printf("\n=== 内存池统计 ===\n");
    printf("池数量: %zu\n", g_manager.pool_count);
    printf("总分配调用: %zu\n", g_manager.total_alloc_calls);
    printf("总释放调用: %zu\n", g_manager.total_free_calls);
    printf("当前已分配: %zu 字节\n", g_manager.total_allocated);
    
    printf("\n各池详情:\n");
    printf("块大小\t总块数\t已用\t空闲\t利用率\n");
    printf("--------------------------------\n");
    
    for (size_t i = 0; i < g_manager.pool_count; i++) {
        MemoryPool* pool = &g_manager.pools[i];
        size_t used = pool->total_blocks - pool->free_blocks;
        double util = (double)used / pool->total_blocks * 100.0;
        
        printf("%zu\t%zu\t%zu\t%zu\t%.1f%%\n",
               pool->block_size, pool->total_blocks, 
               used, pool->free_blocks, util);
    }
}

// 性能测试函数
EMSCRIPTEN_KEEPALIVE
double benchmark_pool_allocation(size_t size, size_t iterations) {
    double start = emscripten_get_now();
    
    void** ptrs = malloc(iterations * sizeof(void*));
    
    // 分配
    for (size_t i = 0; i < iterations; i++) {
        ptrs[i] = pool_alloc(size);
    }
    
    // 释放
    for (size_t i = 0; i < iterations; i++) {
        pool_free(ptrs[i], size);
    }
    
    free(ptrs);
    
    double end = emscripten_get_now();
    return end - start;
}

EMSCRIPTEN_KEEPALIVE
double benchmark_standard_allocation(size_t size, size_t iterations) {
    double start = emscripten_get_now();
    
    void** ptrs = malloc(iterations * sizeof(void*));
    
    // 分配
    for (size_t i = 0; i < iterations; i++) {
        ptrs[i] = malloc(size);
    }
    
    // 释放
    for (size_t i = 0; i < iterations; i++) {
        free(ptrs[i]);
    }
    
    free(ptrs);
    
    double end = emscripten_get_now();
    return end - start;
}

class WasmMemoryPool {
    constructor(module) {
        this.Module = module;
        
        // 初始化内存池
        const initResult = module.ccall('init_memory_pools', 'number', []);
        if (!initResult) {
            throw new Error('Failed to initialize memory pools');
        }
        
        // 包装函数
        this.poolAlloc = module.cwrap('pool_alloc', 'number', ['number']);
        this.poolFree = module.cwrap('pool_free', null, ['number', 'number']);
        this.benchmarkPool = module.cwrap('benchmark_pool_allocation', 'number', ['number', 'number']);
        this.benchmarkStandard = module.cwrap('benchmark_standard_allocation', 'number', ['number', 'number']);
        
        this.allocatedBlocks = new Map(); // 跟踪分配的块
    }
    
    alloc(size) {
        const ptr = this.poolAlloc(size);
        if (ptr === 0) {
            throw new Error(`Failed to allocate ${size} bytes`);
        }
        this.allocatedBlocks.set(ptr, size);
        return ptr;
    }
    
    free(ptr) {
        if (this.allocatedBlocks.has(ptr)) {
            const size = this.allocatedBlocks.get(ptr);
            this.poolFree(ptr, size);
            this.allocatedBlocks.delete(ptr);
        }
    }
    
    getStats() {
        const poolCount = this.Module.ccall('get_pool_count', 'number', []);
        const stats = {
            totalAllocCalls: this.Module.ccall('get_total_alloc_calls', 'number', []),
            totalFreeCalls: this.Module.ccall('get_total_free_calls', 'number', []),
            totalAllocated: this.Module.ccall('get_total_allocated', 'number', []),
            pools: []
        };
        
        for (let i = 0; i < poolCount; i++) {
            stats.pools.push({
                blockSize: this.Module.ccall('get_pool_block_size', 'number', ['number'], [i]),
                totalBlocks: this.Module.ccall('get_pool_total_blocks', 'number', ['number'], [i]),
                freeBlocks: this.Module.ccall('get_pool_free_blocks', 'number', ['number'], [i]),
                usedBlocks: this.Module.ccall('get_pool_used_blocks', 'number', ['number'], [i]),
                utilization: this.Module.ccall('get_pool_utilization', 'number', ['number'], [i])
            });
        }
        
        return stats;
    }
    
    printStats() {
        this.Module.ccall('print_pool_stats', null, []);
    }
    
    benchmark(size, iterations) {
        const poolTime = this.benchmarkPool(size, iterations);
        const standardTime = this.benchmarkStandard(size, iterations);
        
        return {
            poolTime,
            standardTime,
            speedup: standardTime / poolTime,
            iterations,
            size
        };
    }
    
    destroy() {
        // 释放所有未释放的块
        for (const [ptr, size] of this.allocatedBlocks) {
            this.poolFree(ptr, size);
        }
        this.allocatedBlocks.clear();
        
        this.Module.ccall('destroy_memory_pools', null, []);
    }
}

// 测试和演示
Module.onRuntimeInitialized = function() {
    console.log('内存池测试开始...');
    
    try {
        const pool = new WasmMemoryPool(Module);
        
        // 基本分配测试
        console.log('\n=== 基本分配测试 ===');
        const ptrs = [];
        const sizes = [16, 32, 64, 128, 256];
        
        // 分配不同大小的块
        for (let size of sizes) {
            for (let i = 0; i < 10; i++) {
                const ptr = pool.alloc(size);
                ptrs.push(ptr);
            }
        }
        
        console.log('分配50个块后的统计:');
        pool.printStats();
        
        // 释放一半的块
        for (let i = 0; i < ptrs.length / 2; i++) {
            pool.free(ptrs[i]);
        }
        
        console.log('\n释放25个块后的统计:');
        pool.printStats();
        
        // 性能基准测试
        console.log('\n=== 性能基准测试 ===');
        const testSizes = [32, 128, 512];
        const iterations = 10000;
        
        for (let size of testSizes) {
            const result = pool.benchmark(size, iterations);
            console.log(`大小 ${size} 字节, ${iterations} 次迭代:`);
            console.log(`  内存池: ${result.poolTime.toFixed(2)} ms`);
            console.log(`  标准malloc: ${result.standardTime.toFixed(2)} ms`);
            console.log(`  加速比: ${result.speedup.toFixed(2)}x`);
        }
        
        // 碎片分析测试
        console.log('\n=== 碎片分析测试 ===');
        const fragmentationPtrs = [];
        
        // 分配大量小块
        for (let i = 0; i < 100; i++) {
            fragmentationPtrs.push(pool.alloc(32));
        }
        
        // 释放一些块造成碎片
        for (let i = 0; i < fragmentationPtrs.length; i += 3) {
            pool.free(fragmentationPtrs[i]);
        }
        
        console.log('碎片化后的统计:');
        const stats = pool.getStats();
        console.log('32字节池利用率:', (stats.pools[1].utilization * 100).toFixed(1) + '%');
        
        // 清理剩余的块
        for (let i = 1; i < fragmentationPtrs.length; i += 3) {
            if (i < fragmentationPtrs.length) pool.free(fragmentationPtrs[i]);
            if (i + 1 < fragmentationPtrs.length) pool.free(fragmentationPtrs[i + 1]);
        }
        
        // 清理剩余的测试块
        for (let i = Math.floor(ptrs.length / 2); i < ptrs.length; i++) {
            pool.free(ptrs[i]);
        }
        
        console.log('\n=== 最终统计 ===');
        pool.printStats();
        
        // 销毁内存池
        pool.destroy();
        console.log('\n内存池已销毁');
        
    } catch (error) {
        console.error('测试错误:', error);
    }
};

8.3 性能优化练习

练习 8.3.1 SIMD 向量运算 (20分)

题目: 使用 SIMD 指令优化向量运算，并与标量版本进行性能对比。

任务:

1. 实现标量版本的向量运算
2. 实现 SIMD 优化版本
3. 添加性能基准测试
4. 分析不同数据大小下的性能差异

总结

通过这些练习，你已经全面掌握了：

🎯 重点掌握技能：

• ✅ 熟练使用 Emscripten 工具链
• ✅ 高效的内存管理策略
• ✅ 性能优化技巧和基准测试
• ✅ C/C++ 与 JavaScript 的无缝集成
• ✅ 复杂应用的设计和实现

📚 进阶方向：

• 多线程和 WebWorkers 集成
• GPU 计算和 WebGL 互操作
• 大型 C++ 库的移植
• 实时性能分析和调优

下一步: 第9章 从 Rust 编译

第9章 从 Rust 编译

Rust 是编译到 WebAssembly 的最佳语言之一，具有零成本抽象、内存安全、高性能等特点。本章将深入介绍如何使用 Rust 编译到 WebAssembly，包括工具链配置、最佳实践和性能优化。

9.1 Rust WebAssembly 工具链

9.1.1 环境搭建

安装 Rust 工具链：

# 安装 Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source ~/.cargo/env

# 安装 WebAssembly 目标
rustup target add wasm32-unknown-unknown

# 安装 wasm-pack（推荐）
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 或者通过 cargo 安装
cargo install wasm-pack

# 安装其他有用工具
cargo install wasm-bindgen-cli
cargo install wasm-opt

验证安装：

# 检查 Rust 版本
rustc --version
cargo --version

# 检查 WebAssembly 目标
rustup target list | grep wasm32

# 检查 wasm-pack
wasm-pack --version

9.1.2 项目创建和配置

创建新项目：

# 使用 wasm-pack 模板
cargo generate --git https://github.com/rustwasm/wasm-pack-template

# 或手动创建
cargo new --lib my-wasm-project
cd my-wasm-project

Cargo.toml 配置：

[package]
name = "my-wasm-project"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]  # 生成动态库

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"          # JavaScript API 绑定
web-sys = "0.3"         # Web API 绑定

# 可选的实用库
serde = { version = "1.0", features = ["derive"] }
serde-wasm-bindgen = "0.4"
console_error_panic_hook = "0.1"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
  "Document",
  "Element",
  "HtmlElement",
  "Window",
]

# 优化配置
[profile.release]
opt-level = "s"          # 优化体积
lto = true              # 链接时优化
debug = false           # 移除调试信息
panic = "abort"         # panic 时直接终止

# 开发配置
[profile.dev]
opt-level = 0
debug = true

9.1.3 基本项目结构

my-wasm-project/
├── Cargo.toml
├── src/
│   ├── lib.rs          # 主库文件
│   ├── utils.rs        # 工具函数
│   └── math.rs         # 数学计算模块
├── tests/
│   └── web.rs          # 集成测试
├── pkg/                # 生成的 wasm 包（自动生成）
└── www/                # 前端示例（可选）
    ├── index.html
    ├── index.js
    └── package.json

9.2 基础示例

9.2.1 Hello World

src/lib.rs：

use wasm_bindgen::prelude::*;

// 导入 JavaScript 的 alert 函数
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}

// 定义一个宏来简化 console.log
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 导出到 JavaScript 的函数
#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

#[wasm_bindgen]
pub fn say_hello() {
    console_log!("Hello from Rust and WebAssembly!");
}

// 启动函数，在模块加载时自动执行
#[wasm_bindgen(start)]
pub fn main() {
    console_log!("Rust WebAssembly module loaded!");
    
    // 设置 panic hook 以便在浏览器中调试
    #[cfg(feature = "console_error_panic_hook")]
    console_error_panic_hook::set_once();
}

编译和使用：

# 使用 wasm-pack 编译
wasm-pack build --target web

# 生成的文件在 pkg/ 目录下
ls pkg/
# my_wasm_project.js
# my_wasm_project_bg.wasm
# my_wasm_project.d.ts
# package.json

HTML 使用示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rust WebAssembly Demo</title>
</head>
<body>
    <script type="module">
        import init, { greet, say_hello } from './pkg/my_wasm_project.js';
        
        async function run() {
            // 初始化 wasm 模块
            await init();
            
            // 调用 Rust 函数
            say_hello();
            greet('WebAssembly');
        }
        
        run();
    </script>
</body>
</html>

9.2.2 数学计算库

src/math.rs：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct Calculator {
    value: f64,
}

#[wasm_bindgen]
impl Calculator {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Calculator {
        Calculator { value: 0.0 }
    }
    
    #[wasm_bindgen(getter)]
    pub fn value(&self) -> f64 {
        self.value
    }
    
    #[wasm_bindgen(setter)]
    pub fn set_value(&mut self, value: f64) {
        self.value = value;
    }
    
    pub fn add(&mut self, other: f64) -> &mut Self {
        self.value += other;
        self
    }
    
    pub fn subtract(&mut self, other: f64) -> &mut Self {
        self.value -= other;
        self
    }
    
    pub fn multiply(&mut self, other: f64) -> &mut Self {
        self.value *= other;
        self
    }
    
    pub fn divide(&mut self, other: f64) -> Result<&mut Self, String> {
        if other == 0.0 {
            Err("Division by zero".to_string())
        } else {
            self.value /= other;
            Ok(self)
        }
    }
    
    pub fn power(&mut self, exp: f64) -> &mut Self {
        self.value = self.value.powf(exp);
        self
    }
    
    pub fn sqrt(&mut self) -> Result<&mut Self, String> {
        if self.value < 0.0 {
            Err("Square root of negative number".to_string())
        } else {
            self.value = self.value.sqrt();
            Ok(self)
        }
    }
    
    pub fn reset(&mut self) -> &mut Self {
        self.value = 0.0;
        self
    }
}

// 静态函数
#[wasm_bindgen]
pub fn factorial(n: u32) -> u64 {
    if n <= 1 {
        1
    } else {
        (2..=n as u64).product()
    }
}

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            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 gcd(mut a: u32, mut b: u32) -> u32 {
    while b != 0 {
        let temp = b;
        b = a % b;
        a = temp;
    }
    a
}

#[wasm_bindgen]
pub fn lcm(a: u32, b: u32) -> u32 {
    if a == 0 || b == 0 {
        0
    } else {
        (a * b) / gcd(a, b)
    }
}

#[wasm_bindgen]
pub fn prime_check(n: u32) -> bool {
    if n < 2 {
        return false;
    }
    if n == 2 {
        return true;
    }
    if n % 2 == 0 {
        return false;
    }
    
    let sqrt_n = (n as f64).sqrt() as u32;
    for i in (3..=sqrt_n).step_by(2) {
        if n % i == 0 {
            return false;
        }
    }
    true
}
}

lib.rs 中导出模块：

#![allow(unused)]
fn main() {
mod math;
pub use math::*;

mod utils;
pub use utils::*;
}

9.2.3 向量和矩阵运算

src/linear_algebra.rs：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use std::fmt;

#[wasm_bindgen]
pub struct Vector3 {
    x: f64,
    y: f64,
    z: f64,
}

#[wasm_bindgen]
impl Vector3 {
    #[wasm_bindgen(constructor)]
    pub fn new(x: f64, y: f64, z: f64) -> Vector3 {
        Vector3 { x, y, z }
    }
    
    #[wasm_bindgen(getter)]
    pub fn x(&self) -> f64 { self.x }
    
    #[wasm_bindgen(getter)]
    pub fn y(&self) -> f64 { self.y }
    
    #[wasm_bindgen(getter)]
    pub fn z(&self) -> f64 { self.z }
    
    #[wasm_bindgen(setter)]
    pub fn set_x(&mut self, x: f64) { self.x = x; }
    
    #[wasm_bindgen(setter)]
    pub fn set_y(&mut self, y: f64) { self.y = y; }
    
    #[wasm_bindgen(setter)]
    pub fn set_z(&mut self, z: f64) { self.z = z; }
    
    pub fn length(&self) -> f64 {
        (self.x * self.x + self.y * self.y + self.z * self.z).sqrt()
    }
    
    pub fn normalize(&mut self) -> &mut Self {
        let len = self.length();
        if len > 0.0 {
            self.x /= len;
            self.y /= len;
            self.z /= len;
        }
        self
    }
    
    pub fn dot(&self, other: &Vector3) -> f64 {
        self.x * other.x + self.y * other.y + self.z * other.z
    }
    
    pub fn cross(&self, other: &Vector3) -> Vector3 {
        Vector3 {
            x: self.y * other.z - self.z * other.y,
            y: self.z * other.x - self.x * other.z,
            z: self.x * other.y - self.y * other.x,
        }
    }
    
    pub fn add(&self, other: &Vector3) -> Vector3 {
        Vector3 {
            x: self.x + other.x,
            y: self.y + other.y,
            z: self.z + other.z,
        }
    }
    
    pub fn subtract(&self, other: &Vector3) -> Vector3 {
        Vector3 {
            x: self.x - other.x,
            y: self.y - other.y,
            z: self.z - other.z,
        }
    }
    
    pub fn scale(&self, scalar: f64) -> Vector3 {
        Vector3 {
            x: self.x * scalar,
            y: self.y * scalar,
            z: self.z * scalar,
        }
    }
    
    pub fn distance_to(&self, other: &Vector3) -> f64 {
        let dx = self.x - other.x;
        let dy = self.y - other.y;
        let dz = self.z - other.z;
        (dx * dx + dy * dy + dz * dz).sqrt()
    }
    
    #[wasm_bindgen(js_name = toString)]
    pub fn to_string(&self) -> String {
        format!("Vector3({:.3}, {:.3}, {:.3})", self.x, self.y, self.z)
    }
}

#[wasm_bindgen]
pub struct Matrix4x4 {
    elements: [f64; 16], // 列主序存储
}

#[wasm_bindgen]
impl Matrix4x4 {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Matrix4x4 {
        Matrix4x4 {
            elements: [
                1.0, 0.0, 0.0, 0.0,
                0.0, 1.0, 0.0, 0.0,
                0.0, 0.0, 1.0, 0.0,
                0.0, 0.0, 0.0, 1.0,
            ]
        }
    }
    
    pub fn identity() -> Matrix4x4 {
        Matrix4x4::new()
    }
    
    pub fn set(&mut self, row: usize, col: usize, value: f64) -> Result<(), String> {
        if row >= 4 || col >= 4 {
            return Err("Matrix index out of bounds".to_string());
        }
        self.elements[col * 4 + row] = value;
        Ok(())
    }
    
    pub fn get(&self, row: usize, col: usize) -> Result<f64, String> {
        if row >= 4 || col >= 4 {
            return Err("Matrix index out of bounds".to_string());
        }
        Ok(self.elements[col * 4 + row])
    }
    
    pub fn multiply(&self, other: &Matrix4x4) -> Matrix4x4 {
        let mut result = Matrix4x4::new();
        
        for i in 0..4 {
            for j in 0..4 {
                let mut sum = 0.0;
                for k in 0..4 {
                    sum += self.elements[k * 4 + i] * other.elements[j * 4 + k];
                }
                result.elements[j * 4 + i] = sum;
            }
        }
        
        result
    }
    
    pub fn transform_vector(&self, vector: &Vector3) -> Vector3 {
        let x = self.elements[0] * vector.x + self.elements[4] * vector.y + self.elements[8] * vector.z + self.elements[12];
        let y = self.elements[1] * vector.x + self.elements[5] * vector.y + self.elements[9] * vector.z + self.elements[13];
        let z = self.elements[2] * vector.x + self.elements[6] * vector.y + self.elements[10] * vector.z + self.elements[14];
        
        Vector3::new(x, y, z)
    }
    
    pub fn translate(x: f64, y: f64, z: f64) -> Matrix4x4 {
        let mut matrix = Matrix4x4::identity();
        matrix.elements[12] = x;
        matrix.elements[13] = y;
        matrix.elements[14] = z;
        matrix
    }
    
    pub fn scale(x: f64, y: f64, z: f64) -> Matrix4x4 {
        let mut matrix = Matrix4x4::new();
        matrix.elements[0] = x;
        matrix.elements[5] = y;
        matrix.elements[10] = z;
        matrix
    }
    
    pub fn rotate_x(angle_rad: f64) -> Matrix4x4 {
        let cos_a = angle_rad.cos();
        let sin_a = angle_rad.sin();
        
        let mut matrix = Matrix4x4::identity();
        matrix.elements[5] = cos_a;
        matrix.elements[6] = sin_a;
        matrix.elements[9] = -sin_a;
        matrix.elements[10] = cos_a;
        matrix
    }
    
    pub fn rotate_y(angle_rad: f64) -> Matrix4x4 {
        let cos_a = angle_rad.cos();
        let sin_a = angle_rad.sin();
        
        let mut matrix = Matrix4x4::identity();
        matrix.elements[0] = cos_a;
        matrix.elements[2] = -sin_a;
        matrix.elements[8] = sin_a;
        matrix.elements[10] = cos_a;
        matrix
    }
    
    pub fn rotate_z(angle_rad: f64) -> Matrix4x4 {
        let cos_a = angle_rad.cos();
        let sin_a = angle_rad.sin();
        
        let mut matrix = Matrix4x4::identity();
        matrix.elements[0] = cos_a;
        matrix.elements[1] = sin_a;
        matrix.elements[4] = -sin_a;
        matrix.elements[5] = cos_a;
        matrix
    }
    
    pub fn determinant(&self) -> f64 {
        let e = &self.elements;
        
        // 4x4 矩阵行列式计算（使用第一行展开）
        e[0] * (
            e[5] * (e[10] * e[15] - e[11] * e[14]) -
            e[6] * (e[9] * e[15] - e[11] * e[13]) +
            e[7] * (e[9] * e[14] - e[10] * e[13])
        ) - e[4] * (
            e[1] * (e[10] * e[15] - e[11] * e[14]) -
            e[2] * (e[9] * e[15] - e[11] * e[13]) +
            e[3] * (e[9] * e[14] - e[10] * e[13])
        ) + e[8] * (
            e[1] * (e[6] * e[15] - e[7] * e[14]) -
            e[2] * (e[5] * e[15] - e[7] * e[13]) +
            e[3] * (e[5] * e[14] - e[6] * e[13])
        ) - e[12] * (
            e[1] * (e[6] * e[11] - e[7] * e[10]) -
            e[2] * (e[5] * e[11] - e[7] * e[9]) +
            e[3] * (e[5] * e[10] - e[6] * e[9])
        )
    }
    
    pub fn get_elements(&self) -> Vec<f64> {
        self.elements.to_vec()
    }
    
    #[wasm_bindgen(js_name = toString)]
    pub fn to_string(&self) -> String {
        let mut result = String::from("Matrix4x4[\n");
        for row in 0..4 {
            result.push_str("  [");
            for col in 0..4 {
                result.push_str(&format!("{:8.3}", self.elements[col * 4 + row]));
                if col < 3 { result.push_str(", "); }
            }
            result.push_str("]\n");
        }
        result.push(']');
        result
    }
}
}

9.3 JavaScript 互操作

9.3.1 数据类型绑定

复杂数据结构绑定：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use serde::{Deserialize, Serialize};

// 使用 serde 进行序列化
#[derive(Serialize, Deserialize)]
#[wasm_bindgen]
pub struct Person {
    name: String,
    age: u32,
    email: String,
}

#[wasm_bindgen]
impl Person {
    #[wasm_bindgen(constructor)]
    pub fn new(name: String, age: u32, email: String) -> Person {
        Person { name, age, email }
    }
    
    #[wasm_bindgen(getter)]
    pub fn name(&self) -> String {
        self.name.clone()
    }
    
    #[wasm_bindgen(getter)]
    pub fn age(&self) -> u32 {
        self.age
    }
    
    #[wasm_bindgen(getter)]
    pub fn email(&self) -> String {
        self.email.clone()
    }
    
    #[wasm_bindgen(setter)]
    pub fn set_age(&mut self, age: u32) {
        self.age = age;
    }
    
    pub fn greet(&self) -> String {
        format!("Hello, I'm {} and I'm {} years old!", self.name, self.age)
    }
}

// 处理 JavaScript 对象
#[wasm_bindgen]
pub fn process_person_data(value: &JsValue) -> Result<String, JsValue> {
    let person: Person = serde_wasm_bindgen::from_value(value.clone())?;
    Ok(format!("Processed: {}", person.greet()))
}

// 返回复杂数据给 JavaScript
#[wasm_bindgen]
pub fn create_person_list() -> Result<JsValue, JsValue> {
    let people = vec![
        Person::new("Alice".to_string(), 30, "alice@example.com".to_string()),
        Person::new("Bob".to_string(), 25, "bob@example.com".to_string()),
        Person::new("Charlie".to_string(), 35, "charlie@example.com".to_string()),
    ];
    
    serde_wasm_bindgen::to_value(&people).map_err(|err| err.into())
}

// 处理数组
#[wasm_bindgen]
pub fn sum_array(numbers: &[f64]) -> f64 {
    numbers.iter().sum()
}

#[wasm_bindgen]
pub fn sort_array(numbers: &mut [f64]) {
    numbers.sort_by(|a, b| a.partial_cmp(b).unwrap());
}

#[wasm_bindgen]
pub fn filter_positive(numbers: Vec<f64>) -> Vec<f64> {
    numbers.into_iter().filter(|&x| x > 0.0).collect()
}
}

9.3.2 异步操作和 Promise

异步函数绑定：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use web_sys::{Request, RequestInit, RequestMode, Response};

#[wasm_bindgen]
pub async fn fetch_data(url: String) -> Result<JsValue, JsValue> {
    let mut opts = RequestInit::new();
    opts.method("GET");
    opts.mode(RequestMode::Cors);

    let request = Request::new_with_str_and_init(&url, &opts)?;

    let window = web_sys::window().unwrap();
    let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;
    let resp: Response = resp_value.dyn_into().unwrap();

    let text = JsFuture::from(resp.text()?).await?;
    Ok(text)
}

#[wasm_bindgen]
pub async fn delay(ms: u32) -> Result<(), JsValue> {
    let promise = js_sys::Promise::new(&mut |resolve, _| {
        let closure = Closure::once_into_js(move || {
            resolve.call0(&JsValue::NULL).unwrap();
        });
        
        web_sys::window()
            .unwrap()
            .set_timeout_with_callback_and_timeout_and_arguments_0(
                closure.as_ref().unchecked_ref(),
                ms as i32,
            )
            .unwrap();
    });
    
    JsFuture::from(promise).await?;
    Ok(())
}

// 计算密集型异步任务
#[wasm_bindgen]
pub async fn heavy_computation(n: u32) -> Result<u64, JsValue> {
    let mut result = 0u64;
    
    for i in 0..n {
        // 每1000次迭代让出控制权
        if i % 1000 == 0 {
            delay(0).await?;
        }
        
        result = result.wrapping_add(fibonacci(i % 30) as u64);
    }
    
    Ok(result)
}
}

9.3.3 Web API 集成

DOM 操作：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use web_sys::{console, Document, Element, HtmlElement, Window};

#[wasm_bindgen]
pub struct DomHelper {
    document: Document,
    window: Window,
}

#[wasm_bindgen]
impl DomHelper {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Result<DomHelper, JsValue> {
        let window = web_sys::window().ok_or("No global window exists")?;
        let document = window.document().ok_or("Should have a document on window")?;
        
        Ok(DomHelper { document, window })
    }
    
    pub fn create_element(&self, tag_name: &str) -> Result<Element, JsValue> {
        self.document.create_element(tag_name)
    }
    
    pub fn get_element_by_id(&self, id: &str) -> Option<Element> {
        self.document.get_element_by_id(id)
    }
    
    pub fn set_inner_html(&self, element_id: &str, html: &str) -> Result<(), JsValue> {
        if let Some(element) = self.get_element_by_id(element_id) {
            element.set_inner_html(html);
            Ok(())
        } else {
            Err(JsValue::from_str(&format!("Element with id '{}' not found", element_id)))
        }
    }
    
    pub fn append_child(&self, parent_id: &str, child: &Element) -> Result<(), JsValue> {
        if let Some(parent) = self.get_element_by_id(parent_id) {
            parent.append_child(child)?;
            Ok(())
        } else {
            Err(JsValue::from_str(&format!("Parent element with id '{}' not found", parent_id)))
        }
    }
    
    pub fn add_event_listener(&self, element_id: &str, event_type: &str, callback: &Closure<dyn FnMut()>) -> Result<(), JsValue> {
        if let Some(element) = self.get_element_by_id(element_id) {
            let html_element: HtmlElement = element.dyn_into()?;
            html_element.add_event_listener_with_callback(event_type, callback.as_ref().unchecked_ref())?;
            Ok(())
        } else {
            Err(JsValue::from_str(&format!("Element with id '{}' not found", element_id)))
        }
    }
    
    pub fn log(&self, message: &str) {
        console::log_1(&JsValue::from_str(message));
    }
    
    pub fn alert(&self, message: &str) {
        self.window.alert_with_message(message).unwrap();
    }
}

// 实用的 DOM 操作函数
#[wasm_bindgen]
pub fn create_button_with_callback(
    container_id: &str, 
    button_text: &str,
    callback: &js_sys::Function
) -> Result<(), JsValue> {
    let dom = DomHelper::new()?;
    
    // 创建按钮
    let button = dom.create_element("button")?;
    button.set_text_content(Some(button_text));
    
    // 添加事件监听器
    let closure = Closure::wrap(Box::new(move || {
        callback.call0(&JsValue::NULL).unwrap();
    }) as Box<dyn FnMut()>);
    
    let html_button: HtmlElement = button.dyn_into()?;
    html_button.add_event_listener_with_callback("click", closure.as_ref().unchecked_ref())?;
    
    // 将按钮添加到容器
    dom.append_child(container_id, &button)?;
    
    // 防止闭包被释放
    closure.forget();
    
    Ok(())
}
}

9.4 性能优化

9.4.1 编译器优化

Cargo.toml 优化配置：

[profile.release]
# 体积优化
opt-level = "s"     # 或 "z" 极致体积优化
lto = true          # 链接时优化
codegen-units = 1   # 更好的优化，但编译慢
panic = "abort"     # 减少 panic 处理代码
strip = true        # 移除符号表

# 性能优化配置
[profile.performance]
inherits = "release"
opt-level = 3       # 最高性能优化
lto = "fat"         # 全链接时优化

# 特定依赖的优化
[profile.dev.package."*"]
opt-level = 2       # 依赖库使用较高优化级别

wasm-pack 构建选项：

# 体积优化构建
wasm-pack build --target web --release -- --features "optimize-size"

# 性能优化构建
wasm-pack build --target web --release -- --features "optimize-speed"

# 使用 wasm-opt 进一步优化
wasm-pack build --target web --release
wasm-opt -Oz -o pkg/optimized.wasm pkg/my_project_bg.wasm

9.4.2 内存管理优化

自定义分配器：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

// 使用 wee_alloc 作为全局分配器（体积更小）
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

// 内存池示例
#[wasm_bindgen]
pub struct MemoryPool<T> {
    pool: Vec<T>,
    available: Vec<usize>,
    capacity: usize,
}

#[wasm_bindgen]
impl MemoryPool<f64> {
    #[wasm_bindgen(constructor)]
    pub fn new(capacity: usize) -> MemoryPool<f64> {
        let pool = Vec::with_capacity(capacity);
        let available = (0..capacity).collect();
        
        MemoryPool {
            pool,
            available,
            capacity,
        }
    }
    
    pub fn allocate(&mut self, value: f64) -> Option<usize> {
        if let Some(index) = self.available.pop() {
            if index < self.pool.len() {
                self.pool[index] = value;
            } else {
                self.pool.push(value);
            }
            Some(index)
        } else {
            None
        }
    }
    
    pub fn deallocate(&mut self, index: usize) -> Result<(), String> {
        if index >= self.capacity {
            return Err("Index out of bounds".to_string());
        }
        
        self.available.push(index);
        Ok(())
    }
    
    pub fn get(&self, index: usize) -> Result<f64, String> {
        if index >= self.pool.len() {
            return Err("Index out of bounds".to_string());
        }
        Ok(self.pool[index])
    }
    
    pub fn set(&mut self, index: usize, value: f64) -> Result<(), String> {
        if index >= self.pool.len() {
            return Err("Index out of bounds".to_string());
        }
        self.pool[index] = value;
        Ok(())
    }
}

// 零拷贝字符串处理
#[wasm_bindgen]
pub fn process_large_string(input: &str) -> String {
    // 避免不必要的字符串分配
    input.lines()
        .filter(|line| !line.trim().is_empty())
        .map(|line| line.trim())
        .collect::<Vec<_>>()
        .join("\n")
}

// 使用 Vec<u8> 而不是 String 进行字节操作
#[wasm_bindgen]
pub fn process_bytes(mut data: Vec<u8>) -> Vec<u8> {
    // 就地修改，避免额外分配
    for byte in &mut data {
        *byte = byte.wrapping_add(1);
    }
    data
}
}

9.4.3 算法优化

SIMD 并行化：

#![allow(unused)]
fn main() {
use std::arch::wasm32::*;

#[wasm_bindgen]
pub fn simd_add_arrays(a: &[f32], b: &[f32]) -> Vec<f32> {
    let mut result = Vec::with_capacity(a.len());
    let chunks = a.len() / 4;
    
    // SIMD 处理（每次处理4个元素）
    for i in 0..chunks {
        let offset = i * 4;
        
        unsafe {
            let va = v128_load(a.as_ptr().add(offset) as *const v128);
            let vb = v128_load(b.as_ptr().add(offset) as *const v128);
            let vr = f32x4_add(va, vb);
            
            let temp = [0f32; 4];
            v128_store(temp.as_ptr() as *mut v128, vr);
            result.extend_from_slice(&temp);
        }
    }
    
    // 处理剩余元素
    for i in (chunks * 4)..a.len() {
        result.push(a[i] + b[i]);
    }
    
    result
}

#[wasm_bindgen]
pub fn simd_dot_product(a: &[f32], b: &[f32]) -> f32 {
    let mut sum = unsafe { f32x4_splat(0.0) };
    let chunks = a.len() / 4;
    
    for i in 0..chunks {
        let offset = i * 4;
        
        unsafe {
            let va = v128_load(a.as_ptr().add(offset) as *const v128);
            let vb = v128_load(b.as_ptr().add(offset) as *const v128);
            let prod = f32x4_mul(va, vb);
            sum = f32x4_add(sum, prod);
        }
    }
    
    // 提取并累加 SIMD 结果
    let mut result = unsafe {
        f32x4_extract_lane::<0>(sum) +
        f32x4_extract_lane::<1>(sum) +
        f32x4_extract_lane::<2>(sum) +
        f32x4_extract_lane::<3>(sum)
    };
    
    // 处理剩余元素
    for i in (chunks * 4)..a.len() {
        result += a[i] * b[i];
    }
    
    result
}
}

缓存友好的算法：

#![allow(unused)]
fn main() {
#[wasm_bindgen]
pub fn cache_friendly_matrix_multiply(
    a: &[f64], 
    b: &[f64], 
    c: &mut [f64], 
    n: usize,
    block_size: usize
) {
    // 分块矩阵乘法，提高缓存命中率
    for ii in (0..n).step_by(block_size) {
        for jj in (0..n).step_by(block_size) {
            for kk in (0..n).step_by(block_size) {
                
                let i_end = (ii + block_size).min(n);
                let j_end = (jj + block_size).min(n);
                let k_end = (kk + block_size).min(n);
                
                for i in ii..i_end {
                    for j in jj..j_end {
                        let mut sum = 0.0;
                        for k in kk..k_end {
                            sum += a[i * n + k] * b[k * n + j];
                        }
                        c[i * n + j] += sum;
                    }
                }
            }
        }
    }
}

// 预计算和查找表优化
#[wasm_bindgen]
pub struct SinCosTable {
    sin_table: Vec<f32>,
    cos_table: Vec<f32>,
    table_size: usize,
}

#[wasm_bindgen]
impl SinCosTable {
    #[wasm_bindgen(constructor)]
    pub fn new(table_size: usize) -> SinCosTable {
        let mut sin_table = Vec::with_capacity(table_size);
        let mut cos_table = Vec::with_capacity(table_size);
        
        for i in 0..table_size {
            let angle = 2.0 * std::f32::consts::PI * (i as f32) / (table_size as f32);
            sin_table.push(angle.sin());
            cos_table.push(angle.cos());
        }
        
        SinCosTable {
            sin_table,
            cos_table,
            table_size,
        }
    }
    
    pub fn sin(&self, angle: f32) -> f32 {
        let normalized = angle / (2.0 * std::f32::consts::PI);
        let index = ((normalized.fract() * self.table_size as f32) as usize) % self.table_size;
        self.sin_table[index]
    }
    
    pub fn cos(&self, angle: f32) -> f32 {
        let normalized = angle / (2.0 * std::f32::consts::PI);
        let index = ((normalized.fract() * self.table_size as f32) as usize) % self.table_size;
        self.cos_table[index]
    }
}
}

9.5 测试和调试

9.5.1 单元测试

tests/web.rs：

#![allow(unused)]
fn main() {
//! 浏览器环境下的测试

#![cfg(target_arch = "wasm32")]

extern crate wasm_bindgen_test;
use wasm_bindgen_test::*;

use my_wasm_project::*;

wasm_bindgen_test_configure!(run_in_browser);

#[wasm_bindgen_test]
fn test_calculator_basic_operations() {
    let mut calc = Calculator::new();
    
    calc.add(10.0);
    assert_eq!(calc.value(), 10.0);
    
    calc.multiply(2.0);
    assert_eq!(calc.value(), 20.0);
    
    calc.subtract(5.0);
    assert_eq!(calc.value(), 15.0);
    
    calc.divide(3.0).unwrap();
    assert!((calc.value() - 5.0).abs() < f64::EPSILON);
}

#[wasm_bindgen_test]
fn test_division_by_zero() {
    let mut calc = Calculator::new();
    calc.set_value(10.0);
    
    let result = calc.divide(0.0);
    assert!(result.is_err());
    assert_eq!(calc.value(), 10.0); // 值不应该改变
}

#[wasm_bindgen_test]
fn test_vector_operations() {
    let v1 = Vector3::new(1.0, 2.0, 3.0);
    let v2 = Vector3::new(4.0, 5.0, 6.0);
    
    let dot = v1.dot(&v2);
    assert_eq!(dot, 32.0); // 1*4 + 2*5 + 3*6 = 32
    
    let cross = v1.cross(&v2);
    assert_eq!(cross.x(), -3.0);
    assert_eq!(cross.y(), 6.0);
    assert_eq!(cross.z(), -3.0);
    
    let distance = v1.distance_to(&v2);
    assert!((distance - (27.0f64).sqrt()).abs() < f64::EPSILON);
}

#[wasm_bindgen_test]
fn test_matrix_multiplication() {
    let m1 = Matrix4x4::identity();
    let m2 = Matrix4x4::translate(1.0, 2.0, 3.0);
    
    let result = m1.multiply(&m2);
    
    // 单位矩阵乘以平移矩阵应该得到平移矩阵
    assert_eq!(result.get(0, 3).unwrap(), 1.0);
    assert_eq!(result.get(1, 3).unwrap(), 2.0);
    assert_eq!(result.get(2, 3).unwrap(), 3.0);
}

#[wasm_bindgen_test]
async fn test_async_computation() {
    let result = heavy_computation(1000).await.unwrap();
    assert!(result > 0);
}

#[wasm_bindgen_test]
fn test_prime_check() {
    assert!(!prime_check(1));
    assert!(prime_check(2));
    assert!(prime_check(3));
    assert!(!prime_check(4));
    assert!(prime_check(5));
    assert!(!prime_check(9));
    assert!(prime_check(17));
    assert!(!prime_check(25));
}

#[wasm_bindgen_test]
fn test_fibonacci() {
    assert_eq!(fibonacci(0), 0);
    assert_eq!(fibonacci(1), 1);
    assert_eq!(fibonacci(2), 1);
    assert_eq!(fibonacci(3), 2);
    assert_eq!(fibonacci(4), 3);
    assert_eq!(fibonacci(5), 5);
    assert_eq!(fibonacci(10), 55);
}
}

运行测试：

# 安装测试运行器
cargo install wasm-pack

# 运行浏览器测试
wasm-pack test --headless --chrome
wasm-pack test --headless --firefox

# 运行 Node.js 测试
wasm-pack test --node

9.5.2 性能基准测试

benches/benchmark.rs：

#![allow(unused)]
#![cfg(target_arch = "wasm32")]

fn main() {
extern crate wasm_bindgen_test;
use wasm_bindgen_test::*;
use web_sys::console;

use my_wasm_project::*;

wasm_bindgen_test_configure!(run_in_browser);

fn measure_time<F, R>(name: &str, f: F) -> R
where
    F: FnOnce() -> R,
{
    let start = js_sys::Date::now();
    let result = f();
    let end = js_sys::Date::now();
    
    console::log_1(&format!("{}: {:.2}ms", name, end - start).into());
    result
}

#[wasm_bindgen_test]
fn benchmark_fibonacci() {
    measure_time("Fibonacci(30)", || {
        fibonacci(30)
    });
    
    measure_time("Fibonacci(35)", || {
        fibonacci(35)
    });
}

#[wasm_bindgen_test]
fn benchmark_vector_operations() {
    let v1 = Vector3::new(1.0, 2.0, 3.0);
    let v2 = Vector3::new(4.0, 5.0, 6.0);
    
    measure_time("Vector dot product (10000x)", || {
        for _ in 0..10000 {
            v1.dot(&v2);
        }
    });
    
    measure_time("Vector cross product (10000x)", || {
        for _ in 0..10000 {
            v1.cross(&v2);
        }
    });
}

#[wasm_bindgen_test]
fn benchmark_matrix_operations() {
    let m1 = Matrix4x4::identity();
    let m2 = Matrix4x4::translate(1.0, 2.0, 3.0);
    
    measure_time("Matrix multiplication (1000x)", || {
        for _ in 0..1000 {
            m1.multiply(&m2);
        }
    });
}

#[wasm_bindgen_test]
fn benchmark_simd_vs_scalar() {
    let a: Vec<f32> = (0..10000).map(|i| i as f32).collect();
    let b: Vec<f32> = (0..10000).map(|i| (i * 2) as f32).collect();
    
    measure_time("Scalar dot product", || {
        let mut sum = 0.0f32;
        for i in 0..a.len() {
            sum += a[i] * b[i];
        }
        sum
    });
    
    measure_time("SIMD dot product", || {
        simd_dot_product(&a, &b)
    });
}
}

9.5.3 调试技巧

调试配置：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

// 调试宏
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
    
    #[wasm_bindgen(js_namespace = console)]
    fn error(s: &str);
    
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_u32(a: u32);
    
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_f64(a: f64);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

macro_rules! console_error {
    ($($t:tt)*) => (error(&format_args!($($t)*).to_string()))
}

// 条件编译的调试代码
#[wasm_bindgen]
pub fn debug_function(value: f64) -> f64 {
    #[cfg(debug_assertions)]
    {
        console_log!("Debug: input value = {}", value);
    }
    
    let result = value * 2.0;
    
    #[cfg(debug_assertions)]
    {
        console_log!("Debug: result = {}", result);
    }
    
    result
}

// 错误处理和日志记录
#[wasm_bindgen]
pub fn safe_divide(a: f64, b: f64) -> Result<f64, String> {
    if b == 0.0 {
        let error_msg = "Division by zero attempted";
        console_error!("{}", error_msg);
        Err(error_msg.to_string())
    } else {
        let result = a / b;
        console_log!("Division result: {} / {} = {}", a, b, result);
        Ok(result)
    }
}

// 性能监控
#[wasm_bindgen]
pub struct PerformanceMonitor {
    start_time: f64,
    samples: Vec<f64>,
}

#[wasm_bindgen]
impl PerformanceMonitor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> PerformanceMonitor {
        PerformanceMonitor {
            start_time: js_sys::Date::now(),
            samples: Vec::new(),
        }
    }
    
    pub fn start_measurement(&mut self) {
        self.start_time = js_sys::Date::now();
    }
    
    pub fn end_measurement(&mut self) -> f64 {
        let elapsed = js_sys::Date::now() - self.start_time;
        self.samples.push(elapsed);
        console_log!("Measurement: {:.2}ms", elapsed);
        elapsed
    }
    
    pub fn get_average(&self) -> f64 {
        if self.samples.is_empty() {
            0.0
        } else {
            self.samples.iter().sum::<f64>() / self.samples.len() as f64
        }
    }
    
    pub fn get_stats(&self) -> String {
        if self.samples.is_empty() {
            return "No measurements".to_string();
        }
        
        let avg = self.get_average();
        let min = self.samples.iter().cloned().fold(f64::INFINITY, f64::min);
        let max = self.samples.iter().cloned().fold(f64::NEG_INFINITY, f64::max);
        
        format!("Samples: {}, Avg: {:.2}ms, Min: {:.2}ms, Max: {:.2}ms", 
                self.samples.len(), avg, min, max)
    }
}
}

9.6 实际应用案例

9.6.1 游戏引擎核心

src/game_engine.rs：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use std::collections::HashMap;

#[wasm_bindgen]
pub struct GameEngine {
    entities: HashMap<u32, Entity>,
    next_entity_id: u32,
    delta_time: f64,
    last_frame_time: f64,
}

#[wasm_bindgen]
pub struct Entity {
    id: u32,
    position: Vector3,
    velocity: Vector3,
    rotation: Vector3,
    scale: Vector3,
    active: bool,
}

#[wasm_bindgen]
impl Entity {
    #[wasm_bindgen(constructor)]
    pub fn new(id: u32) -> Entity {
        Entity {
            id,
            position: Vector3::new(0.0, 0.0, 0.0),
            velocity: Vector3::new(0.0, 0.0, 0.0),
            rotation: Vector3::new(0.0, 0.0, 0.0),
            scale: Vector3::new(1.0, 1.0, 1.0),
            active: true,
        }
    }
    
    #[wasm_bindgen(getter)]
    pub fn position(&self) -> Vector3 {
        Vector3::new(self.position.x(), self.position.y(), self.position.z())
    }
    
    #[wasm_bindgen(setter)]
    pub fn set_position(&mut self, pos: Vector3) {
        self.position = pos;
    }
    
    pub fn translate(&mut self, delta: &Vector3) {
        self.position = self.position.add(delta);
    }
    
    pub fn update(&mut self, delta_time: f64) {
        if !self.active {
            return;
        }
        
        // 更新位置基于速度
        let scaled_velocity = self.velocity.scale(delta_time);
        self.position = self.position.add(&scaled_velocity);
    }
}

#[wasm_bindgen]
impl GameEngine {
    #[wasm_bindgen(constructor)]
    pub fn new() -> GameEngine {
        GameEngine {
            entities: HashMap::new(),
            next_entity_id: 1,
            delta_time: 0.0,
            last_frame_time: js_sys::Date::now(),
        }
    }
    
    pub fn create_entity(&mut self) -> u32 {
        let id = self.next_entity_id;
        self.next_entity_id += 1;
        
        let entity = Entity::new(id);
        self.entities.insert(id, entity);
        
        id
    }
    
    pub fn remove_entity(&mut self, id: u32) -> bool {
        self.entities.remove(&id).is_some()
    }
    
    pub fn get_entity(&self, id: u32) -> Option<Entity> {
        self.entities.get(&id).cloned()
    }
    
    pub fn update(&mut self) {
        let current_time = js_sys::Date::now();
        self.delta_time = (current_time - self.last_frame_time) / 1000.0;
        self.last_frame_time = current_time;
        
        // 更新所有实体
        for entity in self.entities.values_mut() {
            entity.update(self.delta_time);
        }
    }
    
    pub fn get_delta_time(&self) -> f64 {
        self.delta_time
    }
    
    pub fn get_entity_count(&self) -> u32 {
        self.entities.len() as u32
    }
}

// 物理系统
#[wasm_bindgen]
pub struct PhysicsWorld {
    gravity: Vector3,
    entities: Vec<u32>,
    engine: GameEngine,
}

#[wasm_bindgen]
impl PhysicsWorld {
    #[wasm_bindgen(constructor)]
    pub fn new() -> PhysicsWorld {
        PhysicsWorld {
            gravity: Vector3::new(0.0, -9.81, 0.0),
            entities: Vec::new(),
            engine: GameEngine::new(),
        }
    }
    
    pub fn set_gravity(&mut self, gravity: Vector3) {
        self.gravity = gravity;
    }
    
    pub fn add_entity(&mut self, entity_id: u32) {
        self.entities.push(entity_id);
    }
    
    pub fn simulate_step(&mut self, delta_time: f64) {
        for &entity_id in &self.entities {
            if let Some(mut entity) = self.engine.get_entity(entity_id) {
                // 应用重力
                let gravity_force = self.gravity.scale(delta_time);
                entity.velocity = entity.velocity.add(&gravity_force);
                
                // 更新实体
                entity.update(delta_time);
            }
        }
    }
}
}

9.6.2 图像处理库

src/image_processing.rs：

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct ImageProcessor {
    width: u32,
    height: u32,
    data: Vec<u8>, // RGBA 格式
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: u32, height: u32) -> ImageProcessor {
        let size = (width * height * 4) as usize;
        ImageProcessor {
            width,
            height,
            data: vec![0; size],
        }
    }
    
    pub fn load_from_array(&mut self, data: Vec<u8>) -> Result<(), String> {
        let expected_size = (self.width * self.height * 4) as usize;
        if data.len() != expected_size {
            return Err(format!("Data size mismatch: expected {}, got {}", 
                             expected_size, data.len()));
        }
        self.data = data;
        Ok(())
    }
    
    pub fn get_data(&self) -> Vec<u8> {
        self.data.clone()
    }
    
    pub fn get_pixel(&self, x: u32, y: u32) -> Result<Vec<u8>, String> {
        if x >= self.width || y >= self.height {
            return Err("Pixel coordinates out of bounds".to_string());
        }
        
        let index = ((y * self.width + x) * 4) as usize;
        Ok(vec![
            self.data[index],     // R
            self.data[index + 1], // G
            self.data[index + 2], // B
            self.data[index + 3], // A
        ])
    }
    
    pub fn set_pixel(&mut self, x: u32, y: u32, r: u8, g: u8, b: u8, a: u8) -> Result<(), String> {
        if x >= self.width || y >= self.height {
            return Err("Pixel coordinates out of bounds".to_string());
        }
        
        let index = ((y * self.width + x) * 4) as usize;
        self.data[index] = r;
        self.data[index + 1] = g;
        self.data[index + 2] = b;
        self.data[index + 3] = a;
        
        Ok(())
    }
    
    pub fn apply_grayscale(&mut self) {
        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 保持不变
        }
    }
    
    pub fn adjust_brightness(&mut self, factor: f32) {
        for i in (0..self.data.len()).step_by(4) {
            self.data[i] = ((self.data[i] as f32 * factor).min(255.0).max(0.0)) as u8;
            self.data[i + 1] = ((self.data[i + 1] as f32 * factor).min(255.0).max(0.0)) as u8;
            self.data[i + 2] = ((self.data[i + 2] as f32 * factor).min(255.0).max(0.0)) as u8;
            // Alpha 保持不变
        }
    }
    
    pub fn apply_blur(&mut self, radius: u32) {
        let mut new_data = self.data.clone();
        let radius = radius as i32;
        
        for y in 0..self.height as i32 {
            for x in 0..self.width as i32 {
                let mut r_sum = 0u32;
                let mut g_sum = 0u32;
                let mut b_sum = 0u32;
                let mut count = 0u32;
                
                // 在半径范围内采样
                for dy in -radius..=radius {
                    for dx in -radius..=radius {
                        let nx = x + dx;
                        let ny = y + dy;
                        
                        if nx >= 0 && nx < self.width as i32 && 
                           ny >= 0 && ny < self.height as i32 {
                            let index = ((ny * self.width as i32 + nx) * 4) as usize;
                            r_sum += self.data[index] as u32;
                            g_sum += self.data[index + 1] as u32;
                            b_sum += self.data[index + 2] as u32;
                            count += 1;
                        }
                    }
                }
                
                if count > 0 {
                    let index = ((y * self.width as i32 + x) * 4) as usize;
                    new_data[index] = (r_sum / count) as u8;
                    new_data[index + 1] = (g_sum / count) as u8;
                    new_data[index + 2] = (b_sum / count) as u8;
                    // Alpha 保持不变
                }
            }
        }
        
        self.data = new_data;
    }
    
    pub fn apply_edge_detection(&mut self) {
        let mut new_data = vec![0u8; self.data.len()];
        
        // Sobel 算子
        let sobel_x = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
        let sobel_y = [-1, -2, -1, 0, 0, 0, 1, 2, 1];
        
        for y in 1..(self.height - 1) {
            for x in 1..(self.width - 1) {
                let mut gx = 0.0f32;
                let mut gy = 0.0f32;
                
                for i in 0..9 {
                    let dx = (i % 3) as i32 - 1;
                    let dy = (i / 3) as i32 - 1;
                    let nx = x as i32 + dx;
                    let ny = y as i32 + dy;
                    
                    let index = ((ny * self.width as i32 + nx) * 4) as usize;
                    let gray = (self.data[index] as f32 * 0.299 + 
                               self.data[index + 1] as f32 * 0.587 + 
                               self.data[index + 2] as f32 * 0.114);
                    
                    gx += gray * sobel_x[i] as f32;
                    gy += gray * sobel_y[i] as f32;
                }
                
                let magnitude = (gx * gx + gy * gy).sqrt().min(255.0) as u8;
                let index = ((y * self.width + x) * 4) as usize;
                
                new_data[index] = magnitude;
                new_data[index + 1] = magnitude;
                new_data[index + 2] = magnitude;
                new_data[index + 3] = self.data[index + 3]; // 保持 Alpha
            }
        }
        
        self.data = new_data;
    }
    
    #[wasm_bindgen(getter)]
    pub fn width(&self) -> u32 { self.width }
    
    #[wasm_bindgen(getter)]
    pub fn height(&self) -> u32 { self.height }
}

// 滤镜效果
#[wasm_bindgen]
pub fn apply_sepia_filter(data: &mut [u8]) {
    for i in (0..data.len()).step_by(4) {
        let r = data[i] as f32;
        let g = data[i + 1] as f32;
        let b = data[i + 2] as f32;
        
        let tr = (0.393 * r + 0.769 * g + 0.189 * b).min(255.0);
        let tg = (0.349 * r + 0.686 * g + 0.168 * b).min(255.0);
        let tb = (0.272 * r + 0.534 * g + 0.131 * b).min(255.0);
        
        data[i] = tr as u8;
        data[i + 1] = tg as u8;
        data[i + 2] = tb as u8;
    }
}

#[wasm_bindgen]
pub fn apply_invert_filter(data: &mut [u8]) {
    for i in (0..data.len()).step_by(4) {
        data[i] = 255 - data[i];       // R
        data[i + 1] = 255 - data[i + 1]; // G
        data[i + 2] = 255 - data[i + 2]; // B
        // Alpha 保持不变
    }
}
}

本章小结

通过本章学习，你已经掌握了：

1. Rust WebAssembly 工具链：环境搭建、项目配置和构建流程
2. 基础编程：函数导出、数据类型绑定和错误处理
3. JavaScript 互操作：复杂数据交换、异步操作和 Web API 集成
4. 性能优化：编译器优化、内存管理和算法优化
5. 测试调试：单元测试、性能基准和调试技巧
6. 实际应用：游戏引擎和图像处理等复杂应用

🎯 重点技能：

• ✅ 熟练使用 Rust 编译到 WebAssembly
• ✅ 掌握 wasm-bindgen 和相关工具链
• ✅ 理解 Rust 的内存安全优势
• ✅ 能够构建高性能的 WebAssembly 应用
• ✅ 掌握与 JavaScript 的无缝集成

📚 下一步：第9章 练习题

第9章 练习题

9.1 Rust 环境搭建练习

练习 9.1.1 工具链配置验证 (10分)

题目: 验证 Rust WebAssembly 开发环境是否正确配置，创建一个简单的诊断工具。

要求：

• 检查 wasm-pack 版本
• 验证 wasm32-unknown-unknown 目标是否安装
• 创建并编译一个最小的 Rust WASM 项目
• 输出详细的环境信息

#!/bin/bash

echo "🔍 Rust WebAssembly 环境诊断"
echo "================================"

# 检查 Rust 版本
echo "📦 Rust 版本:"
if command -v rustc &> /dev/null; then
    rustc --version
    cargo --version
else
    echo "❌ Rust 未安装"
    exit 1
fi

echo ""

# 检查 wasm-pack
echo "🎯 wasm-pack 版本:"
if command -v wasm-pack &> /dev/null; then
    wasm-pack --version
else
    echo "❌ wasm-pack 未安装"
    echo "💡 安装命令: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh"
fi

echo ""

# 检查 wasm32 目标
echo "🎯 WebAssembly 目标:"
if rustup target list --installed | grep -q "wasm32-unknown-unknown"; then
    echo "✅ wasm32-unknown-unknown 已安装"
else
    echo "❌ wasm32-unknown-unknown 未安装"
    echo "💡 安装命令: rustup target add wasm32-unknown-unknown"
fi

echo ""

# 检查关键工具
echo "🛠️ 相关工具:"
tools=("wasm-bindgen" "wasm-opt" "wasmtime")
for tool in "${tools[@]}"; do
    if command -v "$tool" &> /dev/null; then
        echo "✅ $tool: $($tool --version | head -n1)"
    else
        echo "⚠️ $tool: 未安装"
    fi
done

echo ""
echo "🧪 创建测试项目..."

# 创建临时测试项目
TEST_DIR="/tmp/rust_wasm_test_$$"
mkdir -p "$TEST_DIR"
cd "$TEST_DIR"

# 初始化 Cargo 项目
cargo init --lib --name rust_wasm_test

# 创建 Cargo.toml
cat > Cargo.toml << 'EOF'
[package]
name = "rust-wasm-test"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
]
EOF

# 创建测试代码
cat > src/lib.rs << 'EOF'
use wasm_bindgen::prelude::*;

// 导入 console.log
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// 定义一个宏方便调用 console.log
macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 导出一个简单的函数
#[wasm_bindgen]
pub fn greet(name: &str) {
    console_log!("Hello, {}! From Rust and WebAssembly!", name);
}

// 导出一个数学函数
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

// 导出环境信息
#[wasm_bindgen]
pub fn get_info() -> String {
    format!("Rust WebAssembly module compiled successfully!")
}
EOF

# 尝试编译
echo "🏗️ 编译测试..."
if wasm-pack build --target web --out-dir pkg; then
    echo "✅ 编译成功！"
    echo "📂 生成的文件："
    ls -la pkg/
else
    echo "❌ 编译失败"
fi

# 清理
cd /
rm -rf "$TEST_DIR"

echo ""
echo "🎉 环境诊断完成"

# 1. 检查 Rust 安装
rustc --version
cargo --version

# 2. 检查 WebAssembly 目标
rustup target list --installed | grep wasm32

# 3. 检查 wasm-pack
wasm-pack --version

# 4. 创建最小项目进行测试
cargo new --lib hello-wasm
cd hello-wasm

# 编辑 Cargo.toml 添加 WebAssembly 配置
# 编辑 src/lib.rs 添加基本导出函数
# 运行编译测试
wasm-pack build

🔍 Rust WebAssembly 环境诊断
================================
📦 Rust 版本:
rustc 1.75.0 (82e1608df 2023-12-21)
cargo 1.75.0 (1d8b05cdd 2023-11-20)

🎯 wasm-pack 版本:
wasm-pack 0.12.1

🎯 WebAssembly 目标:
✅ wasm32-unknown-unknown 已安装

🛠️ 相关工具:
✅ wasm-bindgen: wasm-bindgen 0.2.89
✅ wasm-opt: wasm-opt version 114
✅ wasmtime: wasmtime-cli 15.0.1

✅ 编译成功！
🎉 环境诊断完成

练习 9.1.2 项目模板创建 (15分)

题目: 创建一个可复用的 Rust WebAssembly 项目模板，包含：

• 标准的项目结构
• 预配置的构建脚本
• 基础的 HTML/JS 测试页面
• 开发服务器配置

rust-wasm-template/
├── Cargo.toml
├── src/
│   └── lib.rs
├── www/
│   ├── index.html
│   ├── index.js
│   └── bootstrap.js
├── pkg/          # 生成的 WASM 文件
├── scripts/
│   ├── build.sh
│   ├── dev.sh
│   └── test.sh
├── .gitignore
└── README.md

[package]
name = "rust-wasm-template"
version = "0.1.0"
edition = "2021"
authors = ["Your Name <your.email@example.com>"]
description = "A template for Rust WebAssembly projects"
license = "MIT OR Apache-2.0"
repository = "https://github.com/yourusername/rust-wasm-template"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
console_error_panic_hook = "0.1"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
  "Document",
  "Element",
  "HtmlElement",
  "Window",
]

# 优化配置
[profile.release]
# 减小生成的 wasm 文件大小
opt-level = "s"
debug = false
lto = true

[profile.release.package."*"]
opt-level = "s"

use wasm_bindgen::prelude::*;

// 导入 console.log
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// 设置 panic hook，在浏览器控制台显示 panic 信息
#[wasm_bindgen(start)]
pub fn main() {
    console_error_panic_hook::set_once();
}

// 方便的控制台日志宏
macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 导出问候函数
#[wasm_bindgen]
pub fn greet(name: &str) {
    console_log!("Hello, {}! 来自 Rust 和 WebAssembly!", name);
}

// 数学运算示例
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// 字符串处理示例
#[wasm_bindgen]
pub fn reverse_string(input: &str) -> String {
    input.chars().rev().collect()
}

// 内存操作示例
#[wasm_bindgen]
pub fn sum_array(numbers: &[i32]) -> i32 {
    numbers.iter().sum()
}

// 错误处理示例
#[wasm_bindgen]
pub fn safe_divide(a: f64, b: f64) -> Result<f64, JsValue> {
    if b == 0.0 {
        Err(JsValue::from_str("除零错误"))
    } else {
        Ok(a / b)
    }
}

// 复杂对象示例
#[wasm_bindgen]
pub struct Calculator {
    value: f64,
}

#[wasm_bindgen]
impl Calculator {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Calculator {
        Calculator { value: 0.0 }
    }

    #[wasm_bindgen(getter)]
    pub fn value(&self) -> f64 {
        self.value
    }

    #[wasm_bindgen]
    pub fn add(&mut self, x: f64) {
        self.value += x;
    }

    #[wasm_bindgen]
    pub fn multiply(&mut self, x: f64) {
        self.value *= x;
    }

    #[wasm_bindgen]
    pub fn reset(&mut self) {
        self.value = 0.0;
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rust WebAssembly Template</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin: 10px 0;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        input, output {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        output {
            background: #e9ecef;
            display: inline-block;
            min-width: 100px;
        }
    </style>
</head>
<body>
    <h1>🦀 Rust WebAssembly Template</h1>
    
    <div class="container">
        <h2>基础函数测试</h2>
        <button id="greet-button">问候</button>
        <span id="greet-output"></span>
    </div>

    <div class="container">
        <h2>斐波那契数列</h2>
        <input type="number" id="fib-input" value="10" min="0" max="40">
        <button id="fib-button">计算</button>
        <output id="fib-output"></output>
    </div>

    <div class="container">
        <h2>字符串反转</h2>
        <input type="text" id="reverse-input" value="Hello WebAssembly">
        <button id="reverse-button">反转</button>
        <output id="reverse-output"></output>
    </div>

    <div class="container">
        <h2>数组求和</h2>
        <input type="text" id="array-input" value="1,2,3,4,5" placeholder="用逗号分隔的数字">
        <button id="sum-button">求和</button>
        <output id="sum-output"></output>
    </div>

    <div class="container">
        <h2>计算器</h2>
        <div>
            <input type="number" id="calc-input" value="10" step="0.1">
            <button id="calc-add">+</button>
            <button id="calc-multiply">×</button>
            <button id="calc-reset">重置</button>
        </div>
        <div>当前值: <output id="calc-output">0</output></div>
    </div>

    <script src="./bootstrap.js"></script>
</body>
</html>

// bootstrap.js - 动态导入 WASM 模块
import("./index.js")
  .then(module => {
    console.log("✅ WebAssembly 模块加载成功");
  })
  .catch(e => {
    console.error("❌ 加载 WebAssembly 模块失败:", e);
  });

import init, { 
  greet, 
  fibonacci, 
  reverse_string, 
  sum_array, 
  safe_divide,
  Calculator 
} from '../pkg/rust_wasm_template.js';

async function run() {
  // 初始化 wasm 模块
  await init();

  console.log("🚀 WebAssembly 模块初始化完成");

  // 创建计算器实例
  const calculator = new Calculator();

  // 问候功能
  document.getElementById('greet-button').addEventListener('click', () => {
    greet('WebAssembly 开发者');
    document.getElementById('greet-output').textContent = '检查控制台输出';
  });

  // 斐波那契数列
  document.getElementById('fib-button').addEventListener('click', () => {
    const input = document.getElementById('fib-input');
    const output = document.getElementById('fib-output');
    const n = parseInt(input.value);
    
    if (n >= 0 && n <= 40) {
      const start = performance.now();
      const result = fibonacci(n);
      const end = performance.now();
      output.textContent = `F(${n}) = ${result} (${(end - start).toFixed(2)}ms)`;
    } else {
      output.textContent = '请输入 0-40 之间的数字';
    }
  });

  // 字符串反转
  document.getElementById('reverse-button').addEventListener('click', () => {
    const input = document.getElementById('reverse-input');
    const output = document.getElementById('reverse-output');
    const result = reverse_string(input.value);
    output.textContent = result;
  });

  // 数组求和
  document.getElementById('sum-button').addEventListener('click', () => {
    const input = document.getElementById('array-input');
    const output = document.getElementById('sum-output');
    
    try {
      const numbers = input.value
        .split(',')
        .map(s => parseInt(s.trim()))
        .filter(n => !isNaN(n));
      
      const result = sum_array(new Int32Array(numbers));
      output.textContent = `总和: ${result}`;
    } catch (e) {
      output.textContent = '输入格式错误';
    }
  });

  // 计算器功能
  function updateCalcDisplay() {
    document.getElementById('calc-output').textContent = calculator.value.toFixed(2);
  }

  document.getElementById('calc-add').addEventListener('click', () => {
    const input = document.getElementById('calc-input');
    calculator.add(parseFloat(input.value));
    updateCalcDisplay();
  });

  document.getElementById('calc-multiply').addEventListener('click', () => {
    const input = document.getElementById('calc-input');
    calculator.multiply(parseFloat(input.value));
    updateCalcDisplay();
  });

  document.getElementById('calc-reset').addEventListener('click', () => {
    calculator.reset();
    updateCalcDisplay();
  });

  // 初始化显示
  updateCalcDisplay();
}

// 运行应用
run().catch(console.error);

#!/bin/bash

echo "🏗️ 构建 Rust WebAssembly 项目..."

# 构建发布版本
wasm-pack build --target web --out-dir pkg --release

if [ $? -eq 0 ]; then
    echo "✅ 构建成功！"
    echo "📦 生成的文件："
    ls -la pkg/
    
    # 显示文件大小
    echo ""
    echo "📊 WASM 文件大小："
    ls -lh pkg/*.wasm
else
    echo "❌ 构建失败"
    exit 1
fi

#!/bin/bash

echo "🚀 启动开发服务器..."

# 构建开发版本
wasm-pack build --target web --out-dir pkg --dev

if [ $? -eq 0 ]; then
    echo "✅ 构建完成，启动服务器..."
    
    # 启动简单的 HTTP 服务器
    if command -v python3 &> /dev/null; then
        cd www && python3 -m http.server 8000
    elif command -v python &> /dev/null; then
        cd www && python -m SimpleHTTPServer 8000
    elif command -v npx &> /dev/null; then
        cd www && npx serve -s . -l 8000
    else
        echo "❌ 找不到可用的 HTTP 服务器"
        echo "💡 请安装 Python 或 Node.js"
        exit 1
    fi
else
    echo "❌ 构建失败"
    exit 1
fi

/target
/pkg
Cargo.lock
.DS_Store
node_modules/
*.log

# 1. 复制模板
cp -r rust-wasm-template my-project
cd my-project

# 2. 开发模式
chmod +x scripts/*.sh
./scripts/dev.sh

# 3. 生产构建
./scripts/build.sh

9.2 基础编译练习

练习 9.2.1 类型映射验证 (10分)

题目: 创建一个类型转换测试模块，验证 Rust 和 JavaScript 之间的类型映射。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

// 基础数值类型测试
#[wasm_bindgen]
pub fn test_i32(value: i32) -> i32 {
    value * 2
}

#[wasm_bindgen]
pub fn test_f64(value: f64) -> f64 {
    value * 3.14
}

#[wasm_bindgen]
pub fn test_bool(value: bool) -> bool {
    !value
}

// 字符串类型测试
#[wasm_bindgen]
pub fn test_string(input: &str) -> String {
    format!("Processed: {}", input)
}

// 数组类型测试
#[wasm_bindgen]
pub fn test_i32_array(numbers: &[i32]) -> Vec<i32> {
    numbers.iter().map(|x| x * 2).collect()
}

#[wasm_bindgen]
pub fn test_f64_array(numbers: &[f64]) -> Vec<f64> {
    numbers.iter().map(|x| x.sqrt()).collect()
}

// Option 类型测试
#[wasm_bindgen]
pub fn test_option_i32(value: Option<i32>) -> Option<i32> {
    value.map(|x| x + 10)
}

// Result 类型测试
#[wasm_bindgen]
pub fn test_result(value: i32) -> Result<i32, JsValue> {
    if value >= 0 {
        Ok(value * value)
    } else {
        Err(JsValue::from_str("负数不被支持"))
    }
}

// 结构体类型测试
#[wasm_bindgen]
#[derive(Clone)]
pub struct Point {
    x: f64,
    y: f64,
}

#[wasm_bindgen]
impl Point {
    #[wasm_bindgen(constructor)]
    pub fn new(x: f64, y: f64) -> Point {
        Point { x, y }
    }

    #[wasm_bindgen(getter)]
    pub fn x(&self) -> f64 {
        self.x
    }

    #[wasm_bindgen(getter)]
    pub fn y(&self) -> f64 {
        self.y
    }

    #[wasm_bindgen(setter)]
    pub fn set_x(&mut self, x: f64) {
        self.x = x;
    }

    #[wasm_bindgen(setter)]
    pub fn set_y(&mut self, y: f64) {
        self.y = y;
    }

    #[wasm_bindgen]
    pub fn distance_to(&self, other: &Point) -> f64 {
        let dx = self.x - other.x;
        let dy = self.y - other.y;
        (dx * dx + dy * dy).sqrt()
    }
}

// 枚举类型测试
#[wasm_bindgen]
#[derive(Clone, Copy)]
pub enum Color {
    Red,
    Green,
    Blue,
}

#[wasm_bindgen]
pub fn test_enum(color: Color) -> String {
    match color {
        Color::Red => "红色".to_string(),
        Color::Green => "绿色".to_string(),
        Color::Blue => "蓝色".to_string(),
    }
}

// 复杂类型组合测试
#[wasm_bindgen]
pub fn process_mixed_data(
    name: &str,
    age: i32,
    scores: &[f64],
    active: bool,
) -> JsValue {
    let average = if scores.is_empty() {
        0.0
    } else {
        scores.iter().sum::<f64>() / scores.len() as f64
    };

    let result = serde_json::json!({
        "name": name,
        "age": age,
        "average_score": average,
        "is_active": active,
        "status": if active { "在线" } else { "离线" }
    });

    JsValue::from_str(&result.to_string())
}
}

import init, * as wasm from '../pkg/rust_wasm_template.js';

async function runTypeTests() {
    await init();

    console.log("🧪 开始类型映射测试...");

    // 基础类型测试
    console.log("== 基础数值类型 ==");
    console.log("i32:", wasm.test_i32(42)); // 应该是 84
    console.log("f64:", wasm.test_f64(2.0)); // 应该是 6.28
    console.log("bool:", wasm.test_bool(true)); // 应该是 false

    // 字符串测试
    console.log("== 字符串类型 ==");
    console.log("string:", wasm.test_string("Hello")); // "Processed: Hello"

    // 数组测试
    console.log("== 数组类型 ==");
    console.log("i32 array:", wasm.test_i32_array([1, 2, 3, 4])); // [2, 4, 6, 8]
    console.log("f64 array:", wasm.test_f64_array([4.0, 9.0, 16.0])); // [2, 3, 4]

    // Option 测试
    console.log("== Option 类型 ==");
    console.log("Some:", wasm.test_option_i32(5)); // 15
    console.log("None:", wasm.test_option_i32(null)); // null

    // Result 测试
    console.log("== Result 类型 ==");
    try {
        console.log("Ok:", wasm.test_result(5)); // 25
    } catch (e) {
        console.log("Error:", e);
    }

    try {
        console.log("Err:", wasm.test_result(-1)); // 应该抛出异常
    } catch (e) {
        console.log("Caught error:", e);
    }

    // 结构体测试
    console.log("== 结构体类型 ==");
    const point1 = new wasm.Point(0, 0);
    const point2 = new wasm.Point(3, 4);
    console.log("Point1:", point1.x, point1.y);
    console.log("Point2:", point2.x, point2.y);
    console.log("Distance:", point1.distance_to(point2)); // 应该是 5

    // 枚举测试
    console.log("== 枚举类型 ==");
    console.log("Red:", wasm.test_enum(wasm.Color.Red));
    console.log("Green:", wasm.test_enum(wasm.Color.Green));
    console.log("Blue:", wasm.test_enum(wasm.Color.Blue));

    // 复杂数据测试
    console.log("== 复杂类型组合 ==");
    const mixedResult = wasm.process_mixed_data(
        "张三",
        25,
        [85.5, 92.0, 78.5],
        true
    );
    console.log("Mixed data result:", JSON.parse(mixedResult));

    console.log("✅ 所有类型测试完成");
}

// 性能测试
async function performanceTest() {
    await init();

    console.log("⚡ 性能测试开始...");

    const iterations = 100000;
    const testArray = new Array(1000).fill(0).map((_, i) => i);

    // JavaScript 数组处理
    console.time("JavaScript Array Processing");
    for (let i = 0; i < iterations; i++) {
        testArray.map(x => x * 2);
    }
    console.timeEnd("JavaScript Array Processing");

    // Rust WASM 数组处理
    console.time("Rust WASM Array Processing");
    for (let i = 0; i < iterations; i++) {
        wasm.test_i32_array(testArray);
    }
    console.timeEnd("Rust WASM Array Processing");

    console.log("✅ 性能测试完成");
}

// 运行测试
runTypeTests().then(() => performanceTest());

🧪 开始类型映射测试...
== 基础数值类型 ==
i32: 84
f64: 6.283185307179586
bool: false
== 字符串类型 ==
string: Processed: Hello
== 数组类型 ==
i32 array: [2, 4, 6, 8]
f64 array: [2, 3, 4]
== Option 类型 ==
Some: 15
None: null
== Result 类型 ==
Ok: 25
Caught error: 负数不被支持
== 结构体类型 ==
Point1: 0 0
Point2: 3 4
Distance: 5
== 枚举类型 ==
Red: 红色
Green: 绿色
Blue: 蓝色
== 复杂类型组合 ==
Mixed data result: {
  "name": "张三",
  "age": 25,
  "average_score": 85.33333333333333,
  "is_active": true,
  "status": "在线"
}
✅ 所有类型测试完成

练习 9.2.2 内存操作实践 (15分)

题目: 实现一个图像处理模块，展示 Rust WebAssembly 的内存操作能力。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use std::cmp;

#[wasm_bindgen]
pub struct ImageProcessor {
    width: usize,
    height: usize,
    data: Vec<u8>,
}

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

    // 从 JavaScript 接收图像数据
    #[wasm_bindgen]
    pub fn load_data(&mut self, data: &[u8]) {
        if data.len() == self.width * self.height * 4 {
            self.data.copy_from_slice(data);
        }
    }

    // 获取处理后的数据指针（用于 JavaScript 访问）
    #[wasm_bindgen]
    pub fn get_data_ptr(&self) -> *const u8 {
        self.data.as_ptr()
    }

    #[wasm_bindgen]
    pub fn get_data_length(&self) -> usize {
        self.data.len()
    }

    // 获取图像尺寸
    #[wasm_bindgen]
    pub fn width(&self) -> usize {
        self.width
    }

    #[wasm_bindgen]
    pub fn height(&self) -> usize {
        self.height
    }

    // 灰度化处理
    #[wasm_bindgen]
    pub fn grayscale(&mut self) {
        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;     // R
            self.data[i + 1] = gray; // G
            self.data[i + 2] = gray; // B
            // Alpha 通道保持不变
        }
    }

    // 亮度调整
    #[wasm_bindgen]
    pub fn adjust_brightness(&mut self, factor: f32) {
        for i in (0..self.data.len()).step_by(4) {
            // 调整 RGB 通道，跳过 Alpha
            for j in 0..3 {
                let old_value = self.data[i + j] as f32;
                let new_value = (old_value * factor).clamp(0.0, 255.0) as u8;
                self.data[i + j] = new_value;
            }
        }
    }

    // 对比度调整
    #[wasm_bindgen]
    pub fn adjust_contrast(&mut self, factor: f32) {
        for i in (0..self.data.len()).step_by(4) {
            for j in 0..3 {
                let old_value = self.data[i + j] as f32;
                let normalized = old_value / 255.0;
                let contrasted = ((normalized - 0.5) * factor + 0.5).clamp(0.0, 1.0);
                self.data[i + j] = (contrasted * 255.0) as u8;
            }
        }
    }

    // 模糊滤镜（简单的盒式模糊）
    #[wasm_bindgen]
    pub fn blur(&mut self, radius: usize) {
        if radius == 0 {
            return;
        }

        let mut temp_data = self.data.clone();
        
        for y in 0..self.height {
            for x in 0..self.width {
                let mut r_sum = 0u32;
                let mut g_sum = 0u32;
                let mut b_sum = 0u32;
                let mut count = 0u32;

                // 对邻域内的像素求平均
                for dy in -(radius as i32)..=(radius as i32) {
                    for dx in -(radius as i32)..=(radius as i32) {
                        let nx = x as i32 + dx;
                        let ny = y as i32 + dy;

                        if nx >= 0 && nx < self.width as i32 && 
                           ny >= 0 && ny < self.height as i32 {
                            let index = ((ny as usize * self.width + nx as usize) * 4) as usize;
                            r_sum += temp_data[index] as u32;
                            g_sum += temp_data[index + 1] as u32;
                            b_sum += temp_data[index + 2] as u32;
                            count += 1;
                        }
                    }
                }

                if count > 0 {
                    let index = (y * self.width + x) * 4;
                    self.data[index] = (r_sum / count) as u8;
                    self.data[index + 1] = (g_sum / count) as u8;
                    self.data[index + 2] = (b_sum / count) as u8;
                }
            }
        }
    }

    // 边缘检测（简单的 Sobel 算子）
    #[wasm_bindgen]
    pub fn edge_detection(&mut self) {
        let temp_data = self.data.clone();
        
        // Sobel 算子
        let sobel_x = [
            [-1, 0, 1],
            [-2, 0, 2],
            [-1, 0, 1],
        ];
        
        let sobel_y = [
            [-1, -2, -1],
            [ 0,  0,  0],
            [ 1,  2,  1],
        ];

        for y in 1..self.height - 1 {
            for x in 1..self.width - 1 {
                let mut gx = 0i32;
                let mut gy = 0i32;

                // 应用 Sobel 算子
                for i in 0..3 {
                    for j in 0..3 {
                        let px = x + j - 1;
                        let py = y + i - 1;
                        let index = (py * self.width + px) * 4;
                        
                        // 使用灰度值（取 R 通道）
                        let pixel_value = temp_data[index] as i32;
                        
                        gx += sobel_x[i][j] * pixel_value;
                        gy += sobel_y[i][j] * pixel_value;
                    }
                }

                // 计算梯度强度
                let magnitude = ((gx * gx + gy * gy) as f64).sqrt().min(255.0) as u8;
                
                let index = (y * self.width + x) * 4;
                self.data[index] = magnitude;     // R
                self.data[index + 1] = magnitude; // G
                self.data[index + 2] = magnitude; // B
            }
        }
    }

    // 直方图计算
    #[wasm_bindgen]
    pub fn calculate_histogram(&self) -> Vec<u32> {
        let mut histogram = vec![0u32; 256];
        
        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 usize;
            
            if gray < 256 {
                histogram[gray] += 1;
            }
        }
        
        histogram
    }

    // 颜色通道分离
    #[wasm_bindgen]
    pub fn extract_channel(&mut self, channel: u8) {
        for i in (0..self.data.len()).step_by(4) {
            match channel {
                0 => { // 红色通道
                    self.data[i + 1] = 0; // G
                    self.data[i + 2] = 0; // B
                },
                1 => { // 绿色通道
                    self.data[i] = 0;     // R
                    self.data[i + 2] = 0; // B
                },
                2 => { // 蓝色通道
                    self.data[i] = 0;     // R
                    self.data[i + 1] = 0; // G
                },
                _ => {} // 保持原样
            }
        }
    }

    // 复制图像数据到 JavaScript
    #[wasm_bindgen]
    pub fn copy_to_buffer(&self, buffer: &mut [u8]) {
        if buffer.len() >= self.data.len() {
            buffer[..self.data.len()].copy_from_slice(&self.data);
        }
    }
}

// 创建测试图像
#[wasm_bindgen]
pub fn create_test_image(width: usize, height: usize) -> Vec<u8> {
    let mut data = vec![0u8; width * height * 4];
    
    for y in 0..height {
        for x in 0..width {
            let index = (y * width + x) * 4;
            
            // 创建彩色渐变测试图像
            data[index] = ((x as f32 / width as f32) * 255.0) as u8;     // R
            data[index + 1] = ((y as f32 / height as f32) * 255.0) as u8; // G
            data[index + 2] = 128; // B
            data[index + 3] = 255; // A
        }
    }
    
    data
}

// 性能基准测试
#[wasm_bindgen]
pub fn benchmark_image_processing(width: usize, height: usize, iterations: usize) -> f64 {
    let mut processor = ImageProcessor::new(width, height);
    let test_data = create_test_image(width, height);
    processor.load_data(&test_data);
    
    let start = js_sys::Date::now();
    
    for _ in 0..iterations {
        processor.grayscale();
        processor.adjust_brightness(1.1);
        processor.blur(1);
    }
    
    let end = js_sys::Date::now();
    end - start
}
}

import init, { ImageProcessor, create_test_image, benchmark_image_processing } from '../pkg/rust_wasm_template.js';

async function runImageTests() {
    await init();
    
    console.log("🖼️ 图像处理测试开始...");

    // 创建测试图像
    const width = 512;
    const height = 512;
    const testImageData = create_test_image(width, height);
    
    console.log(`创建了 ${width}x${height} 的测试图像`);

    // 创建图像处理器
    const processor = new ImageProcessor(width, height);
    processor.load_data(testImageData);

    // 在 Canvas 上显示原始图像
    const canvas = document.getElementById('image-canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    function displayImage() {
        // 从 WASM 内存获取图像数据
        const dataPtr = processor.get_data_ptr();
        const dataLength = processor.get_data_length();
        const wasmMemory = new Uint8Array(memory.buffer);
        const imageData = wasmMemory.subarray(dataPtr, dataPtr + dataLength);
        
        // 创建 ImageData 对象
        const imageDataObj = new ImageData(
            new Uint8ClampedArray(imageData),
            width,
            height
        );
        
        ctx.putImageData(imageDataObj, 0, 0);
    }

    // 显示原始图像
    console.log("显示原始图像");
    displayImage();

    // 等待用户确认后继续
    await new Promise(resolve => {
        const button = document.createElement('button');
        button.textContent = '应用灰度化';
        button.onclick = () => {
            button.remove();
            resolve();
        };
        document.body.appendChild(button);
    });

    // 应用灰度化
    console.log("应用灰度化...");
    processor.grayscale();
    displayImage();

    // 调整亮度
    console.log("调整亮度...");
    processor.adjust_brightness(1.3);
    displayImage();

    // 应用模糊
    console.log("应用模糊滤镜...");
    processor.blur(2);
    displayImage();

    // 边缘检测
    console.log("边缘检测...");
    processor.edge_detection();
    displayImage();

    // 计算直方图
    console.log("计算直方图...");
    const histogram = processor.calculate_histogram();
    console.log("直方图数据（前10个值）:", histogram.slice(0, 10));

    // 性能测试
    console.log("⚡ 性能基准测试...");
    const benchmarkTime = benchmark_image_processing(256, 256, 100);
    console.log(`处理 100 次 256x256 图像耗时: ${benchmarkTime.toFixed(2)}ms`);

    console.log("✅ 图像处理测试完成");
}

// HTML 模板
const imageTestHTML = `
<div>
    <h3>图像处理演示</h3>
    <canvas id="image-canvas" style="border: 1px solid #ccc;"></canvas>
    <div id="controls" style="margin-top: 10px;">
        <button onclick="runImageTests()">开始测试</button>
    </div>
</div>
`;

// 添加到页面
document.body.insertAdjacentHTML('beforeend', imageTestHTML);

// 暴露测试函数到全局
window.runImageTests = runImageTests;

async function comparePerformance() {
    await init();

    const width = 512;
    const height = 512;
    const testData = create_test_image(width, height);
    
    console.log("🏁 性能对比测试");

    // JavaScript 版本的灰度化
    function jsGrayscale(data) {
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
            data[i] = gray;
            data[i + 1] = gray;
            data[i + 2] = gray;
        }
    }

    // JavaScript 性能测试
    const jsData = new Uint8Array(testData);
    console.time('JavaScript Grayscale');
    jsGrayscale(jsData);
    console.timeEnd('JavaScript Grayscale');

    // Rust WASM 性能测试
    const processor = new ImageProcessor(width, height);
    processor.load_data(testData);
    console.time('Rust WASM Grayscale');
    processor.grayscale();
    console.timeEnd('Rust WASM Grayscale');

    console.log("📊 性能对比完成");
}

9.3 高级特性练习

练习 9.3.1 异步编程实践 (20分)

题目: 实现一个支持异步操作的文件处理模块，包含 Promise 集成和错误处理。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use web_sys::{Request, RequestInit, RequestMode, Response};
use js_sys::Promise;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 异步文件处理器
#[wasm_bindgen]
pub struct AsyncFileProcessor {
    processing_queue: Vec<String>,
}

#[wasm_bindgen]
impl AsyncFileProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> AsyncFileProcessor {
        AsyncFileProcessor {
            processing_queue: Vec::new(),
        }
    }

    // 异步获取文件内容
    #[wasm_bindgen]
    pub async fn fetch_file(&self, url: String) -> Result<String, JsValue> {
        console_log!("开始获取文件: {}", url);

        let mut opts = RequestInit::new();
        opts.method("GET");
        opts.mode(RequestMode::Cors);

        let request = Request::new_with_str_and_init(&url, &opts)?;

        let window = web_sys::window().unwrap();
        let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;
        let resp: Response = resp_value.dyn_into().unwrap();

        if !resp.ok() {
            return Err(JsValue::from_str(&format!("HTTP 错误: {}", resp.status())));
        }

        let text_promise = resp.text()?;
        let text_value = JsFuture::from(text_promise).await?;
        let text = text_value.as_string().unwrap_or_default();

        console_log!("文件获取成功，大小: {} 字节", text.len());
        Ok(text)
    }

    // 异步处理文本（模拟耗时操作）
    #[wasm_bindgen]
    pub async fn process_text(&mut self, text: String, delay_ms: u32) -> Result<String, JsValue> {
        console_log!("开始处理文本，延迟: {}ms", delay_ms);

        // 添加到处理队列
        self.processing_queue.push(text.clone());

        // 模拟异步延迟
        let promise = Promise::new(&mut |resolve, _| {
            let resolve = resolve.clone();
            let text_clone = text.clone();
            
            web_sys::window()
                .unwrap()
                .set_timeout_with_callback_and_timeout_and_arguments_0(
                    &Closure::once_into_js(move || {
                        // 处理文本：统计单词、转换大小写等
                        let word_count = text_clone.split_whitespace().count();
                        let processed = format!(
                            "处理结果:\n字符数: {}\n单词数: {}\n大写转换: {}",
                            text_clone.len(),
                            word_count,
                            text_clone.to_uppercase()
                        );
                        resolve.call1(&JsValue::NULL, &JsValue::from_str(&processed)).unwrap();
                    })
                    .into(),
                    delay_ms as i32,
                ).unwrap();
        });

        let result = JsFuture::from(promise).await?;
        let processed_text = result.as_string().unwrap_or_default();

        // 从队列中移除
        self.processing_queue.retain(|x| x != &text);

        console_log!("文本处理完成");
        Ok(processed_text)
    }

    // 批量异步处理
    #[wasm_bindgen]
    pub async fn batch_process(&mut self, urls: Box<[JsValue]>) -> Result<Box<[JsValue]>, JsValue> {
        console_log!("开始批量处理 {} 个文件", urls.len());

        let mut futures = Vec::new();
        
        for url_value in urls.iter() {
            if let Some(url) = url_value.as_string() {
                let future = async move {
                    match self.fetch_file(url.clone()).await {
                        Ok(content) => {
                            match self.process_text(content, 100).await {
                                Ok(processed) => Ok(JsValue::from_str(&processed)),
                                Err(e) => Err(e),
                            }
                        },
                        Err(e) => Err(e),
                    }
                };
                futures.push(future);
            }
        }

        // 并发执行所有异步操作
        let mut results = Vec::new();
        for future in futures {
            match future.await {
                Ok(result) => results.push(result),
                Err(e) => return Err(e),
            }
        }

        console_log!("批量处理完成");
        Ok(results.into_boxed_slice())
    }

    // 获取处理队列状态
    #[wasm_bindgen]
    pub fn get_queue_status(&self) -> String {
        format!("队列中有 {} 个待处理项目", self.processing_queue.len())
    }
}

// 异步计算密集型任务示例
#[wasm_bindgen]
pub async fn compute_fibonacci_async(n: u32, chunk_size: u32) -> Result<String, JsValue> {
    console_log!("开始异步计算斐波那契数列，n={}, chunk_size={}", n, chunk_size);

    if n > 45 {
        return Err(JsValue::from_str("n 值太大，可能导致浏览器卡顿"));
    }

    let mut results = Vec::new();
    let mut current = 0;

    while current < n {
        let end = std::cmp::min(current + chunk_size, n);
        
        // 计算一个批次
        let batch_results: Vec<u64> = (current..end)
            .map(|i| fibonacci_iterative(i))
            .collect();
        
        results.extend(batch_results);
        current = end;

        // 每个批次后让出控制权
        if current < n {
            let promise = Promise::new(&mut |resolve, _| {
                web_sys::window()
                    .unwrap()
                    .set_timeout_with_callback_and_timeout_and_arguments_0(
                        &Closure::once_into_js(move || {
                            resolve.call1(&JsValue::NULL, &JsValue::UNDEFINED).unwrap();
                        }).into(),
                        0,
                    ).unwrap();
            });
            JsFuture::from(promise).await?;
        }
    }

    let result_str = format!("计算完成，前10个结果: {:?}", &results[..std::cmp::min(10, results.len())]);
    console_log!("{}", result_str);
    Ok(result_str)
}

// 辅助函数：迭代计算斐波那契数
fn fibonacci_iterative(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 struct NetworkManager {
    base_url: String,
    timeout_ms: u32,
}

#[wasm_bindgen]
impl NetworkManager {
    #[wasm_bindgen(constructor)]
    pub fn new(base_url: String, timeout_ms: u32) -> NetworkManager {
        NetworkManager { base_url, timeout_ms }
    }

    // 带超时的异步请求
    #[wasm_bindgen]
    pub async fn request_with_timeout(&self, endpoint: String) -> Result<String, JsValue> {
        let url = format!("{}/{}", self.base_url, endpoint);
        console_log!("发起网络请求: {}", url);

        // 创建请求
        let mut opts = RequestInit::new();
        opts.method("GET");
        opts.mode(RequestMode::Cors);

        let request = Request::new_with_str_and_init(&url, &opts)?;

        // 创建超时 Promise
        let timeout_promise = Promise::new(&mut |_, reject| {
            let reject = reject.clone();
            web_sys::window()
                .unwrap()
                .set_timeout_with_callback_and_timeout_and_arguments_0(
                    &Closure::once_into_js(move || {
                        reject.call1(&JsValue::NULL, &JsValue::from_str("请求超时")).unwrap();
                    }).into(),
                    self.timeout_ms as i32,
                ).unwrap();
        });

        // 创建请求 Promise
        let window = web_sys::window().unwrap();
        let fetch_promise = window.fetch_with_request(&request);

        // 使用 Promise.race() 实现超时
        let race_array = js_sys::Array::new();
        race_array.push(&fetch_promise);
        race_array.push(&timeout_promise);

        let race_promise = js_sys::Promise::race(&race_array);
        let resp_value = JsFuture::from(race_promise).await?;

        // 检查是否是 Response 对象
        if !resp_value.is_instance_of::<Response>() {
            return Err(JsValue::from_str("请求超时"));
        }

        let resp: Response = resp_value.dyn_into().unwrap();

        if !resp.ok() {
            return Err(JsValue::from_str(&format!("HTTP 错误: {}", resp.status())));
        }

        let text_promise = resp.text()?;
        let text_value = JsFuture::from(text_promise).await?;
        let text = text_value.as_string().unwrap_or_default();

        console_log!("请求成功完成");
        Ok(text)
    }

    // 并发请求多个端点
    #[wasm_bindgen]
    pub async fn concurrent_requests(&self, endpoints: Box<[JsValue]>) -> Result<Box<[JsValue]>, JsValue> {
        console_log!("开始并发请求 {} 个端点", endpoints.len());

        let mut promises = Vec::new();

        for endpoint_value in endpoints.iter() {
            if let Some(endpoint) = endpoint_value.as_string() {
                let url = format!("{}/{}", self.base_url, endpoint);
                
                let mut opts = RequestInit::new();
                opts.method("GET");
                opts.mode(RequestMode::Cors);

                let request = Request::new_with_str_and_init(&url, &opts)?;
                let window = web_sys::window().unwrap();
                let promise = window.fetch_with_request(&request);
                
                promises.push(promise);
            }
        }

        // 使用 Promise.all() 等待所有请求完成
        let promise_array = js_sys::Array::new();
        for promise in promises {
            promise_array.push(&promise);
        }

        let all_promise = js_sys::Promise::all(&promise_array);
        let results_value = JsFuture::from(all_promise).await?;
        let results_array: js_sys::Array = results_value.dyn_into().unwrap();

        let mut processed_results = Vec::new();
        for i in 0..results_array.length() {
            let resp_value = results_array.get(i);
            let resp: Response = resp_value.dyn_into().unwrap();

            if resp.ok() {
                let text_promise = resp.text()?;
                let text_value = JsFuture::from(text_promise).await?;
                processed_results.push(text_value);
            } else {
                processed_results.push(JsValue::from_str(&format!("错误: {}", resp.status())));
            }
        }

        console_log!("并发请求完成");
        Ok(processed_results.into_boxed_slice())
    }
}
}

import init, { AsyncFileProcessor, compute_fibonacci_async, NetworkManager } from '../pkg/rust_wasm_template.js';

async function runAsyncTests() {
    await init();
    
    console.log("🔄 异步编程测试开始...");

    // 文件处理器测试
    console.log("== 异步文件处理器 ==");
    const processor = new AsyncFileProcessor();

    try {
        // 模拟文件内容
        const testText = "Hello WebAssembly! This is a test file content with multiple words.";
        console.log("处理文本:", testText.substring(0, 50) + "...");
        
        const result = await processor.process_text(testText, 1000);
        console.log("处理结果:", result.substring(0, 100) + "...");
        
        console.log("队列状态:", processor.get_queue_status());
    } catch (error) {
        console.error("文件处理错误:", error);
    }

    // 异步计算测试
    console.log("== 异步计算测试 ==");
    try {
        console.time("异步斐波那契计算");
        const fibResult = await compute_fibonacci_async(30, 5);
        console.timeEnd("异步斐波那契计算");
        console.log("斐波那契结果:", fibResult);
    } catch (error) {
        console.error("计算错误:", error);
    }

    // 网络管理器测试
    console.log("== 网络请求测试 ==");
    const networkManager = new NetworkManager("https://jsonplaceholder.typicode.com", 5000);

    try {
        console.time("单个请求");
        const singleResult = await networkManager.request_with_timeout("posts/1");
        console.timeEnd("单个请求");
        console.log("单个请求结果:", JSON.parse(singleResult).title);
    } catch (error) {
        console.error("网络请求错误:", error);
    }

    try {
        console.time("并发请求");
        const endpoints = ["posts/1", "posts/2", "posts/3"];
        const concurrentResults = await networkManager.concurrent_requests(endpoints);
        console.timeEnd("并发请求");
        
        console.log("并发请求结果:");
        concurrentResults.forEach((result, index) => {
            try {
                const parsed = JSON.parse(result);
                console.log(`  ${index + 1}: ${parsed.title}`);
            } catch (e) {
                console.log(`  ${index + 1}: 解析错误`);
            }
        });
    } catch (error) {
        console.error("并发请求错误:", error);
    }

    console.log("✅ 异步编程测试完成");
}

// 交互式测试界面
function createAsyncTestUI() {
    const container = document.createElement('div');
    container.innerHTML = `
        <h3>异步操作测试</h3>
        <div style="margin: 10px 0;">
            <button id="test-file-processing">测试文件处理</button>
            <button id="test-computation">测试异步计算</button>
            <button id="test-network">测试网络请求</button>
        </div>
        <div id="async-results" style="background: #f0f0f0; padding: 10px; margin: 10px 0; height: 200px; overflow-y: auto;"></div>
    `;

    document.body.appendChild(container);

    const resultsDiv = document.getElementById('async-results');

    function logResult(message) {
        resultsDiv.innerHTML += `<div>${new Date().toLocaleTimeString()}: ${message}</div>`;
        resultsDiv.scrollTop = resultsDiv.scrollHeight;
    }

    document.getElementById('test-file-processing').onclick = async () => {
        logResult("开始文件处理测试...");
        const processor = new AsyncFileProcessor();
        
        try {
            const testTexts = [
                "这是第一个测试文件的内容。",
                "This is the second test file content.",
                "第三个文件包含更多的文字内容，用于测试处理能力。"
            ];

            for (let i = 0; i < testTexts.length; i++) {
                logResult(`处理文件 ${i + 1}...`);
                const result = await processor.process_text(testTexts[i], 500);
                logResult(`文件 ${i + 1} 处理完成`);
            }
        } catch (error) {
            logResult(`错误: ${error}`);
        }
    };

    document.getElementById('test-computation').onclick = async () => {
        logResult("开始异步计算测试...");
        
        try {
            const result = await compute_fibonacci_async(25, 3);
            logResult(`计算完成: ${result}`);
        } catch (error) {
            logResult(`计算错误: ${error}`);
        }
    };

    document.getElementById('test-network').onclick = async () => {
        logResult("开始网络请求测试...");
        const networkManager = new NetworkManager("https://httpbin.org", 3000);
        
        try {
            const result = await networkManager.request_with_timeout("delay/1");
            logResult("网络请求成功完成");
        } catch (error) {
            logResult(`网络请求错误: ${error}`);
        }
    };
}

// 页面加载完成后创建测试界面
document.addEventListener('DOMContentLoaded', () => {
    createAsyncTestUI();
});

// 暴露测试函数
window.runAsyncTests = runAsyncTests;

// 异步操作性能监控
class AsyncPerformanceMonitor {
    constructor() {
        this.operations = new Map();
    }

    startOperation(id) {
        this.operations.set(id, {
            startTime: performance.now(),
            status: 'running'
        });
    }

    finishOperation(id, success = true) {
        const op = this.operations.get(id);
        if (op) {
            op.endTime = performance.now();
            op.duration = op.endTime - op.startTime;
            op.status = success ? 'completed' : 'failed';
        }
    }

    getReport() {
        const completed = Array.from(this.operations.values())
            .filter(op => op.status === 'completed');
        
        if (completed.length === 0) return "无已完成操作";

        const totalDuration = completed.reduce((sum, op) => sum + op.duration, 0);
        const avgDuration = totalDuration / completed.length;
        
        return `操作总数: ${completed.length}, 平均耗时: ${avgDuration.toFixed(2)}ms`;
    }
}

// 使用监控器
const monitor = new AsyncPerformanceMonitor();

async function monitoredAsyncOperation() {
    const operationId = `op_${Date.now()}`;
    monitor.startOperation(operationId);
    
    try {
        await runAsyncTests();
        monitor.finishOperation(operationId, true);
    } catch (error) {
        monitor.finishOperation(operationId, false);
        console.error("操作失败:", error);
    }
    
    console.log("性能报告:", monitor.getReport());
}

练习 9.3.2 游戏引擎开发 (30分)

题目: 创建一个简单的 2D 游戏引擎，包含实体系统、物理模拟、碰撞检测和渲染管理。

9.4 项目实战练习

练习 9.4.1 完整项目构建 (25分)

题目: 构建一个完整的 Rust WebAssembly 应用，包含：

• 项目架构设计
• 模块化开发
• 测试和基准测试
• 构建优化
• 部署配置

本章练习总结

本章练习涵盖了 Rust WebAssembly 开发的核心技能：

🎯 学习目标达成

1. 环境配置掌握 - 能够正确配置和验证 Rust WebAssembly 开发环境
2. 类型系统理解 - 深入理解 Rust 和 JavaScript 之间的类型映射
3. 内存操作实践 - 掌握高性能的内存操作和数据处理
4. 异步编程应用 - 学会在 WebAssembly 中实现异步操作和 Promise 集成
5. 项目开发能力 - 具备完整项目的开发和优化能力

📈 难度递进

• 基础练习 (10-15分) - 环境配置、基本编译、类型验证
• 进阶练习 (15-20分) - 内存操作、性能优化、错误处理
• 高级练习 (20-30分) - 异步编程、复杂项目架构
• 综合项目 (25-30分) - 完整应用开发、部署优化

🔧 关键技能

1. 工具链熟练度 - wasm-pack、wasm-bindgen、cargo 等工具的熟练使用
2. 性能优化 - 代码优化、内存管理、编译优化的实践经验
3. JavaScript 集成 - 深度理解 Rust 和 JavaScript 的互操作
4. 错误处理 - 健壮的错误处理和调试技能
5. 项目管理 - 模块化设计、测试驱动开发、CI/CD 集成

通过这些练习的完成，学习者将具备使用 Rust 开发高性能 WebAssembly 应用的完整技能栈。

第10章 性能优化

本章将深入探讨 WebAssembly 应用的性能优化技术，从编译时优化到运行时性能调优，帮助你构建高性能的 WebAssembly 应用。

10.1 编译时优化

10.1.1 编译器优化选项

不同的编译器和目标平台提供了丰富的优化选项，正确配置这些选项是性能优化的第一步。

Rust 优化配置

Cargo.toml 优化配置:

[package]
name = "wasm-optimization-demo"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

# 发布版本优化
[profile.release]
# 优化级别
opt-level = 3          # 最高优化级别 (0-3, s, z)
debug = false          # 禁用调试信息
overflow-checks = false # 禁用整数溢出检查
lto = true            # 启用链接时优化 (Link Time Optimization)
codegen-units = 1     # 减少代码生成单元，提高优化效果
panic = "abort"       # 使用 abort 而不是 unwind，减小文件大小

# 针对 WebAssembly 的特殊优化
[profile.release.package."*"]
opt-level = 3
debug-assertions = false

# 依赖项优化
[dependencies]
wasm-bindgen = { version = "0.2", features = ["serde-serialize"] }

[dependencies.web-sys]
version = "0.3"
default-features = false
features = [
  "console",
  "Performance",
]

优化级别详解:

#![allow(unused)]
fn main() {
// opt-level 的不同级别
// 0: 无优化，快速编译
// 1: 基本优化
// 2: 默认优化级别
// 3: 最高优化级别，编译时间长但性能最佳
// "s": 优化代码大小
// "z": 更激进的代码大小优化

// 示例：性能关键的函数
#[inline(always)]  // 强制内联
pub fn critical_calculation(data: &[f64]) -> f64 {
    // 使用 SIMD 指令进行向量化计算
    data.iter().map(|&x| x * x).sum()
}

// 示例：减少内存分配
#[no_mangle]  // 防止名称混淆
pub extern "C" fn efficient_string_processing(
    input: *const u8, 
    len: usize
) -> u32 {
    // 直接操作原始指针，避免字符串分配
    let slice = unsafe { std::slice::from_raw_parts(input, len) };
    slice.iter().map(|&b| b as u32).sum()
}
}

C/C++ 优化配置

Emscripten 优化参数:

# 基本优化
emcc -O3 -s WASM=1 \
     -s EXPORTED_FUNCTIONS='["_add", "_multiply"]' \
     -s MODULARIZE=1 \
     -s EXPORT_NAME="MathModule" \
     input.c -o output.js

# 高级优化
emcc -O3 -flto \
     -s WASM=1 \
     -s ALLOW_MEMORY_GROWTH=1 \
     -s INITIAL_MEMORY=16777216 \
     -s MAXIMUM_MEMORY=33554432 \
     -s STACK_SIZE=1048576 \
     -s MODULARIZE=1 \
     -s EXPORT_NAME="OptimizedModule" \
     -s EXPORTED_FUNCTIONS='["_main", "_malloc", "_free"]' \
     -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' \
     --closure 1 \
     input.c -o optimized.js

# 大小优化
emcc -Oz -flto \
     -s WASM=1 \
     -s MODULARIZE=1 \
     -s EXPORT_NAME="MinimalModule" \
     -s NO_FILESYSTEM=1 \
     -s DISABLE_EXCEPTION_CATCHING=1 \
     -s AGGRESSIVE_VARIABLE_ELIMINATION=1 \
     --closure 1 \
     input.c -o minimal.js

优化选项说明:

# 性能优化选项
-O3                    # 最高优化级别
-flto                  # 链接时优化
--closure 1            # Google Closure Compiler 优化

# 内存管理优化
-s INITIAL_MEMORY=16MB    # 初始内存大小
-s ALLOW_MEMORY_GROWTH=1  # 允许内存增长
-s MAXIMUM_MEMORY=32MB    # 最大内存限制

# 代码大小优化
-s NO_FILESYSTEM=1                    # 禁用文件系统
-s DISABLE_EXCEPTION_CATCHING=1       # 禁用异常处理
-s AGGRESSIVE_VARIABLE_ELIMINATION=1  # 激进的变量消除

10.1.2 构建工具优化

wasm-pack 优化

wasm-pack 构建选项:

# 发布版本构建
wasm-pack build \
  --target web \
  --out-dir pkg \
  --release \
  --scope myorg

# 优化构建
wasm-pack build \
  --target web \
  --out-dir pkg \
  --release \
  --scope myorg \
  -- \
  --features "simd"

# 自定义优化
RUSTFLAGS="-C target-cpu=native -C target-feature=+simd128" \
wasm-pack build \
  --target web \
  --out-dir pkg \
  --release

Binaryen 工具链优化

wasm-opt 优化:

# 基本优化
wasm-opt -O3 input.wasm -o optimized.wasm

# 高级优化
wasm-opt -O4 --enable-simd --enable-bulk-memory \
         --enable-multivalue \
         input.wasm -o highly_optimized.wasm

# 大小优化
wasm-opt -Oz --strip-debug --strip-producers \
         input.wasm -o size_optimized.wasm

# 自定义优化管道
wasm-opt --inline-functions-with-loops \
         --optimize-instructions \
         --vacuum \
         --remove-unused-brs \
         --remove-unused-names \
         --merge-blocks \
         input.wasm -o custom_optimized.wasm

10.1.3 代码优化技术

内存布局优化

#![allow(unused)]
fn main() {
// 结构体字段重排序，减少内存填充
#[repr(C)]  // 使用 C 内存布局
pub struct OptimizedStruct {
    // 按照大小递减排列，减少内存填充
    data: u64,        // 8 字节
    count: u32,       // 4 字节
    flags: u16,       // 2 字节
    active: bool,     // 1 字节
    // 编译器会添加 1 字节填充以对齐到 8 字节
}

// 使用 packed 属性紧凑存储
#[repr(packed)]
pub struct PackedStruct {
    value: u32,
    flag: u8,
    // 无填充，但访问可能较慢
}

// 缓存友好的数据结构
pub struct SoAData {
    // Structure of Arrays (SoA) 模式
    // 提高缓存局部性
    x_coords: Vec<f32>,
    y_coords: Vec<f32>,
    z_coords: Vec<f32>,
}

impl SoAData {
    pub fn process_all_x(&mut self) {
        // 顺序访问提高缓存命中率
        for x in &mut self.x_coords {
            *x *= 2.0;
        }
    }
}
}

循环优化

#![allow(unused)]
fn main() {
// 循环展开
pub fn unrolled_sum(data: &[f32]) -> f32 {
    let mut sum = 0.0;
    let chunks = data.chunks_exact(4);
    let remainder = chunks.remainder();
    
    // 手动展开循环，减少分支开销
    for chunk in chunks {
        sum += chunk[0] + chunk[1] + chunk[2] + chunk[3];
    }
    
    // 处理剩余元素
    for &value in remainder {
        sum += value;
    }
    
    sum
}

// SIMD 优化（需要 nightly Rust）
#[cfg(target_arch = "wasm32")]
use std::arch::wasm32::*;

pub fn simd_sum(data: &[f32]) -> f32 {
    let mut sum = f32x4_splat(0.0);
    let chunks = data.chunks_exact(4);
    let remainder = chunks.remainder();
    
    for chunk in chunks {
        let vec = f32x4(chunk[0], chunk[1], chunk[2], chunk[3]);
        sum = f32x4_add(sum, vec);
    }
    
    // 水平求和
    let array = [f32x4_extract_lane::<0>(sum),
                 f32x4_extract_lane::<1>(sum),
                 f32x4_extract_lane::<2>(sum),
                 f32x4_extract_lane::<3>(sum)];
    
    array.iter().sum::<f32>() + remainder.iter().sum::<f32>()
}

// 缓存友好的矩阵乘法
pub fn cache_friendly_matrix_multiply(
    a: &[f32], 
    b: &[f32], 
    c: &mut [f32], 
    n: usize
) {
    const BLOCK_SIZE: usize = 64;
    
    for ii in (0..n).step_by(BLOCK_SIZE) {
        for jj in (0..n).step_by(BLOCK_SIZE) {
            for kk in (0..n).step_by(BLOCK_SIZE) {
                // 块内计算，提高缓存局部性
                let i_end = std::cmp::min(ii + BLOCK_SIZE, n);
                let j_end = std::cmp::min(jj + BLOCK_SIZE, n);
                let k_end = std::cmp::min(kk + BLOCK_SIZE, n);
                
                for i in ii..i_end {
                    for j in jj..j_end {
                        let mut sum = 0.0;
                        for k in kk..k_end {
                            sum += a[i * n + k] * b[k * n + j];
                        }
                        c[i * n + j] += sum;
                    }
                }
            }
        }
    }
}
}

10.2 运行时优化

10.2.1 内存管理优化

自定义内存分配器

#![allow(unused)]
fn main() {
use std::alloc::{GlobalAlloc, Layout, System};
use std::sync::atomic::{AtomicUsize, Ordering};

// 简单的内存使用统计分配器
pub struct StatsAllocator {
    allocated: AtomicUsize,
    deallocated: AtomicUsize,
}

impl StatsAllocator {
    pub const fn new() -> Self {
        StatsAllocator {
            allocated: AtomicUsize::new(0),
            deallocated: AtomicUsize::new(0),
        }
    }
    
    pub fn bytes_allocated(&self) -> usize {
        self.allocated.load(Ordering::Relaxed)
    }
    
    pub fn bytes_deallocated(&self) -> usize {
        self.deallocated.load(Ordering::Relaxed)
    }
    
    pub fn bytes_in_use(&self) -> usize {
        self.bytes_allocated() - self.bytes_deallocated()
    }
}

unsafe impl GlobalAlloc for StatsAllocator {
    unsafe fn alloc(&self, layout: Layout) -> *mut u8 {
        let ptr = System.alloc(layout);
        if !ptr.is_null() {
            self.allocated.fetch_add(layout.size(), Ordering::Relaxed);
        }
        ptr
    }
    
    unsafe fn dealloc(&self, ptr: *mut u8, layout: Layout) {
        System.dealloc(ptr, layout);
        self.deallocated.fetch_add(layout.size(), Ordering::Relaxed);
    }
}

// 全局分配器
#[global_allocator]
static ALLOCATOR: StatsAllocator = StatsAllocator::new();

// 内存池分配器
pub struct MemoryPool {
    pool: Vec<u8>,
    current: usize,
}

impl MemoryPool {
    pub fn new(size: usize) -> Self {
        MemoryPool {
            pool: vec![0; size],
            current: 0,
        }
    }
    
    pub fn allocate(&mut self, size: usize, align: usize) -> Option<*mut u8> {
        // 对齐到指定边界
        let aligned_start = (self.current + align - 1) & !(align - 1);
        let end = aligned_start + size;
        
        if end <= self.pool.len() {
            self.current = end;
            Some(self.pool.as_mut_ptr().wrapping_add(aligned_start))
        } else {
            None
        }
    }
    
    pub fn reset(&mut self) {
        self.current = 0;
    }
    
    pub fn usage(&self) -> f64 {
        self.current as f64 / self.pool.len() as f64
    }
}

// 使用示例
#[wasm_bindgen]
pub struct OptimizedProcessor {
    pool: MemoryPool,
    temp_buffers: Vec<Vec<f32>>,
}

#[wasm_bindgen]
impl OptimizedProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(pool_size: usize) -> OptimizedProcessor {
        OptimizedProcessor {
            pool: MemoryPool::new(pool_size),
            temp_buffers: Vec::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn process_data(&mut self, data: &[f32]) -> Vec<f32> {
        // 重用缓冲区避免重复分配
        if self.temp_buffers.is_empty() {
            self.temp_buffers.push(Vec::with_capacity(data.len()));
        }
        
        let buffer = &mut self.temp_buffers[0];
        buffer.clear();
        buffer.extend_from_slice(data);
        
        // 就地处理，避免额外分配
        for value in buffer.iter_mut() {
            *value = value.sqrt();
        }
        
        buffer.clone()
    }
    
    #[wasm_bindgen]
    pub fn get_memory_stats(&self) -> String {
        format!(
            "Pool usage: {:.2}%, Allocated: {} bytes, In use: {} bytes",
            self.pool.usage() * 100.0,
            ALLOCATOR.bytes_allocated(),
            ALLOCATOR.bytes_in_use()
        )
    }
}
}

对象池模式

#![allow(unused)]
fn main() {
use std::collections::VecDeque;

// 对象池实现
pub struct ObjectPool<T> {
    objects: VecDeque<T>,
    create_fn: Box<dyn Fn() -> T>,
}

impl<T> ObjectPool<T> {
    pub fn new<F>(create_fn: F) -> Self 
    where 
        F: Fn() -> T + 'static,
    {
        ObjectPool {
            objects: VecDeque::new(),
            create_fn: Box::new(create_fn),
        }
    }
    
    pub fn acquire(&mut self) -> T {
        self.objects.pop_front().unwrap_or_else(|| (self.create_fn)())
    }
    
    pub fn release(&mut self, obj: T) {
        self.objects.push_back(obj);
    }
    
    pub fn size(&self) -> usize {
        self.objects.len()
    }
}

// 可重用的计算上下文
pub struct ComputeContext {
    temp_array: Vec<f32>,
    result_buffer: Vec<f32>,
}

impl ComputeContext {
    pub fn new() -> Self {
        ComputeContext {
            temp_array: Vec::new(),
            result_buffer: Vec::new(),
        }
    }
    
    pub fn reset(&mut self) {
        self.temp_array.clear();
        self.result_buffer.clear();
    }
    
    pub fn compute(&mut self, input: &[f32]) -> &[f32] {
        self.temp_array.extend_from_slice(input);
        
        // 执行计算
        self.result_buffer.clear();
        for &value in &self.temp_array {
            self.result_buffer.push(value * 2.0 + 1.0);
        }
        
        &self.result_buffer
    }
}

#[wasm_bindgen]
pub struct PoolManager {
    context_pool: ObjectPool<ComputeContext>,
}

#[wasm_bindgen]
impl PoolManager {
    #[wasm_bindgen(constructor)]
    pub fn new() -> PoolManager {
        PoolManager {
            context_pool: ObjectPool::new(|| ComputeContext::new()),
        }
    }
    
    #[wasm_bindgen]
    pub fn process_batch(&mut self, data: &[f32]) -> Vec<f32> {
        let mut context = self.context_pool.acquire();
        context.reset();
        
        let result = context.compute(data).to_vec();
        
        self.context_pool.release(context);
        result
    }
    
    #[wasm_bindgen]
    pub fn pool_size(&self) -> usize {
        self.context_pool.size()
    }
}
}

10.2.2 计算优化

算法复杂度优化

#![allow(unused)]
fn main() {
// 快速排序 vs 基数排序
pub mod sorting {
    // 传统快速排序 O(n log n)
    pub fn quicksort(arr: &mut [i32]) {
        if arr.len() <= 1 {
            return;
        }
        
        let pivot = partition(arr);
        quicksort(&mut arr[0..pivot]);
        quicksort(&mut arr[pivot + 1..]);
    }
    
    fn partition(arr: &mut [i32]) -> usize {
        let pivot = arr.len() - 1;
        let mut i = 0;
        
        for j in 0..pivot {
            if arr[j] <= arr[pivot] {
                arr.swap(i, j);
                i += 1;
            }
        }
        
        arr.swap(i, pivot);
        i
    }
    
    // 基数排序 O(d * n)，对整数更高效
    pub fn radix_sort(arr: &mut [u32]) {
        if arr.is_empty() {
            return;
        }
        
        let max_val = *arr.iter().max().unwrap();
        let mut exp = 1;
        
        while max_val / exp > 0 {
            counting_sort(arr, exp);
            exp *= 10;
        }
    }
    
    fn counting_sort(arr: &mut [u32], exp: u32) {
        let n = arr.len();
        let mut output = vec![0; n];
        let mut count = [0; 10];
        
        // 计算每个数字的出现次数
        for &num in arr.iter() {
            count[((num / exp) % 10) as usize] += 1;
        }
        
        // 转换为实际位置
        for i in 1..10 {
            count[i] += count[i - 1];
        }
        
        // 构建输出数组
        for &num in arr.iter().rev() {
            let digit = ((num / exp) % 10) as usize;
            output[count[digit] - 1] = num;
            count[digit] -= 1;
        }
        
        // 复制回原数组
        for (i, &val) in output.iter().enumerate() {
            arr[i] = val;
        }
    }
}

// 哈希表 vs 排序数组查找
pub mod lookup {
    use std::collections::HashMap;
    
    pub struct OptimizedLookup {
        // 小数据集使用排序数组
        sorted_pairs: Vec<(u32, String)>,
        // 大数据集使用哈希表
        hash_map: HashMap<u32, String>,
        threshold: usize,
    }
    
    impl OptimizedLookup {
        pub fn new(threshold: usize) -> Self {
            OptimizedLookup {
                sorted_pairs: Vec::new(),
                hash_map: HashMap::new(),
                threshold,
            }
        }
        
        pub fn insert(&mut self, key: u32, value: String) {
            if self.sorted_pairs.len() < self.threshold {
                // 使用排序数组
                match self.sorted_pairs.binary_search_by_key(&key, |&(k, _)| k) {
                    Ok(pos) => self.sorted_pairs[pos].1 = value,
                    Err(pos) => self.sorted_pairs.insert(pos, (key, value)),
                }
            } else {
                // 切换到哈希表
                if !self.sorted_pairs.is_empty() {
                    for (k, v) in self.sorted_pairs.drain(..) {
                        self.hash_map.insert(k, v);
                    }
                }
                self.hash_map.insert(key, value);
            }
        }
        
        pub fn get(&self, key: u32) -> Option<&String> {
            if self.sorted_pairs.is_empty() {
                self.hash_map.get(&key)
            } else {
                self.sorted_pairs
                    .binary_search_by_key(&key, |&(k, _)| k)
                    .ok()
                    .map(|i| &self.sorted_pairs[i].1)
            }
        }
    }
}
}

缓存友好的数据访问

#![allow(unused)]
fn main() {
// 缓存友好的图像处理
pub struct ImageProcessor {
    width: usize,
    height: usize,
    data: Vec<u8>,
}

impl ImageProcessor {
    pub fn new(width: usize, height: usize) -> Self {
        ImageProcessor {
            width,
            height,
            data: vec![0; width * height * 4], // RGBA
        }
    }
    
    // 缓存友好的行优先访问
    pub fn process_rows(&mut self) {
        for y in 0..self.height {
            for x in 0..self.width {
                let idx = (y * self.width + x) * 4;
                // 顺序访问，缓存友好
                self.data[idx] = self.data[idx].saturating_add(10);     // R
                self.data[idx + 1] = self.data[idx + 1].saturating_add(10); // G
                self.data[idx + 2] = self.data[idx + 2].saturating_add(10); // B
                // Alpha 通道不变
            }
        }
    }
    
    // 分块处理，提高缓存局部性
    pub fn process_blocks(&mut self, block_size: usize) {
        for block_y in (0..self.height).step_by(block_size) {
            for block_x in (0..self.width).step_by(block_size) {
                let end_y = std::cmp::min(block_y + block_size, self.height);
                let end_x = std::cmp::min(block_x + block_size, self.width);
                
                // 处理块内数据
                for y in block_y..end_y {
                    for x in block_x..end_x {
                        let idx = (y * self.width + x) * 4;
                        self.data[idx] = self.data[idx].saturating_mul(2);
                    }
                }
            }
        }
    }
    
    // 向量化处理
    pub fn vectorized_process(&mut self) {
        // 批量处理，利用 CPU 向量指令
        for chunk in self.data.chunks_exact_mut(16) {
            for byte in chunk {
                *byte = byte.saturating_add(5);
            }
        }
    }
}
}

10.2.3 JavaScript 互操作优化

减少边界开销

#![allow(unused)]
fn main() {
// 批量数据传输
#[wasm_bindgen]
pub struct BatchProcessor {
    input_buffer: Vec<f32>,
    output_buffer: Vec<f32>,
}

#[wasm_bindgen]
impl BatchProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> BatchProcessor {
        BatchProcessor {
            input_buffer: Vec::new(),
            output_buffer: Vec::new(),
        }
    }
    
    // 批量添加数据，减少调用次数
    #[wasm_bindgen]
    pub fn add_batch(&mut self, data: &[f32]) {
        self.input_buffer.extend_from_slice(data);
    }
    
    // 批量处理所有数据
    #[wasm_bindgen]
    pub fn process_all(&mut self) -> Vec<f32> {
        self.output_buffer.clear();
        self.output_buffer.reserve(self.input_buffer.len());
        
        for &value in &self.input_buffer {
            self.output_buffer.push(value * value + 1.0);
        }
        
        self.input_buffer.clear();
        std::mem::take(&mut self.output_buffer)
    }
    
    // 直接内存访问，避免数据复制
    #[wasm_bindgen]
    pub fn get_input_ptr(&self) -> *const f32 {
        self.input_buffer.as_ptr()
    }
    
    #[wasm_bindgen]
    pub fn get_input_len(&self) -> usize {
        self.input_buffer.len()
    }
}
}

JavaScript 端优化:

class OptimizedWasmInterface {
    constructor(wasmModule) {
        this.module = wasmModule;
        this.processor = new wasmModule.BatchProcessor();
        this.inputBuffer = new Float32Array(1024);
        this.bufferIndex = 0;
    }
    
    // 批量处理，减少 WASM 调用开销
    addValue(value) {
        this.inputBuffer[this.bufferIndex++] = value;
        
        // 缓冲区满时批量发送
        if (this.bufferIndex >= this.inputBuffer.length) {
            this.flush();
        }
    }
    
    flush() {
        if (this.bufferIndex > 0) {
            const data = this.inputBuffer.subarray(0, this.bufferIndex);
            this.processor.add_batch(data);
            this.bufferIndex = 0;
        }
    }
    
    // 直接内存访问，避免数据复制
    getResults() {
        this.flush();
        
        // 使用 WASM 内存视图直接访问数据
        const ptr = this.processor.get_input_ptr();
        const len = this.processor.get_input_len();
        const memory = new Float32Array(
            this.module.memory.buffer, 
            ptr, 
            len
        );
        
        return this.processor.process_all();
    }
    
    // 使用 Web Workers 进行并行处理
    async processInWorker(data) {
        return new Promise((resolve, reject) => {
            const worker = new Worker('wasm-worker.js');
            
            worker.postMessage({
                type: 'process',
                data: data
            });
            
            worker.onmessage = (e) => {
                if (e.data.type === 'result') {
                    resolve(e.data.result);
                    worker.terminate();
                } else if (e.data.type === 'error') {
                    reject(new Error(e.data.message));
                    worker.terminate();
                }
            };
        });
    }
}

10.3 性能监控与分析

10.3.1 性能测量工具

内置性能计数器

#![allow(unused)]
fn main() {
use std::time::Instant;

#[wasm_bindgen]
pub struct PerformanceMonitor {
    start_times: std::collections::HashMap<String, f64>,
    measurements: std::collections::HashMap<String, Vec<f64>>,
}

#[wasm_bindgen]
impl PerformanceMonitor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> PerformanceMonitor {
        PerformanceMonitor {
            start_times: std::collections::HashMap::new(),
            measurements: std::collections::HashMap::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn start_timer(&mut self, name: &str) {
        let timestamp = js_sys::Date::now();
        self.start_times.insert(name.to_string(), timestamp);
    }
    
    #[wasm_bindgen]
    pub fn end_timer(&mut self, name: &str) -> f64 {
        let end_time = js_sys::Date::now();
        if let Some(&start_time) = self.start_times.get(name) {
            let duration = end_time - start_time;
            
            self.measurements
                .entry(name.to_string())
                .or_insert_with(Vec::new)
                .push(duration);
            
            duration
        } else {
            0.0
        }
    }
    
    #[wasm_bindgen]
    pub fn get_average(&self, name: &str) -> f64 {
        if let Some(measurements) = self.measurements.get(name) {
            if measurements.is_empty() {
                0.0
            } else {
                measurements.iter().sum::<f64>() / measurements.len() as f64
            }
        } else {
            0.0
        }
    }
    
    #[wasm_bindgen]
    pub fn get_stats(&self, name: &str) -> String {
        if let Some(measurements) = self.measurements.get(name) {
            if measurements.is_empty() {
                return "No measurements".to_string();
            }
            
            let count = measurements.len();
            let sum: f64 = measurements.iter().sum();
            let avg = sum / count as f64;
            let min = measurements.iter().fold(f64::INFINITY, |a, &b| a.min(b));
            let max = measurements.iter().fold(f64::NEG_INFINITY, |a, &b| a.max(b));
            
            // 计算标准差
            let variance = measurements.iter()
                .map(|&x| (x - avg).powi(2))
                .sum::<f64>() / count as f64;
            let std_dev = variance.sqrt();
            
            format!(
                "Count: {}, Avg: {:.2}ms, Min: {:.2}ms, Max: {:.2}ms, StdDev: {:.2}ms",
                count, avg, min, max, std_dev
            )
        } else {
            "No data".to_string()
        }
    }
    
    #[wasm_bindgen]
    pub fn reset(&mut self) {
        self.start_times.clear();
        self.measurements.clear();
    }
}

// 自动计时宏
macro_rules! time_it {
    ($monitor:expr, $name:expr, $block:block) => {
        $monitor.start_timer($name);
        let result = $block;
        $monitor.end_timer($name);
        result
    };
}

// 使用示例
#[wasm_bindgen]
pub fn benchmark_algorithms(monitor: &mut PerformanceMonitor, data: &[i32]) -> String {
    let mut data_copy = data.to_vec();
    
    // 测试快速排序
    let mut quick_data = data_copy.clone();
    time_it!(monitor, "quicksort", {
        sorting::quicksort(&mut quick_data);
    });
    
    // 测试基数排序
    if data.iter().all(|&x| x >= 0) {
        let mut radix_data: Vec<u32> = data.iter().map(|&x| x as u32).collect();
        time_it!(monitor, "radix_sort", {
            sorting::radix_sort(&mut radix_data);
        });
    }
    
    format!(
        "QuickSort: {}\nRadixSort: {}",
        monitor.get_stats("quicksort"),
        monitor.get_stats("radix_sort")
    )
}
}

内存使用监控

#![allow(unused)]
fn main() {
#[wasm_bindgen]
pub struct MemoryMonitor {
    baseline: usize,
    samples: Vec<(f64, usize)>, // (timestamp, memory_usage)
}

#[wasm_bindgen]
impl MemoryMonitor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> MemoryMonitor {
        MemoryMonitor {
            baseline: ALLOCATOR.bytes_in_use(),
            samples: Vec::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn sample(&mut self) {
        let timestamp = js_sys::Date::now();
        let memory_usage = ALLOCATOR.bytes_in_use();
        self.samples.push((timestamp, memory_usage));
    }
    
    #[wasm_bindgen]
    pub fn get_peak_usage(&self) -> usize {
        self.samples.iter().map(|&(_, usage)| usage).max().unwrap_or(0)
    }
    
    #[wasm_bindgen]
    pub fn get_memory_growth(&self) -> i64 {
        if let Some(&(_, current)) = self.samples.last() {
            current as i64 - self.baseline as i64
        } else {
            0
        }
    }
    
    #[wasm_bindgen]
    pub fn detect_leaks(&self, threshold: f64) -> String {
        if self.samples.len() < 2 {
            return "Insufficient data".to_string();
        }
        
        let start = &self.samples[0];
        let end = &self.samples[self.samples.len() - 1];
        
        let time_diff = end.0 - start.0; // milliseconds
        let memory_diff = end.1 as i64 - start.1 as i64; // bytes
        
        if time_diff > 0.0 {
            let growth_rate = memory_diff as f64 / time_diff; // bytes per ms
            
            if growth_rate > threshold {
                format!(
                    "Potential memory leak detected! Growth rate: {:.2} bytes/ms",
                    growth_rate
                )
            } else {
                format!(
                    "Memory usage stable. Growth rate: {:.2} bytes/ms",
                    growth_rate
                )
            }
        } else {
            "Invalid time range".to_string()
        }
    }
    
    #[wasm_bindgen]
    pub fn clear_samples(&mut self) {
        self.samples.clear();
        self.baseline = ALLOCATOR.bytes_in_use();
    }
}
}

10.3.2 浏览器性能工具集成

Performance API 集成

class WasmPerformanceProfiler {
    constructor(wasmModule) {
        this.module = wasmModule;
        this.marks = new Map();
        this.measures = new Map();
    }
    
    // 使用 Performance API 进行精确测量
    mark(name) {
        const markName = `wasm-${name}`;
        performance.mark(markName);
        this.marks.set(name, markName);
    }
    
    measure(name, startName) {
        const measureName = `measure-${name}`;
        const startMarkName = this.marks.get(startName);
        
        if (startMarkName) {
            performance.measure(measureName, startMarkName);
            
            const entries = performance.getEntriesByName(measureName);
            if (entries.length > 0) {
                const duration = entries[entries.length - 1].duration;
                
                if (!this.measures.has(name)) {
                    this.measures.set(name, []);
                }
                this.measures.get(name).push(duration);
                
                return duration;
            }
        }
        return 0;
    }
    
    // 详细的性能报告
    getDetailedReport() {
        const report = {
            timing: {},
            memory: this.getMemoryInfo(),
            wasm: this.getWasmInfo()
        };
        
        // 收集所有测量数据
        for (const [name, measurements] of this.measures) {
            if (measurements.length > 0) {
                const sorted = [...measurements].sort((a, b) => a - b);
                report.timing[name] = {
                    count: measurements.length,
                    min: Math.min(...measurements),
                    max: Math.max(...measurements),
                    mean: measurements.reduce((a, b) => a + b) / measurements.length,
                    median: sorted[Math.floor(sorted.length / 2)],
                    p95: sorted[Math.floor(sorted.length * 0.95)],
                    p99: sorted[Math.floor(sorted.length * 0.99)]
                };
            }
        }
        
        return report;
    }
    
    // 内存信息
    getMemoryInfo() {
        const info = {
            jsHeapSizeLimit: 0,
            totalJSHeapSize: 0,
            usedJSHeapSize: 0,
            wasmMemoryPages: 0,
            wasmMemoryBytes: 0
        };
        
        // JavaScript 堆信息
        if (performance.memory) {
            info.jsHeapSizeLimit = performance.memory.jsHeapSizeLimit;
            info.totalJSHeapSize = performance.memory.totalJSHeapSize;
            info.usedJSHeapSize = performance.memory.usedJSHeapSize;
        }
        
        // WebAssembly 内存信息
        if (this.module.memory) {
            const pages = this.module.memory.buffer.byteLength / 65536;
            info.wasmMemoryPages = pages;
            info.wasmMemoryBytes = this.module.memory.buffer.byteLength;
        }
        
        return info;
    }
    
    // WebAssembly 特定信息
    getWasmInfo() {
        return {
            supportedFeatures: this.getSupportedFeatures(),
            compilationTime: this.getCompilationTime(),
            instantiationTime: this.getInstantiationTime()
        };
    }
    
    getSupportedFeatures() {
        const features = {
            bigInt: typeof BigInt !== 'undefined',
            bulkMemory: this.checkBulkMemorySupport(),
            multiValue: this.checkMultiValueSupport(),
            referenceTypes: this.checkReferenceTypesSupport(),
            simd: this.checkSimdSupport(),
            threads: this.checkThreadsSupport()
        };
        
        return features;
    }
    
    checkBulkMemorySupport() {
        try {
            new WebAssembly.Module(new Uint8Array([
                0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00,
                0x05, 0x03, 0x01, 0x00, 0x01, 0x0b, 0x07, 0x01,
                0x05, 0x00, 0x0b, 0x00, 0x00, 0x00, 0x0b
            ]));
            return true;
        } catch {
            return false;
        }
    }
    
    checkSimdSupport() {
        try {
            new WebAssembly.Module(new Uint8Array([
                0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00,
                0x01, 0x04, 0x01, 0x60, 0x00, 0x00, 0x03, 0x02,
                0x01, 0x00, 0x0a, 0x0a, 0x01, 0x08, 0x00, 0xfd,
                0x0c, 0x00, 0x00, 0x00, 0x00, 0x0b
            ]));
            return true;
        } catch {
            return false;
        }
    }
    
    // 更多特性检测方法...
    checkMultiValueSupport() { return false; }
    checkReferenceTypesSupport() { return false; }
    checkThreadsSupport() { return typeof SharedArrayBuffer !== 'undefined'; }
    
    getCompilationTime() {
        // 实际实现中需要在编译时测量
        return performance.getEntriesByType('measure')
            .filter(entry => entry.name.includes('wasm-compile'))
            .map(entry => entry.duration);
    }
    
    getInstantiationTime() {
        // 实际实现中需要在实例化时测量
        return performance.getEntriesByType('measure')
            .filter(entry => entry.name.includes('wasm-instantiate'))
            .map(entry => entry.duration);
    }
    
    // 生成性能报告
    generateReport(format = 'json') {
        const report = this.getDetailedReport();
        
        if (format === 'json') {
            return JSON.stringify(report, null, 2);
        } else if (format === 'html') {
            return this.generateHtmlReport(report);
        } else if (format === 'csv') {
            return this.generateCsvReport(report);
        }
        
        return report;
    }
    
    generateHtmlReport(report) {
        let html = `
        <h2>WebAssembly 性能报告</h2>
        <h3>执行时间统计</h3>
        <table border="1">
            <tr><th>操作</th><th>次数</th><th>平均时间</th><th>最小时间</th><th>最大时间</th><th>P95</th></tr>
        `;
        
        for (const [name, stats] of Object.entries(report.timing)) {
            html += `
            <tr>
                <td>${name}</td>
                <td>${stats.count}</td>
                <td>${stats.mean.toFixed(2)}ms</td>
                <td>${stats.min.toFixed(2)}ms</td>
                <td>${stats.max.toFixed(2)}ms</td>
                <td>${stats.p95.toFixed(2)}ms</td>
            </tr>
            `;
        }
        
        html += `
        </table>
        <h3>内存使用情况</h3>
        <ul>
            <li>JS 堆大小限制: ${(report.memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2)} MB</li>
            <li>总 JS 堆大小: ${(report.memory.totalJSHeapSize / 1024 / 1024).toFixed(2)} MB</li>
            <li>已用 JS 堆大小: ${(report.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)} MB</li>
            <li>WASM 内存页数: ${report.memory.wasmMemoryPages}</li>
            <li>WASM 内存大小: ${(report.memory.wasmMemoryBytes / 1024 / 1024).toFixed(2)} MB</li>
        </ul>
        `;
        
        return html;
    }
    
    // 清理性能数据
    clear() {
        this.marks.clear();
        this.measures.clear();
        performance.clearMarks();
        performance.clearMeasures();
    }
}

10.4 最佳实践

10.4.1 性能优化检查清单

编译时优化清单

• 编译器优化级别: 使用 -O3 或 opt-level = 3
• 链接时优化: 启用 LTO (Link Time Optimization)
• 代码大小优化: 根据需要使用 -Oz 或 opt-level = "z"
• 死代码消除: 确保启用 dead code elimination
• 内联优化: 适当使用 #[inline] 标记
• SIMD 指令: 启用目标 CPU 特性
• 数学优化: 使用快速数学选项（如适用）

运行时优化清单

• 内存分配: 最小化动态内存分配
• 对象池: 重用大对象避免频繁分配
• 缓存局部性: 优化数据访问模式
• 分支预测: 减少不可预测的分支
• 函数调用开销: 批量处理减少跨边界调用
• 数据布局: 优化结构体字段排序
• 算法复杂度: 选择最适合的算法和数据结构

监控和调试清单

• 性能测量: 集成性能监控代码
• 内存泄漏检测: 监控内存使用趋势
• 回归测试: 建立性能基准测试
• 浏览器兼容性: 测试不同浏览器的性能差异
• 移动设备优化: 在低性能设备上测试

10.4.2 常见性能陷阱

避免频繁的类型转换

#![allow(unused)]
fn main() {
// ❌ 错误示例：频繁转换
#[wasm_bindgen]
pub fn bad_string_processing(input: &str) -> String {
    let mut result = String::new();
    for c in input.chars() {
        // 每次循环都有字符串分配
        result = format!("{}{}", result, c.to_uppercase().collect::<String>());
    }
    result
}

// ✅ 正确示例：减少分配
#[wasm_bindgen]
pub fn good_string_processing(input: &str) -> String {
    let mut result = String::with_capacity(input.len());
    for c in input.chars() {
        // 直接追加到现有字符串
        result.extend(c.to_uppercase());
    }
    result
}
}

避免不必要的数据复制

#![allow(unused)]
fn main() {
// ❌ 错误示例：多次复制数据
#[wasm_bindgen]
pub fn bad_array_processing(data: Vec<f32>) -> Vec<f32> {
    let mut temp1 = data.clone(); // 不必要的复制
    let mut temp2 = temp1.clone(); // 又一次复制
    
    for value in &mut temp2 {
        *value *= 2.0;
    }
    
    temp2
}

// ✅ 正确示例：就地修改
#[wasm_bindgen]
pub fn good_array_processing(mut data: Vec<f32>) -> Vec<f32> {
    for value in &mut data {
        *value *= 2.0;
    }
    data // 移动而不是复制
}
}

合理使用缓存

#![allow(unused)]
fn main() {
use std::collections::HashMap;

// ❌ 错误示例：每次都重新计算
pub fn bad_fibonacci(n: u32) -> u64 {
    if n <= 1 {
        n as u64
    } else {
        bad_fibonacci(n - 1) + bad_fibonacci(n - 2)
    }
}

// ✅ 正确示例：使用记忆化
pub struct FibonacciCache {
    cache: HashMap<u32, u64>,
}

impl FibonacciCache {
    pub fn new() -> Self {
        let mut cache = HashMap::new();
        cache.insert(0, 0);
        cache.insert(1, 1);
        FibonacciCache { cache }
    }
    
    pub fn fibonacci(&mut self, n: u32) -> u64 {
        if let Some(&result) = self.cache.get(&n) {
            return result;
        }
        
        let result = self.fibonacci(n - 1) + self.fibonacci(n - 2);
        self.cache.insert(n, result);
        result
    }
}
}

10.4.3 性能优化案例研究

图像处理优化案例

#![allow(unused)]
fn main() {
// 案例：图像滤镜优化
pub struct OptimizedImageFilter {
    width: usize,
    height: usize,
    temp_buffer: Vec<f32>,
}

impl OptimizedImageFilter {
    pub fn new(width: usize, height: usize) -> Self {
        OptimizedImageFilter {
            width,
            height,
            temp_buffer: vec![0.0; width * height],
        }
    }
    
    // 优化的高斯模糊实现
    pub fn gaussian_blur(
        &mut self, 
        input: &[u8], 
        output: &mut [u8], 
        radius: f32
    ) {
        let sigma = radius / 3.0;
        let kernel_size = (radius * 6.0) as usize | 1; // 确保奇数
        let kernel = self.create_gaussian_kernel(kernel_size, sigma);
        
        // 分离式卷积：先水平后垂直
        self.horizontal_blur(input, &kernel);
        self.vertical_blur(output, &kernel);
    }
    
    fn create_gaussian_kernel(&self, size: usize, sigma: f32) -> Vec<f32> {
        let mut kernel = vec![0.0; size];
        let center = size / 2;
        let mut sum = 0.0;
        
        for (i, k) in kernel.iter_mut().enumerate() {
            let x = (i as i32 - center as i32) as f32;
            *k = (-x * x / (2.0 * sigma * sigma)).exp();
            sum += *k;
        }
        
        // 归一化
        for k in &mut kernel {
            *k /= sum;
        }
        
        kernel
    }
    
    fn horizontal_blur(&mut self, input: &[u8], kernel: &[f32]) {
        let radius = kernel.len() / 2;
        
        for y in 0..self.height {
            for x in 0..self.width {
                let mut sum = 0.0;
                
                for (i, &k) in kernel.iter().enumerate() {
                    let sample_x = (x as i32 + i as i32 - radius as i32)
                        .max(0)
                        .min(self.width as i32 - 1) as usize;
                    
                    sum += input[y * self.width + sample_x] as f32 * k;
                }
                
                self.temp_buffer[y * self.width + x] = sum;
            }
        }
    }
    
    fn vertical_blur(&self, output: &mut [u8], kernel: &[f32]) {
        let radius = kernel.len() / 2;
        
        for y in 0..self.height {
            for x in 0..self.width {
                let mut sum = 0.0;
                
                for (i, &k) in kernel.iter().enumerate() {
                    let sample_y = (y as i32 + i as i32 - radius as i32)
                        .max(0)
                        .min(self.height as i32 - 1) as usize;
                    
                    sum += self.temp_buffer[sample_y * self.width + x] * k;
                }
                
                output[y * self.width + x] = sum.round().max(0.0).min(255.0) as u8;
            }
        }
    }
}
}

通过本章的学习，你应该掌握了 WebAssembly 性能优化的核心技术和最佳实践。从编译时优化到运行时调优，再到性能监控和分析，这些技术将帮助你构建高性能的 WebAssembly 应用。

记住，性能优化是一个持续的过程，需要：

1. 测量优先：始终基于实际测量结果进行优化
2. 找出瓶颈：专注于性能关键路径
3. 权衡取舍：在性能、可维护性和开发时间之间找到平衡
4. 持续监控：建立性能回归检测机制

在下一章中，我们将学习 WebAssembly 应用的调试技巧，这将帮助你更有效地诊断和解决性能问题。

第10章 练习题

10.1 编译时优化练习

练习 10.1.1 编译器优化配置实验 (15分)

题目: 创建一个性能测试项目，比较不同编译器优化级别对程序性能的影响。

要求：

• 实现一个计算密集型函数（如矩阵乘法）
• 使用不同的 opt-level 设置编译
• 测量并比较各种优化级别的性能差异
• 分析编译后的 WASM 文件大小变化

optimization-test/
├── Cargo.toml
├── src/
│   └── lib.rs
├── bench/
│   └── benchmark.js
└── build-all.sh

[package]
name = "optimization-test"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[dependencies.web-sys]
version = "0.3"
features = ["console", "Performance"]

# 不同优化级别配置
[profile.dev]
opt-level = 0

[profile.release]
opt-level = 3
lto = true
codegen-units = 1

[profile.size-opt]
inherits = "release"
opt-level = "s"
strip = true

[profile.ultra-size]
inherits = "release"
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"
strip = true

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 矩阵乘法 - 计算密集型操作
#[wasm_bindgen]
pub fn matrix_multiply(size: usize) -> f64 {
    let start = js_sys::Date::now();
    
    let mut a = vec![vec![1.0; size]; size];
    let mut b = vec![vec![2.0; size]; size];
    let mut c = vec![vec![0.0; size]; size];
    
    // 标准矩阵乘法
    for i in 0..size {
        for j in 0..size {
            for k in 0..size {
                c[i][j] += a[i][k] * b[k][j];
            }
        }
    }
    
    let end = js_sys::Date::now();
    
    // 验证结果
    let expected = (size as f64) * 2.0;
    console_log!("矩阵乘法结果: c[0][0] = {}, 期望值: {}", c[0][0], expected);
    
    end - start
}

// 优化的矩阵乘法 - 使用分块技术
#[wasm_bindgen]
pub fn optimized_matrix_multiply(size: usize, block_size: usize) -> f64 {
    let start = js_sys::Date::now();
    
    let mut a = vec![vec![1.0; size]; size];
    let mut b = vec![vec![2.0; size]; size];
    let mut c = vec![vec![0.0; size]; size];
    
    // 分块矩阵乘法
    for ii in (0..size).step_by(block_size) {
        for jj in (0..size).step_by(block_size) {
            for kk in (0..size).step_by(block_size) {
                let i_end = std::cmp::min(ii + block_size, size);
                let j_end = std::cmp::min(jj + block_size, size);
                let k_end = std::cmp::min(kk + block_size, size);
                
                for i in ii..i_end {
                    for j in jj..j_end {
                        let mut sum = 0.0;
                        for k in kk..k_end {
                            sum += a[i][k] * b[k][j];
                        }
                        c[i][j] += sum;
                    }
                }
            }
        }
    }
    
    let end = js_sys::Date::now();
    end - start
}

// 数学计算密集测试
#[wasm_bindgen]
pub fn compute_intensive_test(iterations: u32) -> f64 {
    let start = js_sys::Date::now();
    
    let mut result = 0.0;
    for i in 0..iterations {
        let x = i as f64;
        result += (x.sin() + x.cos()).sqrt() + x.ln().abs();
    }
    
    let end = js_sys::Date::now();
    
    console_log!("计算密集测试结果: {}", result);
    end - start
}

// 内存操作密集测试
#[wasm_bindgen]
pub fn memory_intensive_test(size: usize) -> f64 {
    let start = js_sys::Date::now();
    
    let mut data: Vec<i32> = (0..size).map(|i| i as i32).collect();
    
    // 多次排序操作
    for _ in 0..5 {
        data.sort();
        data.reverse();
    }
    
    let end = js_sys::Date::now();
    
    console_log!("内存操作测试 - 数据大小: {}, 首元素: {}", size, data[0]);
    end - start
}

// 递归计算测试
#[wasm_bindgen]
pub fn recursive_fibonacci(n: u32) -> u32 {
    if n <= 1 {
        n
    } else {
        recursive_fibonacci(n - 1) + recursive_fibonacci(n - 2)
    }
}

#[wasm_bindgen]
pub fn benchmark_fibonacci(n: u32) -> f64 {
    let start = js_sys::Date::now();
    let result = recursive_fibonacci(n);
    let end = js_sys::Date::now();
    
    console_log!("斐波那契 F({}) = {}", n, result);
    end - start
}

// 获取构建信息
#[wasm_bindgen]
pub fn get_build_info() -> String {
    format!(
        "Optimization Level: {}\nDebug: {}\nTarget: {}",
        option_env!("OPT_LEVEL").unwrap_or("unknown"),
        cfg!(debug_assertions),
        env!("TARGET")
    )
}
}

#!/bin/bash

echo "🏗️ 构建不同优化级别的 WebAssembly 模块..."

# 创建输出目录
mkdir -p builds

# 开发版本 (opt-level = 0)
echo "构建开发版本 (opt-level = 0)..."
wasm-pack build --dev --out-dir builds/dev --target web

# 发布版本 (opt-level = 3)
echo "构建发布版本 (opt-level = 3)..."
wasm-pack build --release --out-dir builds/release --target web

# 大小优化版本 (opt-level = s)
echo "构建大小优化版本 (opt-level = s)..."
CARGO_PROFILE_RELEASE_OPT_LEVEL=s wasm-pack build --release --out-dir builds/size-opt --target web

# 极限大小优化 (opt-level = z)
echo "构建极限大小优化版本 (opt-level = z)..."
CARGO_PROFILE_RELEASE_OPT_LEVEL=z CARGO_PROFILE_RELEASE_PANIC=abort \
wasm-pack build --release --out-dir builds/ultra-size --target web

# 分析文件大小
echo ""
echo "📊 文件大小分析:"
echo "开发版本:"
ls -lh builds/dev/*.wasm

echo "发布版本:"
ls -lh builds/release/*.wasm

echo "大小优化版本:"
ls -lh builds/size-opt/*.wasm

echo "极限大小优化版本:"
ls -lh builds/ultra-size/*.wasm

# 使用 wasm-opt 进一步优化
if command -v wasm-opt &> /dev/null; then
    echo ""
    echo "🔧 使用 wasm-opt 进行后处理优化..."
    
    mkdir -p builds/post-opt
    
    # 性能优化
    wasm-opt -O4 builds/release/optimization_test_bg.wasm \
        -o builds/post-opt/performance.wasm
    
    # 大小优化
    wasm-opt -Oz builds/release/optimization_test_bg.wasm \
        -o builds/post-opt/size.wasm
    
    echo "后处理优化文件大小:"
    ls -lh builds/post-opt/*.wasm
fi

echo "✅ 构建完成"

class OptimizationBenchmark {
    constructor() {
        this.results = new Map();
        this.modules = new Map();
    }

    async loadModules() {
        const builds = ['dev', 'release', 'size-opt', 'ultra-size'];
        
        for (const build of builds) {
            try {
                const module = await import(`../builds/${build}/optimization_test.js`);
                await module.default();
                this.modules.set(build, module);
                console.log(`✅ 加载 ${build} 版本成功`);
            } catch (error) {
                console.error(`❌ 加载 ${build} 版本失败:`, error);
            }
        }
    }

    async runBenchmarks() {
        const tests = [
            { name: 'matrix_multiply', fn: 'matrix_multiply', args: [100] },
            { name: 'optimized_matrix', fn: 'optimized_matrix_multiply', args: [100, 16] },
            { name: 'compute_intensive', fn: 'compute_intensive_test', args: [100000] },
            { name: 'memory_intensive', fn: 'memory_intensive_test', args: [10000] },
            { name: 'fibonacci', fn: 'benchmark_fibonacci', args: [35] }
        ];

        for (const [buildName, module] of this.modules) {
            console.log(`\n🧪 测试 ${buildName} 版本:`);
            console.log('构建信息:', module.get_build_info());
            
            const buildResults = {};
            
            for (const test of tests) {
                console.log(`\n  运行 ${test.name}...`);
                
                // 预热
                for (let i = 0; i < 3; i++) {
                    module[test.fn](...test.args);
                }
                
                // 正式测试
                const times = [];
                for (let i = 0; i < 5; i++) {
                    const time = module[test.fn](...test.args);
                    times.push(time);
                    await new Promise(resolve => setTimeout(resolve, 100));
                }
                
                const avgTime = times.reduce((a, b) => a + b) / times.length;
                const minTime = Math.min(...times);
                const maxTime = Math.max(...times);
                
                buildResults[test.name] = {
                    average: avgTime,
                    min: minTime,
                    max: maxTime,
                    times: times
                };
                
                console.log(`    平均: ${avgTime.toFixed(2)}ms, 最小: ${minTime.toFixed(2)}ms, 最大: ${maxTime.toFixed(2)}ms`);
            }
            
            this.results.set(buildName, buildResults);
        }
    }

    generateReport() {
        console.log('\n📊 性能对比报告');
        console.log('================');

        const testNames = ['matrix_multiply', 'optimized_matrix', 'compute_intensive', 'memory_intensive', 'fibonacci'];
        const buildNames = Array.from(this.modules.keys());

        // 创建表格
        console.log('\n测试项目\t\t' + buildNames.join('\t\t'));
        console.log('-'.repeat(80));

        for (const testName of testNames) {
            let row = testName.padEnd(20);
            
            const baseLine = this.results.get('dev')[testName]?.average || 1;
            
            for (const buildName of buildNames) {
                const result = this.results.get(buildName)[testName];
                if (result) {
                    const improvement = ((baseLine - result.average) / baseLine * 100).toFixed(1);
                    row += `\t${result.average.toFixed(2)}ms (${improvement}%)`;
                }
            }
            console.log(row);
        }

        // 生成 HTML 报告
        return this.generateHtmlReport();
    }

    generateHtmlReport() {
        const testNames = ['matrix_multiply', 'optimized_matrix', 'compute_intensive', 'memory_intensive', 'fibonacci'];
        const buildNames = Array.from(this.modules.keys());

        let html = `
        <html>
        <head>
            <title>WebAssembly 优化性能测试报告</title>
            <style>
                body { font-family: Arial, sans-serif; margin: 20px; }
                table { border-collapse: collapse; width: 100%; margin: 20px 0; }
                th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
                th { background-color: #f2f2f2; }
                .improvement { color: green; font-weight: bold; }
                .regression { color: red; font-weight: bold; }
                .chart { margin: 20px 0; }
            </style>
        </head>
        <body>
            <h1>WebAssembly 优化性能测试报告</h1>
            
            <h2>测试环境</h2>
            <ul>
                <li>浏览器: ${navigator.userAgent}</li>
                <li>测试时间: ${new Date().toLocaleString()}</li>
                <li>WebAssembly 支持: ${typeof WebAssembly !== 'undefined' ? '是' : '否'}</li>
            </ul>
            
            <h2>性能对比表</h2>
            <table>
                <tr>
                    <th>测试项目</th>
                    ${buildNames.map(name => `<th>${name}</th>`).join('')}
                </tr>
        `;

        for (const testName of testNames) {
            html += `<tr><td>${testName}</td>`;
            
            const baseLine = this.results.get('dev')[testName]?.average || 1;
            
            for (const buildName of buildNames) {
                const result = this.results.get(buildName)[testName];
                if (result) {
                    const improvement = ((baseLine - result.average) / baseLine * 100);
                    const className = improvement > 0 ? 'improvement' : (improvement < -5 ? 'regression' : '');
                    html += `<td class="${className}">${result.average.toFixed(2)}ms<br/>(${improvement.toFixed(1)}%)</td>`;
                } else {
                    html += '<td>N/A</td>';
                }
            }
            html += '</tr>';
        }

        html += `
            </table>
            
            <h2>优化建议</h2>
            <ul>
                <li><strong>开发阶段</strong>: 使用 dev 版本，编译速度快，便于调试</li>
                <li><strong>生产部署</strong>: 使用 release 版本，性能最佳</li>
                <li><strong>带宽限制</strong>: 使用 ultra-size 版本，文件最小</li>
                <li><strong>平衡选择</strong>: 使用 size-opt 版本，性能和大小的平衡</li>
            </ul>
            
            <h2>详细数据</h2>
            <pre>${JSON.stringify(Object.fromEntries(this.results), null, 2)}</pre>
        </body>
        </html>
        `;

        return html;
    }
}

// 运行基准测试
async function runOptimizationBenchmark() {
    const benchmark = new OptimizationBenchmark();
    
    console.log('🚀 开始优化基准测试...');
    
    await benchmark.loadModules();
    await benchmark.runBenchmarks();
    const report = benchmark.generateReport();
    
    // 保存报告
    const blob = new Blob([report], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.href = url;
    link.download = 'optimization-benchmark-report.html';
    link.textContent = '下载详细报告';
    document.body.appendChild(link);
    
    console.log('✅ 基准测试完成');
}

// 自动运行测试
if (typeof window !== 'undefined') {
    window.runOptimizationBenchmark = runOptimizationBenchmark;
    console.log('调用 runOptimizationBenchmark() 开始测试');
}

练习 10.1.2 SIMD 优化实践 (20分)

题目: 实现一个图像处理库，使用 SIMD 指令优化图像操作性能。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

#[cfg(target_arch = "wasm32")]
use std::arch::wasm32::*;

#[wasm_bindgen]
pub struct SimdImageProcessor {
    width: usize,
    height: usize,
    data: Vec<u8>,
}

#[wasm_bindgen]
impl SimdImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: usize, height: usize) -> SimdImageProcessor {
        SimdImageProcessor {
            width,
            height,
            data: vec![0; width * height * 4], // RGBA
        }
    }

    #[wasm_bindgen]
    pub fn load_data(&mut self, data: &[u8]) {
        if data.len() == self.data.len() {
            self.data.copy_from_slice(data);
        }
    }

    #[wasm_bindgen]
    pub fn get_data(&self) -> Vec<u8> {
        self.data.clone()
    }

    // 传统标量实现 - 亮度调整
    #[wasm_bindgen]
    pub fn adjust_brightness_scalar(&mut self, factor: f32) -> f64 {
        let start = js_sys::Date::now();
        
        for i in (0..self.data.len()).step_by(4) {
            // 只处理 RGB，跳过 Alpha
            for j in 0..3 {
                let old_value = self.data[i + j] as f32;
                let new_value = (old_value * factor).min(255.0).max(0.0);
                self.data[i + j] = new_value as u8;
            }
        }
        
        js_sys::Date::now() - start
    }

    // SIMD 优化实现 - 亮度调整
    #[cfg(target_arch = "wasm32")]
    #[wasm_bindgen]
    pub fn adjust_brightness_simd(&mut self, factor: f32) -> f64 {
        let start = js_sys::Date::now();
        
        let factor_vec = f32x4_splat(factor);
        let max_vec = f32x4_splat(255.0);
        let zero_vec = f32x4_splat(0.0);
        
        let chunks = self.data.chunks_exact_mut(16); // 处理 4 个像素 (16 字节)
        let remainder = chunks.remainder();
        
        for chunk in chunks {
            // 加载 16 个字节到 SIMD 寄存器
            let pixels = v128_load(chunk.as_ptr() as *const v128);
            
            // 分离为 4 个像素的 RGBA 组件
            for pixel_group in 0..4 {
                let offset = pixel_group * 4;
                
                // 提取 RGB 值 (跳过 Alpha)
                let r = self.data[offset] as f32;
                let g = self.data[offset + 1] as f32;
                let b = self.data[offset + 2] as f32;
                let a = self.data[offset + 3] as f32;
                
                // 创建 SIMD 向量 [R, G, B, A]
                let rgba = f32x4(r, g, b, a);
                
                // 应用亮度调整（只对 RGB）
                let rgb_adjusted = f32x4_mul(rgba, factor_vec);
                let rgb_clamped = f32x4_min(f32x4_max(rgb_adjusted, zero_vec), max_vec);
                
                // 保持 Alpha 通道不变
                let final_rgba = f32x4_replace_lane::<3>(rgb_clamped, a);
                
                // 转换回 u8 并存储
                chunk[offset] = f32x4_extract_lane::<0>(final_rgba) as u8;
                chunk[offset + 1] = f32x4_extract_lane::<1>(final_rgba) as u8;
                chunk[offset + 2] = f32x4_extract_lane::<2>(final_rgba) as u8;
                chunk[offset + 3] = f32x4_extract_lane::<3>(final_rgba) as u8;
            }
        }
        
        // 处理剩余字节
        for i in (0..remainder.len()).step_by(4) {
            if i + 2 < remainder.len() {
                for j in 0..3 {
                    let old_value = remainder[i + j] as f32;
                    let new_value = (old_value * factor).min(255.0).max(0.0);
                    remainder[i + j] = new_value as u8;
                }
            }
        }
        
        js_sys::Date::now() - start
    }

    // 标量实现 - 灰度转换
    #[wasm_bindgen]
    pub fn grayscale_scalar(&mut self) -> f64 {
        let start = js_sys::Date::now();
        
        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 保持不变
        }
        
        js_sys::Date::now() - start
    }

    // SIMD 优化实现 - 灰度转换
    #[cfg(target_arch = "wasm32")]
    #[wasm_bindgen]
    pub fn grayscale_simd(&mut self) -> f64 {
        let start = js_sys::Date::now();
        
        // 灰度转换系数
        let r_coeff = f32x4_splat(0.299);
        let g_coeff = f32x4_splat(0.587);
        let b_coeff = f32x4_splat(0.114);
        
        for i in (0..self.data.len()).step_by(16) {
            if i + 15 < self.data.len() {
                // 处理 4 个像素
                for pixel in 0..4 {
                    let base = i + pixel * 4;
                    
                    let r = self.data[base] as f32;
                    let g = self.data[base + 1] as f32;
                    let b = self.data[base + 2] as f32;
                    let a = self.data[base + 3];
                    
                    // 使用 SIMD 计算灰度值
                    let rgb = f32x4(r, g, b, 0.0);
                    let coeffs = f32x4(0.299, 0.587, 0.114, 0.0);
                    let weighted = f32x4_mul(rgb, coeffs);
                    
                    // 水平求和得到灰度值
                    let gray = f32x4_extract_lane::<0>(weighted) + 
                              f32x4_extract_lane::<1>(weighted) + 
                              f32x4_extract_lane::<2>(weighted);
                    
                    let gray_u8 = gray as u8;
                    
                    self.data[base] = gray_u8;
                    self.data[base + 1] = gray_u8;
                    self.data[base + 2] = gray_u8;
                    self.data[base + 3] = a; // 保持 Alpha
                }
            }
        }
        
        js_sys::Date::now() - start
    }

    // 向量加法优化示例
    #[cfg(target_arch = "wasm32")]
    #[wasm_bindgen]
    pub fn vector_add_simd(&self, other: &[f32]) -> Vec<f32> {
        if other.len() % 4 != 0 {
            return vec![];
        }
        
        let mut result = vec![0.0f32; other.len()];
        let a_data = vec![1.0f32; other.len()]; // 模拟数据
        
        for i in (0..other.len()).step_by(4) {
            let a_vec = f32x4(a_data[i], a_data[i + 1], a_data[i + 2], a_data[i + 3]);
            let b_vec = f32x4(other[i], other[i + 1], other[i + 2], other[i + 3]);
            let sum_vec = f32x4_add(a_vec, b_vec);
            
            result[i] = f32x4_extract_lane::<0>(sum_vec);
            result[i + 1] = f32x4_extract_lane::<1>(sum_vec);
            result[i + 2] = f32x4_extract_lane::<2>(sum_vec);
            result[i + 3] = f32x4_extract_lane::<3>(sum_vec);
        }
        
        result
    }

    // 基准测试比较
    #[wasm_bindgen]
    pub fn benchmark_operations(&mut self, iterations: u32) -> String {
        let mut results = Vec::new();
        
        // 备份原始数据
        let original_data = self.data.clone();
        
        // 测试亮度调整 - 标量版本
        let mut scalar_brightness_times = Vec::new();
        for _ in 0..iterations {
            self.data = original_data.clone();
            let time = self.adjust_brightness_scalar(1.2);
            scalar_brightness_times.push(time);
        }
        
        // 测试亮度调整 - SIMD 版本
        #[cfg(target_arch = "wasm32")]
        let mut simd_brightness_times = Vec::new();
        #[cfg(target_arch = "wasm32")]
        for _ in 0..iterations {
            self.data = original_data.clone();
            let time = self.adjust_brightness_simd(1.2);
            simd_brightness_times.push(time);
        }
        
        // 测试灰度转换 - 标量版本
        let mut scalar_grayscale_times = Vec::new();
        for _ in 0..iterations {
            self.data = original_data.clone();
            let time = self.grayscale_scalar();
            scalar_grayscale_times.push(time);
        }
        
        // 测试灰度转换 - SIMD 版本
        #[cfg(target_arch = "wasm32")]
        let mut simd_grayscale_times = Vec::new();
        #[cfg(target_arch = "wasm32")]
        for _ in 0..iterations {
            self.data = original_data.clone();
            let time = self.grayscale_simd();
            simd_grayscale_times.push(time);
        }
        
        // 计算平均时间
        let avg_scalar_brightness = scalar_brightness_times.iter().sum::<f64>() / iterations as f64;
        let avg_scalar_grayscale = scalar_grayscale_times.iter().sum::<f64>() / iterations as f64;
        
        #[cfg(target_arch = "wasm32")]
        let avg_simd_brightness = simd_brightness_times.iter().sum::<f64>() / iterations as f64;
        #[cfg(target_arch = "wasm32")]
        let avg_simd_grayscale = simd_grayscale_times.iter().sum::<f64>() / iterations as f64;
        
        #[cfg(not(target_arch = "wasm32"))]
        let avg_simd_brightness = 0.0;
        #[cfg(not(target_arch = "wasm32"))]
        let avg_simd_grayscale = 0.0;
        
        // 恢复原始数据
        self.data = original_data;
        
        format!(
            "SIMD 基准测试结果 ({}次迭代):\n\
            亮度调整:\n\
            - 标量版本: {:.2}ms\n\
            - SIMD版本: {:.2}ms\n\
            - 加速比: {:.2}x\n\
            灰度转换:\n\
            - 标量版本: {:.2}ms\n\
            - SIMD版本: {:.2}ms\n\
            - 加速比: {:.2}x",
            iterations,
            avg_scalar_brightness,
            avg_simd_brightness,
            if avg_simd_brightness > 0.0 { avg_scalar_brightness / avg_simd_brightness } else { 0.0 },
            avg_scalar_grayscale,
            avg_simd_grayscale,
            if avg_simd_grayscale > 0.0 { avg_scalar_grayscale / avg_simd_grayscale } else { 0.0 }
        )
    }
}

// 创建测试图像数据
#[wasm_bindgen]
pub fn create_test_image(width: usize, height: usize) -> Vec<u8> {
    let mut data = vec![0u8; width * height * 4];
    
    for y in 0..height {
        for x in 0..width {
            let index = (y * width + x) * 4;
            
            // 创建彩色渐变
            data[index] = ((x as f32 / width as f32) * 255.0) as u8;     // R
            data[index + 1] = ((y as f32 / height as f32) * 255.0) as u8; // G
            data[index + 2] = 128;                                        // B
            data[index + 3] = 255;                                        // A
        }
    }
    
    data
}
}

# 启用 SIMD 特性
[dependencies]
wasm-bindgen = { version = "0.2", features = ["serde-serialize"] }

# 编译时启用 SIMD
[profile.release]
opt-level = 3
lto = true
codegen-units = 1

# 目标特性配置
[profile.release.package."*"]
opt-level = 3

import init, { SimdImageProcessor, create_test_image } from './pkg/simd_optimization.js';

async function testSimdOptimization() {
    await init();
    
    console.log('🧪 SIMD 优化测试开始...');
    
    // 创建测试图像
    const width = 512;
    const height = 512;
    const testData = create_test_image(width, height);
    
    console.log(`创建 ${width}x${height} 测试图像 (${testData.length} 字节)`);
    
    // 创建处理器
    const processor = new SimdImageProcessor(width, height);
    processor.load_data(testData);
    
    // 运行基准测试
    const results = processor.benchmark_operations(10);
    console.log(results);
    
    // 视觉验证
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // 显示原始图像
    const originalImageData = new ImageData(new Uint8ClampedArray(testData), width, height);
    ctx.putImageData(originalImageData, 0, 0);
    document.body.appendChild(canvas);
    
    // 应用 SIMD 优化的亮度调整
    processor.adjust_brightness_simd(1.5);
    const processedData = processor.get_data();
    
    // 显示处理后的图像
    const processedCanvas = document.createElement('canvas');
    processedCanvas.width = width;
    processedCanvas.height = height;
    const processedCtx = processedCanvas.getContext('2d');
    const processedImageData = new ImageData(new Uint8ClampedArray(processedData), width, height);
    processedCtx.putImageData(processedImageData, 0, 0);
    document.body.appendChild(processedCanvas);
    
    console.log('✅ SIMD 优化测试完成');
}

// 检查 SIMD 支持
function checkSimdSupport() {
    try {
        // 尝试创建包含 SIMD 指令的简单模块
        const wasmCode = new Uint8Array([
            0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00,
            0x01, 0x04, 0x01, 0x60, 0x00, 0x00, 0x03, 0x02,
            0x01, 0x00, 0x0a, 0x0a, 0x01, 0x08, 0x00, 0xfd,
            0x0c, 0x00, 0x00, 0x00, 0x00, 0x0b
        ]);
        
        new WebAssembly.Module(wasmCode);
        console.log('✅ 浏览器支持 WebAssembly SIMD');
        return true;
    } catch (e) {
        console.log('❌ 浏览器不支持 WebAssembly SIMD');
        return false;
    }
}

// 运行测试
checkSimdSupport();
testSimdOptimization();

10.2 运行时优化练习

练习 10.2.1 内存池实现 (20分)

题目: 实现一个高效的内存池管理器，用于减少频繁内存分配的开销。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use std::collections::VecDeque;

// 固定大小内存池
#[wasm_bindgen]
pub struct FixedSizePool {
    pool: VecDeque<Vec<u8>>,
    block_size: usize,
    max_blocks: usize,
    allocations: usize,
    deallocations: usize,
}

#[wasm_bindgen]
impl FixedSizePool {
    #[wasm_bindgen(constructor)]
    pub fn new(block_size: usize, initial_blocks: usize, max_blocks: usize) -> FixedSizePool {
        let mut pool = VecDeque::with_capacity(max_blocks);
        
        // 预分配初始块
        for _ in 0..initial_blocks {
            pool.push_back(vec![0u8; block_size]);
        }
        
        FixedSizePool {
            pool,
            block_size,
            max_blocks,
            allocations: 0,
            deallocations: 0,
        }
    }
    
    #[wasm_bindgen]
    pub fn allocate(&mut self) -> Option<Vec<u8>> {
        self.allocations += 1;
        
        if let Some(block) = self.pool.pop_front() {
            Some(block)
        } else if self.allocations - self.deallocations < self.max_blocks {
            // 池为空但未达到最大限制，创建新块
            Some(vec![0u8; self.block_size])
        } else {
            // 池已满，分配失败
            None
        }
    }
    
    #[wasm_bindgen]
    pub fn deallocate(&mut self, mut block: Vec<u8>) {
        self.deallocations += 1;
        
        // 清零并返回池中
        block.fill(0);
        if self.pool.len() < self.max_blocks {
            self.pool.push_back(block);
        }
        // 如果池已满，块会被丢弃（由垃圾回收器处理）
    }
    
    #[wasm_bindgen]
    pub fn available_blocks(&self) -> usize {
        self.pool.len()
    }
    
    #[wasm_bindgen]
    pub fn get_stats(&self) -> String {
        format!(
            "Pool Stats:\n\
            Block Size: {} bytes\n\
            Available Blocks: {}\n\
            Total Allocations: {}\n\
            Total Deallocations: {}\n\
            Active Blocks: {}",
            self.block_size,
            self.pool.len(),
            self.allocations,
            self.deallocations,
            self.allocations - self.deallocations
        )
    }
}

// 多大小内存池
#[wasm_bindgen]
pub struct MultiSizePool {
    pools: Vec<FixedSizePool>,
    size_classes: Vec<usize>,
}

#[wasm_bindgen]
impl MultiSizePool {
    #[wasm_bindgen(constructor)]
    pub fn new() -> MultiSizePool {
        let size_classes = vec![64, 128, 256, 512, 1024, 2048, 4096];
        let mut pools = Vec::new();
        
        for &size in &size_classes {
            pools.push(FixedSizePool::new(size, 10, 100));
        }
        
        MultiSizePool {
            pools,
            size_classes,
        }
    }
    
    #[wasm_bindgen]
    pub fn allocate(&mut self, size: usize) -> Option<Vec<u8>> {
        // 找到适合的大小类别
        for (i, &class_size) in self.size_classes.iter().enumerate() {
            if size <= class_size {
                return self.pools[i].allocate();
            }
        }
        
        // 如果请求大小超过最大类别，直接分配
        if size > *self.size_classes.last().unwrap() {
            Some(vec![0u8; size])
        } else {
            None
        }
    }
    
    #[wasm_bindgen]
    pub fn deallocate(&mut self, block: Vec<u8>) {
        let size = block.len();
        
        // 找到对应的池
        for (i, &class_size) in self.size_classes.iter().enumerate() {
            if size == class_size {
                self.pools[i].deallocate(block);
                return;
            }
        }
        
        // 如果不匹配任何池，直接丢弃（让垃圾回收器处理）
    }
    
    #[wasm_bindgen]
    pub fn get_stats(&self) -> String {
        let mut stats = String::from("Multi-Size Pool Stats:\n");
        
        for (i, pool) in self.pools.iter().enumerate() {
            stats.push_str(&format!(
                "Size Class {}: {}\n",
                self.size_classes[i],
                pool.get_stats()
            ));
        }
        
        stats
    }
}

// 栈式分配器
#[wasm_bindgen]
pub struct StackAllocator {
    memory: Vec<u8>,
    top: usize,
    markers: Vec<usize>,
}

#[wasm_bindgen]
impl StackAllocator {
    #[wasm_bindgen(constructor)]
    pub fn new(size: usize) -> StackAllocator {
        StackAllocator {
            memory: vec![0u8; size],
            top: 0,
            markers: Vec::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn allocate(&mut self, size: usize, alignment: usize) -> Option<usize> {
        // 对齐地址
        let aligned_top = (self.top + alignment - 1) & !(alignment - 1);
        let new_top = aligned_top + size;
        
        if new_top <= self.memory.len() {
            self.top = new_top;
            Some(aligned_top)
        } else {
            None
        }
    }
    
    #[wasm_bindgen]
    pub fn push_marker(&mut self) {
        self.markers.push(self.top);
    }
    
    #[wasm_bindgen]
    pub fn pop_marker(&mut self) -> bool {
        if let Some(marker) = self.markers.pop() {
            self.top = marker;
            true
        } else {
            false
        }
    }
    
    #[wasm_bindgen]
    pub fn reset(&mut self) {
        self.top = 0;
        self.markers.clear();
    }
    
    #[wasm_bindgen]
    pub fn get_usage(&self) -> f64 {
        (self.top as f64 / self.memory.len() as f64) * 100.0
    }
    
    #[wasm_bindgen]
    pub fn write_data(&mut self, offset: usize, data: &[u8]) -> bool {
        if offset + data.len() <= self.top {
            self.memory[offset..offset + data.len()].copy_from_slice(data);
            true
        } else {
            false
        }
    }
    
    #[wasm_bindgen]
    pub fn read_data(&self, offset: usize, size: usize) -> Option<Vec<u8>> {
        if offset + size <= self.top {
            Some(self.memory[offset..offset + size].to_vec())
        } else {
            None
        }
    }
}

// 性能基准测试
#[wasm_bindgen]
pub fn benchmark_memory_allocation(iterations: u32) -> String {
    let start_time = js_sys::Date::now();
    
    // 标准分配测试
    let mut standard_allocs = Vec::new();
    let standard_start = js_sys::Date::now();
    
    for i in 0..iterations {
        let size = ((i % 8) + 1) * 256; // 不同大小
        standard_allocs.push(vec![0u8; size]);
    }
    
    let standard_time = js_sys::Date::now() - standard_start;
    
    // 清理
    standard_allocs.clear();
    
    // 内存池分配测试
    let mut pool = MultiSizePool::new();
    let mut pool_allocs = Vec::new();
    let pool_start = js_sys::Date::now();
    
    for i in 0..iterations {
        let size = ((i % 8) + 1) * 256;
        if let Some(block) = pool.allocate(size) {
            pool_allocs.push(block);
        }
    }
    
    let pool_time = js_sys::Date::now() - pool_start;
    
    // 清理池分配
    for block in pool_allocs {
        pool.deallocate(block);
    }
    
    // 栈分配器测试
    let mut stack = StackAllocator::new(iterations as usize * 2048);
    let stack_start = js_sys::Date::now();
    
    for i in 0..iterations {
        let size = ((i % 8) + 1) * 256;
        stack.allocate(size, 8);
    }
    
    let stack_time = js_sys::Date::now() - stack_start;
    
    let total_time = js_sys::Date::now() - start_time;
    
    format!(
        "内存分配基准测试 ({} 次迭代):\n\
        标准分配: {:.2}ms\n\
        内存池分配: {:.2}ms\n\
        栈分配器: {:.2}ms\n\
        总测试时间: {:.2}ms\n\
        \n性能提升:\n\
        内存池 vs 标准: {:.2}x\n\
        栈分配 vs 标准: {:.2}x",
        iterations,
        standard_time,
        pool_time,
        stack_time,
        total_time,
        if pool_time > 0.0 { standard_time / pool_time } else { 0.0 },
        if stack_time > 0.0 { standard_time / stack_time } else { 0.0 }
    )
}

// 真实场景测试 - 图像处理
#[wasm_bindgen]
pub struct PooledImageProcessor {
    width: usize,
    height: usize,
    buffer_pool: MultiSizePool,
}

#[wasm_bindgen]
impl PooledImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: usize, height: usize) -> PooledImageProcessor {
        PooledImageProcessor {
            width,
            height,
            buffer_pool: MultiSizePool::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn process_with_pool(&mut self, data: &[u8]) -> Option<Vec<u8>> {
        let buffer_size = self.width * self.height * 4;
        
        // 从池中获取缓冲区
        let mut temp_buffer = self.buffer_pool.allocate(buffer_size)?;
        let mut result_buffer = self.buffer_pool.allocate(buffer_size)?;
        
        // 复制输入数据
        temp_buffer[..data.len().min(buffer_size)].copy_from_slice(&data[..data.len().min(buffer_size)]);
        
        // 简单的图像处理 - 模糊
        for y in 1..self.height - 1 {
            for x in 1..self.width - 1 {
                let base = (y * self.width + x) * 4;
                
                for c in 0..3 { // RGB channels
                    let mut sum = 0u32;
                    let mut count = 0u32;
                    
                    // 3x3 邻域
                    for dy in -1..=1 {
                        for dx in -1..=1 {
                            let ny = (y as i32 + dy) as usize;
                            let nx = (x as i32 + dx) as usize;
                            let idx = (ny * self.width + nx) * 4 + c;
                            
                            sum += temp_buffer[idx] as u32;
                            count += 1;
                        }
                    }
                    
                    result_buffer[base + c] = (sum / count) as u8;
                }
                
                // 复制 Alpha 通道
                result_buffer[base + 3] = temp_buffer[base + 3];
            }
        }
        
        let result = result_buffer.clone();
        
        // 返回缓冲区到池
        self.buffer_pool.deallocate(temp_buffer);
        self.buffer_pool.deallocate(result_buffer);
        
        Some(result)
    }
    
    #[wasm_bindgen]
    pub fn process_without_pool(&self, data: &[u8]) -> Vec<u8> {
        let buffer_size = self.width * self.height * 4;
        
        // 每次都分配新缓冲区
        let mut temp_buffer = vec![0u8; buffer_size];
        let mut result_buffer = vec![0u8; buffer_size];
        
        temp_buffer[..data.len().min(buffer_size)].copy_from_slice(&data[..data.len().min(buffer_size)]);
        
        // 相同的处理逻辑
        for y in 1..self.height - 1 {
            for x in 1..self.width - 1 {
                let base = (y * self.width + x) * 4;
                
                for c in 0..3 {
                    let mut sum = 0u32;
                    let mut count = 0u32;
                    
                    for dy in -1..=1 {
                        for dx in -1..=1 {
                            let ny = (y as i32 + dy) as usize;
                            let nx = (x as i32 + dx) as usize;
                            let idx = (ny * self.width + nx) * 4 + c;
                            
                            sum += temp_buffer[idx] as u32;
                            count += 1;
                        }
                    }
                    
                    result_buffer[base + c] = (sum / count) as u8;
                }
                
                result_buffer[base + 3] = temp_buffer[base + 3];
            }
        }
        
        result_buffer
    }
    
    #[wasm_bindgen]
    pub fn benchmark_processing(&mut self, data: &[u8], iterations: u32) -> String {
        // 预热
        for _ in 0..3 {
            self.process_with_pool(data);
            self.process_without_pool(data);
        }
        
        // 测试不使用内存池
        let without_pool_start = js_sys::Date::now();
        for _ in 0..iterations {
            self.process_without_pool(data);
        }
        let without_pool_time = js_sys::Date::now() - without_pool_start;
        
        // 测试使用内存池
        let with_pool_start = js_sys::Date::now();
        for _ in 0..iterations {
            self.process_with_pool(data);
        }
        let with_pool_time = js_sys::Date::now() - with_pool_start;
        
        format!(
            "图像处理基准测试 ({} 次迭代):\n\
            不使用内存池: {:.2}ms\n\
            使用内存池: {:.2}ms\n\
            性能提升: {:.2}x\n\
            \n{}",
            iterations,
            without_pool_time,
            with_pool_time,
            if with_pool_time > 0.0 { without_pool_time / with_pool_time } else { 0.0 },
            self.buffer_pool.get_stats()
        )
    }
}
}

练习 10.2.2 缓存优化策略 (15分)

题目: 实现并比较不同的缓存策略对数据访问性能的影响。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use std::collections::{HashMap, VecDeque};

// LRU (Least Recently Used) 缓存
#[wasm_bindgen]
pub struct LruCache {
    capacity: usize,
    cache: HashMap<u32, String>,
    order: VecDeque<u32>,
    hits: usize,
    misses: usize,
}

#[wasm_bindgen]
impl LruCache {
    #[wasm_bindgen(constructor)]
    pub fn new(capacity: usize) -> LruCache {
        LruCache {
            capacity,
            cache: HashMap::with_capacity(capacity),
            order: VecDeque::with_capacity(capacity),
            hits: 0,
            misses: 0,
        }
    }
    
    #[wasm_bindgen]
    pub fn get(&mut self, key: u32) -> Option<String> {
        if let Some(value) = self.cache.get(&key) {
            self.hits += 1;
            // 移动到最前面（最近使用）
            self.order.retain(|&x| x != key);
            self.order.push_front(key);
            Some(value.clone())
        } else {
            self.misses += 1;
            None
        }
    }
    
    #[wasm_bindgen]
    pub fn put(&mut self, key: u32, value: String) {
        if self.cache.contains_key(&key) {
            // 更新现有值
            self.cache.insert(key, value);
            self.order.retain(|&x| x != key);
            self.order.push_front(key);
        } else {
            // 插入新值
            if self.cache.len() >= self.capacity {
                // 移除最久未使用的项
                if let Some(lru_key) = self.order.pop_back() {
                    self.cache.remove(&lru_key);
                }
            }
            
            self.cache.insert(key, value);
            self.order.push_front(key);
        }
    }
    
    #[wasm_bindgen]
    pub fn hit_rate(&self) -> f64 {
        let total = self.hits + self.misses;
        if total > 0 {
            self.hits as f64 / total as f64
        } else {
            0.0
        }
    }
    
    #[wasm_bindgen]
    pub fn get_stats(&self) -> String {
        format!(
            "LRU Cache Stats:\n\
            Capacity: {}\n\
            Current Size: {}\n\
            Hits: {}\n\
            Misses: {}\n\
            Hit Rate: {:.2}%",
            self.capacity,
            self.cache.len(),
            self.hits,
            self.misses,
            self.hit_rate() * 100.0
        )
    }
    
    #[wasm_bindgen]
    pub fn clear(&mut self) {
        self.cache.clear();
        self.order.clear();
        self.hits = 0;
        self.misses = 0;
    }
}

// LFU (Least Frequently Used) 缓存
#[wasm_bindgen]
pub struct LfuCache {
    capacity: usize,
    cache: HashMap<u32, String>,
    frequencies: HashMap<u32, usize>,
    hits: usize,
    misses: usize,
}

#[wasm_bindgen]
impl LfuCache {
    #[wasm_bindgen(constructor)]
    pub fn new(capacity: usize) -> LfuCache {
        LfuCache {
            capacity,
            cache: HashMap::with_capacity(capacity),
            frequencies: HashMap::with_capacity(capacity),
            hits: 0,
            misses: 0,
        }
    }
    
    #[wasm_bindgen]
    pub fn get(&mut self, key: u32) -> Option<String> {
        if let Some(value) = self.cache.get(&key) {
            self.hits += 1;
            // 增加访问频率
            *self.frequencies.entry(key).or_insert(0) += 1;
            Some(value.clone())
        } else {
            self.misses += 1;
            None
        }
    }
    
    #[wasm_bindgen]
    pub fn put(&mut self, key: u32, value: String) {
        if self.cache.contains_key(&key) {
            // 更新现有值
            self.cache.insert(key, value);
            *self.frequencies.entry(key).or_insert(0) += 1;
        } else {
            // 插入新值
            if self.cache.len() >= self.capacity {
                // 找到频率最低的键
                if let Some((&lfu_key, _)) = self.frequencies.iter().min_by_key(|(_, &freq)| freq) {
                    self.cache.remove(&lfu_key);
                    self.frequencies.remove(&lfu_key);
                }
            }
            
            self.cache.insert(key, value);
            self.frequencies.insert(key, 1);
        }
    }
    
    #[wasm_bindgen]
    pub fn hit_rate(&self) -> f64 {
        let total = self.hits + self.misses;
        if total > 0 {
            self.hits as f64 / total as f64
        } else {
            0.0
        }
    }
    
    #[wasm_bindgen]
    pub fn get_stats(&self) -> String {
        format!(
            "LFU Cache Stats:\n\
            Capacity: {}\n\
            Current Size: {}\n\
            Hits: {}\n\
            Misses: {}\n\
            Hit Rate: {:.2}%",
            self.capacity,
            self.cache.len(),
            self.hits,
            self.misses,
            self.hit_rate() * 100.0
        )
    }
    
    #[wasm_bindgen]
    pub fn clear(&mut self) {
        self.cache.clear();
        self.frequencies.clear();
        self.hits = 0;
        self.misses = 0;
    }
}

// 简单的 FIFO 缓存
#[wasm_bindgen]
pub struct FifoCache {
    capacity: usize,
    cache: HashMap<u32, String>,
    order: VecDeque<u32>,
    hits: usize,
    misses: usize,
}

#[wasm_bindgen]
impl FifoCache {
    #[wasm_bindgen(constructor)]
    pub fn new(capacity: usize) -> FifoCache {
        FifoCache {
            capacity,
            cache: HashMap::with_capacity(capacity),
            order: VecDeque::with_capacity(capacity),
            hits: 0,
            misses: 0,
        }
    }
    
    #[wasm_bindgen]
    pub fn get(&mut self, key: u32) -> Option<String> {
        if let Some(value) = self.cache.get(&key) {
            self.hits += 1;
            Some(value.clone())
        } else {
            self.misses += 1;
            None
        }
    }
    
    #[wasm_bindgen]
    pub fn put(&mut self, key: u32, value: String) {
        if !self.cache.contains_key(&key) {
            if self.cache.len() >= self.capacity {
                // 移除最早插入的项
                if let Some(first_key) = self.order.pop_front() {
                    self.cache.remove(&first_key);
                }
            }
            self.order.push_back(key);
        }
        
        self.cache.insert(key, value);
    }
    
    #[wasm_bindgen]
    pub fn hit_rate(&self) -> f64 {
        let total = self.hits + self.misses;
        if total > 0 {
            self.hits as f64 / total as f64
        } else {
            0.0
        }
    }
    
    #[wasm_bindgen]
    pub fn get_stats(&self) -> String {
        format!(
            "FIFO Cache Stats:\n\
            Capacity: {}\n\
            Current Size: {}\n\
            Hits: {}\n\
            Misses: {}\n\
            Hit Rate: {:.2}%",
            self.capacity,
            self.cache.len(),
            self.hits,
            self.misses,
            self.hit_rate() * 100.0
        )
    }
    
    #[wasm_bindgen]
    pub fn clear(&mut self) {
        self.cache.clear();
        self.order.clear();
        self.hits = 0;
        self.misses = 0;
    }
}

// 缓存策略性能比较器
#[wasm_bindgen]
pub struct CacheBenchmark {
    lru: LruCache,
    lfu: LfuCache,
    fifo: FifoCache,
}

#[wasm_bindgen]
impl CacheBenchmark {
    #[wasm_bindgen(constructor)]
    pub fn new(cache_size: usize) -> CacheBenchmark {
        CacheBenchmark {
            lru: LruCache::new(cache_size),
            lfu: LfuCache::new(cache_size),
            fifo: FifoCache::new(cache_size),
        }
    }
    
    // 顺序访问模式测试
    #[wasm_bindgen]
    pub fn test_sequential_pattern(&mut self, range: u32, iterations: u32) -> String {
        self.clear_all();
        
        let start = js_sys::Date::now();
        
        // 预填充缓存
        for i in 0..range {
            let value = format!("value_{}", i);
            self.lru.put(i, value.clone());
            self.lfu.put(i, value.clone());
            self.fifo.put(i, value.clone());
        }
        
        // 顺序访问测试
        for _ in 0..iterations {
            for i in 0..range {
                self.lru.get(i);
                self.lfu.get(i);
                self.fifo.get(i);
            }
        }
        
        let end = js_sys::Date::now();
        
        format!(
            "顺序访问模式测试 (范围: {}, 迭代: {}, 时间: {:.2}ms):\n\
            {}\n\
            {}\n\
            {}",
            range, iterations, end - start,
            self.lru.get_stats(),
            self.lfu.get_stats(),
            self.fifo.get_stats()
        )
    }
    
    // 随机访问模式测试
    #[wasm_bindgen]
    pub fn test_random_pattern(&mut self, range: u32, iterations: u32) -> String {
        self.clear_all();
        
        let start = js_sys::Date::now();
        
        // 使用简单的线性同余生成器生成伪随机数
        let mut rng_state = 12345u32;
        
        for _ in 0..iterations {
            // 生成伪随机数
            rng_state = rng_state.wrapping_mul(1103515245).wrapping_add(12345);
            let key = rng_state % range;
            
            // 如果缓存未命中，则插入新值
            if self.lru.get(key).is_none() {
                let value = format!("value_{}", key);
                self.lru.put(key, value.clone());
                self.lfu.put(key, value.clone());
                self.fifo.put(key, value);
            }
        }
        
        let end = js_sys::Date::now();
        
        format!(
            "随机访问模式测试 (范围: {}, 迭代: {}, 时间: {:.2}ms):\n\
            {}\n\
            {}\n\
            {}",
            range, iterations, end - start,
            self.lru.get_stats(),
            self.lfu.get_stats(),
            self.fifo.get_stats()
        )
    }
    
    // 局部性访问模式测试（80/20 规则）
    #[wasm_bindgen]
    pub fn test_locality_pattern(&mut self, range: u32, iterations: u32) -> String {
        self.clear_all();
        
        let start = js_sys::Date::now();
        let hot_range = range / 5; // 20% 的数据
        
        let mut rng_state = 12345u32;
        
        for _ in 0..iterations {
            rng_state = rng_state.wrapping_mul(1103515245).wrapping_add(12345);
            
            let key = if (rng_state % 100) < 80 {
                // 80% 的时间访问热点数据
                rng_state % hot_range
            } else {
                // 20% 的时间访问其他数据
                hot_range + (rng_state % (range - hot_range))
            };
            
            if self.lru.get(key).is_none() {
                let value = format!("value_{}", key);
                self.lru.put(key, value.clone());
                self.lfu.put(key, value.clone());
                self.fifo.put(key, value);
            }
        }
        
        let end = js_sys::Date::now();
        
        format!(
            "局部性访问模式测试 (范围: {}, 迭代: {}, 时间: {:.2}ms):\n\
            {}\n\
            {}\n\
            {}",
            range, iterations, end - start,
            self.lru.get_stats(),
            self.lfu.get_stats(),
            self.fifo.get_stats()
        )
    }
    
    #[wasm_bindgen]
    pub fn clear_all(&mut self) {
        self.lru.clear();
        self.lfu.clear();
        self.fifo.clear();
    }
    
    #[wasm_bindgen]
    pub fn comprehensive_benchmark(&mut self) -> String {
        let mut results = String::new();
        
        results.push_str("=== 缓存策略综合性能测试 ===\n\n");
        
        // 测试 1: 顺序访问
        results.push_str(&self.test_sequential_pattern(100, 50));
        results.push_str("\n\n");
        
        // 测试 2: 随机访问
        results.push_str(&self.test_random_pattern(200, 1000));
        results.push_str("\n\n");
        
        // 测试 3: 局部性访问
        results.push_str(&self.test_locality_pattern(500, 2000));
        results.push_str("\n\n");
        
        results.push_str("=== 总结 ===\n");
        results.push_str("LRU: 适合具有时间局部性的访问模式\n");
        results.push_str("LFU: 适合具有频率差异的访问模式\n");
        results.push_str("FIFO: 简单实现，适合访问模式均匀的场景\n");
        
        results
    }
}
}

import init, { CacheBenchmark } from './pkg/cache_optimization.js';

async function testCacheStrategies() {
    await init();
    
    console.log('🧪 缓存策略性能测试开始...');
    
    // 创建不同大小的缓存进行测试
    const cacheSizes = [10, 50, 100];
    
    for (const size of cacheSizes) {
        console.log(`\n📊 测试缓存大小: ${size}`);
        
        const benchmark = new CacheBenchmark(size);
        const results = benchmark.comprehensive_benchmark();
        
        console.log(results);
        
        // 创建性能报告
        const reportDiv = document.createElement('div');
        reportDiv.innerHTML = `
            <h3>缓存大小: ${size}</h3>
            <pre>${results}</pre>
            <hr>
        `;
        document.body.appendChild(reportDiv);
    }
    
    console.log('✅ 缓存策略测试完成');
}

testCacheStrategies();

10.3 性能监控练习

练习 10.3.1 实时性能监控系统 (25分)

题目: 构建一个实时性能监控系统，能够跟踪 WebAssembly 应用的各项性能指标。

本章练习总结

本章练习涵盖了 WebAssembly 性能优化的关键技能：

🎯 学习目标达成

1. 编译时优化精通 - 掌握不同优化级别和 SIMD 指令优化
2. 运行时优化实践 - 实现内存池、缓存策略等高效算法
3. 性能监控能力 - 建立完整的性能测量和分析系统
4. 优化策略选择 - 能够根据具体场景选择最佳优化方案

📈 难度递进

• 基础练习 (15分) - 编译器配置、基本优化技术
• 进阶练习 (20分) - SIMD 优化、内存管理策略
• 高级练习 (25分) - 实时监控系统、综合性能分析

🔧 关键收获

1. 系统性优化思维 - 从编译时到运行时的全链路优化
2. 量化分析能力 - 基于实际测量数据进行优化决策
3. 工具使用熟练度 - 掌握各种性能分析和优化工具
4. 最佳实践应用 - 在实际项目中应用性能优化技术

通过这些练习，学习者将具备构建高性能 WebAssembly 应用的完整技能栈。

第11章 调试技巧

WebAssembly 应用的调试是开发过程中的重要环节。本章将详细介绍各种调试工具、技术和最佳实践，帮助你高效地诊断和解决 WebAssembly 应用中的问题。

11.1 调试环境搭建

11.1.1 浏览器开发者工具

现代浏览器都提供了强大的 WebAssembly 调试支持，Chrome DevTools 是其中最成熟的工具之一。

Chrome DevTools 配置

启用 WebAssembly 调试功能：

1. 打开 Chrome DevTools (F12)
2. 进入 Settings → Experiments
3. 启用以下功能：
   • “WebAssembly Debugging: Enable DWARF support”
   • “WebAssembly Debugging: Enable scope inspection”
   • “WebAssembly Debugging: Enable stack inspection”

调试界面说明：

// 加载带调试信息的 WASM 模块
async function loadWasmWithDebugInfo() {
  try {
    // 确保 WASM 文件包含调试符号
    const response = await fetch('debug_module.wasm');
    const wasmBytes = await response.arrayBuffer();
    
    // 加载时保留调试信息
    const wasmModule = await WebAssembly.instantiate(wasmBytes, {
      env: {
        debug_log: (value) => {
          console.log('WASM Debug:', value);
          // 在控制台中设置断点便于调试
          debugger;
        }
      }
    });
    
    return wasmModule.instance.exports;
  } catch (error) {
    console.error('WASM 加载失败:', error);
    throw error;
  }
}

// 调试辅助函数
function setupWasmDebugging(wasmExports) {
  // 包装 WASM 函数以添加调试信息
  const originalFunction = wasmExports.compute;
  
  wasmExports.compute = function(...args) {
    console.group('WASM Function Call: compute');
    console.log('Arguments:', args);
    console.time('execution_time');
    
    try {
      const result = originalFunction.apply(this, args);
      console.log('Result:', result);
      return result;
    } catch (error) {
      console.error('WASM Error:', error);
      throw error;
    } finally {
      console.timeEnd('execution_time');
      console.groupEnd();
    }
  };
}

Firefox Developer Edition

Firefox 也提供了出色的 WebAssembly 调试支持：

// Firefox 特定的调试配置
function setupFirefoxWasmDebugging() {
  // 启用 WebAssembly 基线编译器（便于调试）
  if (typeof WebAssembly !== 'undefined') {
    console.log('WebAssembly 支持检测:');
    console.log('- 基础支持:', !!WebAssembly.Module);
    console.log('- 流式编译:', !!WebAssembly.compileStreaming);
    console.log('- 实例化:', !!WebAssembly.instantiateStreaming);
    
    // 检查调试符号支持
    if (WebAssembly.Module.exports) {
      console.log('- 导出函数检查: 支持');
    }
  }
}

// 内存调试辅助
function debugWasmMemory(wasmInstance) {
  const memory = wasmInstance.exports.memory;
  
  return {
    // 查看内存使用情况
    getMemoryInfo() {
      const buffer = memory.buffer;
      return {
        byteLength: buffer.byteLength,
        pages: buffer.byteLength / 65536,
        maxPages: memory.maximum || 'unlimited'
      };
    },
    
    // 内存转储
    dumpMemory(offset = 0, length = 64) {
      const view = new Uint8Array(memory.buffer, offset, length);
      const hex = Array.from(view)
        .map(b => b.toString(16).padStart(2, '0'))
        .join(' ');
      console.log(`Memory dump at ${offset}:`, hex);
      return view;
    },
    
    // 监控内存增长
    watchMemoryGrowth() {
      let lastSize = memory.buffer.byteLength;
      
      const observer = setInterval(() => {
        const currentSize = memory.buffer.byteLength;
        if (currentSize !== lastSize) {
          console.log(`Memory grew: ${lastSize} → ${currentSize} bytes`);
          lastSize = currentSize;
        }
      }, 1000);
      
      return () => clearInterval(observer);
    }
  };
}

11.1.2 源码映射配置

源码映射让你能够在原始源代码级别进行调试，而不是在编译后的 WebAssembly 字节码级别。

DWARF 调试信息

Rust 项目配置：

# Cargo.toml
[package]
name = "wasm-debug-demo"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

# 调试配置
[profile.dev]
debug = true           # 启用调试符号
debug-assertions = true
overflow-checks = true
lto = false           # 调试时禁用 LTO
opt-level = 0         # 禁用优化便于调试

[profile.release-with-debug]
inherits = "release"
debug = true          # 发布版本也包含调试信息
strip = false         # 不剥离调试符号

[dependencies]
wasm-bindgen = { version = "0.2", features = ["serde-serialize"] }
console_error_panic_hook = "0.1"
wee_alloc = "0.4"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
  "Performance",
]

构建脚本配置：

#!/bin/bash
# build-debug.sh - 构建带调试信息的 WASM

# 设置 Rust 标志
export RUSTFLAGS="-C debuginfo=2 -C force-frame-pointers=yes"

# 使用 wasm-pack 构建
wasm-pack build \
  --target web \
  --out-dir pkg \
  --dev \
  --scope myorg \
  --debug

# 或者使用 cargo 直接构建
# cargo build --target wasm32-unknown-unknown --profile dev

# 验证调试信息
if command -v wasm-objdump &> /dev/null; then
  echo "检查调试段..."
  wasm-objdump -h pkg/wasm_debug_demo.wasm | grep -E "(debug|name)"
fi

# 生成人类可读的 WAT 文件
if command -v wasm2wat &> /dev/null; then
  echo "生成 WAT 文件..."
  wasm2wat pkg/wasm_debug_demo.wasm -o pkg/wasm_debug_demo.wat
fi

C/C++ 调试配置

Emscripten 调试构建：

# 调试版本编译
emcc -O0 -g4 \
     -s WASM=1 \
     -s MODULARIZE=1 \
     -s EXPORT_NAME="DebugModule" \
     -s ASSERTIONS=1 \
     -s SAFE_HEAP=1 \
     -s STACK_OVERFLOW_CHECK=2 \
     -s DEMANGLE_SUPPORT=1 \
     -s EXPORTED_FUNCTIONS='["_main", "_debug_function"]' \
     -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' \
     --source-map-base http://localhost:8080/ \
     input.c -o debug_output.js

# 高级调试选项
emcc -O0 -g4 \
     -s WASM=1 \
     -s ASSERTIONS=2 \
     -s SAFE_HEAP=1 \
     -s STACK_OVERFLOW_CHECK=2 \
     -s RUNTIME_DEBUG=1 \
     -s GL_DEBUG=1 \
     --profiling \
     --profiling-funcs \
     --emit-symbol-map \
     input.c -o advanced_debug.js

源码文件示例：

// debug_example.c
#include <stdio.h>
#include <stdlib.h>
#include <emscripten.h>

// 调试宏定义
#ifdef DEBUG
#define DBG_LOG(fmt, ...) printf("[DEBUG] " fmt "\n", ##__VA_ARGS__)
#else
#define DBG_LOG(fmt, ...)
#endif

// 带调试信息的函数
EMSCRIPTEN_KEEPALIVE
int debug_function(int a, int b) {
    DBG_LOG("debug_function called with a=%d, b=%d", a, b);
    
    // 人为添加断点位置
    int result = 0;
    
    if (a > 0) {
        DBG_LOG("a is positive");
        result += a * 2;
    }
    
    if (b > 0) {
        DBG_LOG("b is positive");  
        result += b * 3;
    }
    
    DBG_LOG("result = %d", result);
    return result;
}

// 内存调试辅助函数
EMSCRIPTEN_KEEPALIVE
void debug_memory_info() {
    size_t heap_size = EM_ASM_INT({
        return HEAP8.length;
    });
    
    printf("Heap size: %zu bytes\n", heap_size);
    
    // 显示栈信息
    EM_ASM({
        console.log('Stack pointer:', stackPointer);
        console.log('Stack max:', STACK_MAX);
    });
}

int main() {
    printf("Debug demo initialized\n");
    debug_memory_info();
    return 0;
}

11.1.3 调试工具扩展

VS Code WebAssembly 扩展

安装和配置：

// .vscode/settings.json
{
  "wasm.wabt.path": "/usr/local/bin",
  "wasm.showBinaryView": true,
  "wasm.showTextView": true,
  "files.associations": {
    "*.wat": "wasm",
    "*.wast": "wasm"
  },
  "debug.toolBarLocation": "docked",
  "debug.inlineValues": true
}

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch WebAssembly Debug",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/debug_server.js",
      "console": "integratedTerminal",
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}",
      "urlFilter": "http://localhost:*",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/src/*"
      }
    }
  ]
}

// .vscode/tasks.json  
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build WASM Debug",
      "type": "shell",
      "command": "./build-debug.sh",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": []
    },
    {
      "label": "Start Debug Server",
      "type": "shell", 
      "command": "node",
      "args": ["debug_server.js"],
      "group": "test",
      "isBackground": true
    }
  ]
}

11.2 断点调试技术

11.2.1 设置和管理断点

源码级别断点

在支持源码映射的环境中，你可以直接在原始代码中设置断点：

#![allow(unused)]
fn main() {
// src/lib.rs - Rust 源码示例
use wasm_bindgen::prelude::*;

// 导入 console.log 用于调试输出
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// 调试宏
macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

#[wasm_bindgen]
pub struct DebugCounter {
    value: i32,
    step: i32,
}

#[wasm_bindgen]
impl DebugCounter {
    #[wasm_bindgen(constructor)]
    pub fn new(initial: i32, step: i32) -> DebugCounter {
        console_log!("Creating DebugCounter: initial={}, step={}", initial, step);
        
        // 这里可以设置断点
        DebugCounter {
            value: initial,
            step,
        }
    }
    
    #[wasm_bindgen]
    pub fn increment(&mut self) -> i32 {
        console_log!("Before increment: value={}", self.value);
        
        // 断点位置 - 检查状态变化
        self.value += self.step;
        
        console_log!("After increment: value={}", self.value);
        
        // 条件断点示例
        if self.value > 100 {
            console_log!("Warning: value exceeded 100!");
            // 在这里设置条件断点
        }
        
        self.value
    }
    
    #[wasm_bindgen]
    pub fn reset(&mut self) {
        console_log!("Resetting counter from {} to 0", self.value);
        self.value = 0;
    }
    
    #[wasm_bindgen(getter)]
    pub fn value(&self) -> i32 {
        self.value
    }
}

// 复杂计算函数，便于调试
#[wasm_bindgen]
pub fn debug_complex_calculation(input: &[f32]) -> Vec<f32> {
    console_log!("Starting complex calculation with {} elements", input.len());
    
    let mut result = Vec::with_capacity(input.len());
    
    for (i, &value) in input.iter().enumerate() {
        // 逐步调试每个元素的处理
        console_log!("Processing element {}: {}", i, value);
        
        let processed = if value < 0.0 {
            console_log!("Negative value detected: {}", value);
            value.abs()
        } else if value > 1.0 {
            console_log!("Large value detected: {}", value);
            value.sqrt()
        } else {
            value * value
        };
        
        result.push(processed);
        
        // 检查异常值
        if processed.is_nan() || processed.is_infinite() {
            console_log!("WARNING: Invalid result at index {}: {}", i, processed);
        }
    }
    
    console_log!("Calculation completed, {} results", result.len());
    result
}
}

JavaScript 端断点辅助

// debug_helpers.js
class WasmDebugger {
    constructor(wasmInstance) {
        this.instance = wasmInstance;
        this.breakpoints = new Map();
        this.callStack = [];
        this.variableWatches = new Map();
    }
    
    // 函数调用跟踪
    traceFunction(functionName) {
        const originalFunction = this.instance[functionName];
        
        this.instance[functionName] = (...args) => {
            const callId = Date.now();
            
            console.group(`🔍 WASM Call: ${functionName} (${callId})`);
            console.log('Arguments:', args);
            console.time(`execution-${callId}`);
            
            this.callStack.push({
                name: functionName,
                args: args,
                timestamp: callId
            });
            
            try {
                const result = originalFunction.apply(this.instance, args);
                console.log('Result:', result);
                return result;
            } catch (error) {
                console.error('Error:', error);
                throw error;
            } finally {
                console.timeEnd(`execution-${callId}`);
                console.groupEnd();
                this.callStack.pop();
            }
        };
    }
    
    // 内存监控断点
    setMemoryBreakpoint(address, size, type = 'write') {
        const memory = this.instance.memory;
        const id = `mem_${address}_${size}`;
        
        // 创建内存视图
        const originalView = new Uint8Array(memory.buffer, address, size);
        const snapshot = new Uint8Array(originalView);
        
        const checkMemory = () => {
            const currentView = new Uint8Array(memory.buffer, address, size);
            
            for (let i = 0; i < size; i++) {
                if (currentView[i] !== snapshot[i]) {
                    console.log(`🚨 Memory ${type} at address ${address + i}:`);
                    console.log(`  Old value: 0x${snapshot[i].toString(16)}`);
                    console.log(`  New value: 0x${currentView[i].toString(16)}`);
                    
                    // 触发断点
                    debugger;
                    
                    // 更新快照
                    snapshot[i] = currentView[i];
                }
            }
        };
        
        this.breakpoints.set(id, setInterval(checkMemory, 100));
        console.log(`Memory breakpoint set at 0x${address.toString(16)}, size: ${size}`);
        
        return id;
    }
    
    // 变量监控
    watchVariable(getter, name) {
        let lastValue = getter();
        
        const watchId = setInterval(() => {
            const currentValue = getter();
            if (currentValue !== lastValue) {
                console.log(`📊 Variable '${name}' changed:`);
                console.log(`  From: ${lastValue}`);
                console.log(`  To: ${currentValue}`);
                
                // 记录变化历史
                if (!this.variableWatches.has(name)) {
                    this.variableWatches.set(name, []);
                }
                
                this.variableWatches.get(name).push({
                    timestamp: Date.now(),
                    oldValue: lastValue,
                    newValue: currentValue,
                    callStack: [...this.callStack]
                });
                
                lastValue = currentValue;
            }
        }, 50);
        
        return watchId;
    }
    
    // 清除断点
    clearBreakpoint(id) {
        if (this.breakpoints.has(id)) {
            clearInterval(this.breakpoints.get(id));
            this.breakpoints.delete(id);
            console.log(`Breakpoint ${id} cleared`);
        }
    }
    
    // 获取调试报告
    getDebugReport() {
        return {
            activeBreakpoints: Array.from(this.breakpoints.keys()),
            callStack: this.callStack,
            variableHistory: Object.fromEntries(this.variableWatches),
            memoryInfo: this.getMemoryInfo()
        };
    }
    
    getMemoryInfo() {
        if (!this.instance.memory) return null;
        
        const buffer = this.instance.memory.buffer;
        return {
            byteLength: buffer.byteLength,
            pages: buffer.byteLength / 65536,
            detached: buffer.detached || false
        };
    }
}

// 使用示例
async function setupDebugging() {
    const wasmModule = await import('./pkg/wasm_debug_demo.js');
    await wasmModule.default();
    
    const debugger = new WasmDebugger(wasmModule);
    
    // 跟踪特定函数
    debugger.traceFunction('debug_complex_calculation');
    
    // 创建计数器实例
    const counter = new wasmModule.DebugCounter(0, 5);
    
    // 监控计数器值
    const watchId = debugger.watchVariable(
        () => counter.value, 
        'counter.value'
    );
    
    // 设置内存断点（如果知道内存地址）
    // const memBreakpoint = debugger.setMemoryBreakpoint(0x1000, 16);
    
    // 测试代码
    console.log('Starting debug test...');
    
    for (let i = 0; i < 10; i++) {
        counter.increment();
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    // 复杂计算测试
    const testData = [0.5, -2.3, 1.8, 0.1, -0.9];
    const result = wasmModule.debug_complex_calculation(new Float32Array(testData));
    
    console.log('Debug test completed');
    console.log('Final report:', debugger.getDebugReport());
    
    return debugger;
}

11.2.2 条件断点和日志点

高级断点技术

#![allow(unused)]
fn main() {
// 带条件的调试代码
#[wasm_bindgen]
pub struct AdvancedDebugger {
    debug_enabled: bool,
    log_level: u32,
    breakpoint_conditions: std::collections::HashMap<String, bool>,
}

#[wasm_bindgen]
impl AdvancedDebugger {
    #[wasm_bindgen(constructor)]
    pub fn new(debug_enabled: bool) -> AdvancedDebugger {
        AdvancedDebugger {
            debug_enabled,
            log_level: 1,
            breakpoint_conditions: std::collections::HashMap::new(),
        }
    }
    
    // 条件调试日志
    fn debug_log(&self, level: u32, message: &str) {
        if self.debug_enabled && level >= self.log_level {
            let level_str = match level {
                0 => "TRACE",
                1 => "DEBUG", 
                2 => "INFO",
                3 => "WARN",
                4 => "ERROR",
                _ => "UNKNOWN",
            };
            console_log!("[{}] {}", level_str, message);
        }
    }
    
    // 条件断点辅助
    fn should_break(&self, condition_name: &str) -> bool {
        if !self.debug_enabled {
            return false;
        }
        
        // 检查断点条件
        self.breakpoint_conditions.get(condition_name)
            .copied()
            .unwrap_or(false)
    }
    
    #[wasm_bindgen]
    pub fn process_array(&mut self, data: &[i32]) -> Vec<i32> {
        self.debug_log(1, &format!("Processing array of {} elements", data.len()));
        
        let mut result = Vec::new();
        let mut error_count = 0;
        
        for (index, &value) in data.iter().enumerate() {
            self.debug_log(0, &format!("Processing element {}: {}", index, value));
            
            let processed = match value {
                v if v < 0 => {
                    self.debug_log(2, &format!("Negative value: {}", v));
                    
                    // 条件断点：遇到负数时
                    if self.should_break("negative_value") {
                        console_log!("🛑 Breakpoint: Negative value encountered at index {}", index);
                        // 这里会在浏览器中触发断点
                    }
                    
                    -v
                },
                v if v > 1000 => {
                    error_count += 1;
                    self.debug_log(3, &format!("Large value warning: {}", v));
                    
                    // 条件断点：错误计数达到阈值
                    if error_count > 3 && self.should_break("error_threshold") {
                        console_log!("🛑 Breakpoint: Error count exceeded threshold");
                    }
                    
                    1000
                },
                v => {
                    self.debug_log(0, &format!("Normal value: {}", v));
                    v * 2
                }
            };
            
            result.push(processed);
            
            // 性能监控断点
            if index % 100 == 0 && index > 0 {
                self.debug_log(1, &format!("Progress: {} elements processed", index));
                
                if self.should_break("progress_check") {
                    console_log!("🛑 Breakpoint: Progress checkpoint at {}", index);
                }
            }
        }
        
        self.debug_log(1, &format!("Array processing completed. {} errors encountered", error_count));
        result
    }
    
    #[wasm_bindgen]
    pub fn set_breakpoint_condition(&mut self, name: String, enabled: bool) {
        self.breakpoint_conditions.insert(name, enabled);
    }
    
    #[wasm_bindgen]
    pub fn set_log_level(&mut self, level: u32) {
        self.log_level = level;
        self.debug_log(1, &format!("Log level set to {}", level));
    }
}
}

JavaScript 条件断点管理

// 条件断点管理器
class ConditionalBreakpointManager {
    constructor() {
        this.conditions = new Map();
        this.logPoints = new Map();
        this.hitCounts = new Map();
    }
    
    // 设置条件断点
    setConditionalBreakpoint(name, condition, options = {}) {
        const config = {
            condition: condition,
            hitCountTarget: options.hitCountTarget || null,
            enabled: options.enabled !== false,
            logMessage: options.logMessage || null,
            onHit: options.onHit || (() => debugger)
        };
        
        this.conditions.set(name, config);
        this.hitCounts.set(name, 0);
        
        console.log(`Conditional breakpoint '${name}' set:`, config);
    }
    
    // 检查断点条件
    checkBreakpoint(name, context = {}) {
        const config = this.conditions.get(name);
        if (!config || !config.enabled) return false;
        
        // 增加命中次数
        const hitCount = this.hitCounts.get(name) + 1;
        this.hitCounts.set(name, hitCount);
        
        // 检查命中次数条件
        if (config.hitCountTarget && hitCount !== config.hitCountTarget) {
            return false;
        }
        
        // 检查条件表达式
        let conditionMet = true;
        if (config.condition) {
            try {
                // 安全地评估条件
                conditionMet = this.evaluateCondition(config.condition, context);
            } catch (error) {
                console.error(`Breakpoint condition error for '${name}':`, error);
                return false;
            }
        }
        
        if (conditionMet) {
            // 记录日志信息
            if (config.logMessage) {
                console.log(`🔍 Breakpoint '${name}' hit:`, 
                    this.interpolateLogMessage(config.logMessage, context));
            }
            
            // 执行命中处理
            config.onHit(context, hitCount);
            return true;
        }
        
        return false;
    }
    
    // 安全的条件评估
    evaluateCondition(condition, context) {
        // 创建安全的评估环境
        const safeContext = {
            ...context,
            // 添加常用的辅助函数
            Math: Math,
            console: console,
            Date: Date
        };
        
        // 简单的条件解析（生产环境应使用更安全的方式）
        const func = new Function(...Object.keys(safeContext), `return ${condition}`);
        return func(...Object.values(safeContext));
    }
    
    // 日志消息插值
    interpolateLogMessage(message, context) {
        return message.replace(/\{(\w+)\}/g, (match, key) => {
            return context[key] !== undefined ? context[key] : match;
        });
    }
    
    // 设置日志点（不中断执行）
    setLogPoint(name, message, condition = null) {
        this.logPoints.set(name, {
            message: message,
            condition: condition,
            enabled: true
        });
    }
    
    // 检查日志点
    checkLogPoint(name, context = {}) {
        const logPoint = this.logPoints.get(name);
        if (!logPoint || !logPoint.enabled) return;
        
        let shouldLog = true;
        if (logPoint.condition) {
            try {
                shouldLog = this.evaluateCondition(logPoint.condition, context);
            } catch (error) {
                console.error(`Log point condition error for '${name}':`, error);
                return;
            }
        }
        
        if (shouldLog) {
            console.log(`📝 LogPoint '${name}':`, 
                this.interpolateLogMessage(logPoint.message, context));
        }
    }
    
    // 获取断点统计
    getStatistics() {
        const stats = {
            breakpoints: {},
            logPoints: {},
            totalHits: 0
        };
        
        for (const [name, hitCount] of this.hitCounts) {
            stats.breakpoints[name] = {
                hitCount: hitCount,
                enabled: this.conditions.get(name)?.enabled || false
            };
            stats.totalHits += hitCount;
        }
        
        for (const [name, config] of this.logPoints) {
            stats.logPoints[name] = {
                enabled: config.enabled,
                message: config.message
            };
        }
        
        return stats;
    }
    
    // 清除所有断点
    clearAll() {
        this.conditions.clear();
        this.logPoints.clear();
        this.hitCounts.clear();
        console.log('All breakpoints and log points cleared');
    }
}

// 集成示例
async function demonstrateConditionalDebugging() {
    const breakpointManager = new ConditionalBreakpointManager();
    
    // 设置各种条件断点
    breakpointManager.setConditionalBreakpoint('negative_numbers', 'value < 0', {
        logMessage: 'Negative number detected: {value} at index {index}',
        onHit: (context) => {
            console.warn('Processing negative number:', context);
            debugger; // 实际断点
        }
    });
    
    breakpointManager.setConditionalBreakpoint('every_10th', 'index % 10 === 0 && index > 0', {
        hitCountTarget: 3, // 只在第3次命中时停止
        logMessage: 'Every 10th element checkpoint: index {index}'
    });
    
    breakpointManager.setLogPoint('processing_log', 
        'Processing element {index}: {value} -> {result}');
    
    // 模拟数据处理
    const testData = [-5, 3, -8, 12, 7, -1, 9, 15, -3, 6, 8, -2];
    
    for (let index = 0; index < testData.length; index++) {
        const value = testData[index];
        const result = Math.abs(value) * 2;
        
        const context = { index, value, result };
        
        // 检查断点
        breakpointManager.checkBreakpoint('negative_numbers', context);
        breakpointManager.checkBreakpoint('every_10th', context);
        
        // 检查日志点
        breakpointManager.checkLogPoint('processing_log', context);
        
        // 模拟处理延迟
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    console.log('Final statistics:', breakpointManager.getStatistics());
}

11.3 内存调试技术

11.3.1 内存泄漏检测

内存泄漏是 WebAssembly 应用中常见的问题，特别是在处理大量数据或长时间运行的应用中。

内存使用监控

#![allow(unused)]
fn main() {
// 内存监控和泄漏检测
use std::collections::HashMap;
use std::sync::atomic::{AtomicUsize, Ordering};

static ALLOCATION_COUNT: AtomicUsize = AtomicUsize::new(0);
static TOTAL_ALLOCATED: AtomicUsize = AtomicUsize::new(0);
static TOTAL_FREED: AtomicUsize = AtomicUsize::new(0);

#[wasm_bindgen]
pub struct MemoryLeakDetector {
    allocations: HashMap<usize, AllocationInfo>,
    next_id: usize,
    threshold_bytes: usize,
    monitoring_enabled: bool,
}

#[derive(Clone)]
struct AllocationInfo {
    size: usize,
    timestamp: f64,
    stack_trace: String,
}

#[wasm_bindgen]
impl MemoryLeakDetector {
    #[wasm_bindgen(constructor)]
    pub fn new(threshold_bytes: usize) -> MemoryLeakDetector {
        console_log!("Memory leak detector initialized with threshold: {} bytes", threshold_bytes);
        
        MemoryLeakDetector {
            allocations: HashMap::new(),
            next_id: 1,
            threshold_bytes,
            monitoring_enabled: true,
        }
    }
    
    // 记录内存分配
    #[wasm_bindgen]
    pub fn track_allocation(&mut self, size: usize) -> usize {
        if !self.monitoring_enabled {
            return 0;
        }
        
        let id = self.next_id;
        self.next_id += 1;
        
        let timestamp = js_sys::Date::now();
        let stack_trace = self.get_stack_trace();
        
        self.allocations.insert(id, AllocationInfo {
            size,
            timestamp,
            stack_trace,
        });
        
        ALLOCATION_COUNT.fetch_add(1, Ordering::Relaxed);
        TOTAL_ALLOCATED.fetch_add(size, Ordering::Relaxed);
        
        console_log!("Allocation tracked: ID={}, size={} bytes", id, size);
        
        // 检查是否超过阈值
        if self.get_current_usage() > self.threshold_bytes {
            console_log!("⚠️  Memory usage exceeded threshold: {} bytes", self.get_current_usage());
        }
        
        id
    }
    
    // 记录内存释放
    #[wasm_bindgen]
    pub fn track_deallocation(&mut self, id: usize) -> bool {
        if let Some(info) = self.allocations.remove(&id) {
            TOTAL_FREED.fetch_add(info.size, Ordering::Relaxed);
            console_log!("Deallocation tracked: ID={}, size={} bytes", id, info.size);
            true
        } else {
            console_log!("⚠️  Invalid deallocation attempt: ID={}", id);
            false
        }
    }
    
    // 获取当前内存使用量
    #[wasm_bindgen]
    pub fn get_current_usage(&self) -> usize {
        self.allocations.values().map(|info| info.size).sum()
    }
    
    // 检测潜在的内存泄漏
    #[wasm_bindgen]
    pub fn detect_leaks(&self, max_age_ms: f64) -> String {
        let current_time = js_sys::Date::now();
        let mut leak_report = String::new();
        let mut total_leaked = 0;
        let mut leak_count = 0;
        
        leak_report.push_str("🔍 Memory Leak Detection Report\n");
        leak_report.push_str(&format!("Current usage: {} bytes\n", self.get_current_usage()));
        leak_report.push_str(&format!("Total allocations: {}\n", ALLOCATION_COUNT.load(Ordering::Relaxed)));
        leak_report.push_str(&format!("Total allocated: {} bytes\n", TOTAL_ALLOCATED.load(Ordering::Relaxed)));
        leak_report.push_str(&format!("Total freed: {} bytes\n", TOTAL_FREED.load(Ordering::Relaxed)));
        leak_report.push_str("\n");
        
        for (id, info) in &self.allocations {
            let age = current_time - info.timestamp;
            if age > max_age_ms {
                leak_report.push_str(&format!(
                    "🚨 Potential leak - ID: {}, Size: {} bytes, Age: {:.1}s\n",
                    id, info.size, age / 1000.0
                ));
                leak_report.push_str(&format!("   Stack trace: {}\n", info.stack_trace));
                total_leaked += info.size;
                leak_count += 1;
            }
        }
        
        if leak_count > 0 {
            leak_report.push_str(&format!("\n💥 {} potential leaks found, {} bytes total\n", leak_count, total_leaked));
        } else {
            leak_report.push_str("\n✅ No memory leaks detected\n");
        }
        
        leak_report
    }
    
    // 获取内存使用统计
    #[wasm_bindgen]
    pub fn get_statistics(&self) -> String {
        let current_usage = self.get_current_usage();
        let allocation_count = self.allocations.len();
        
        // 按大小分组统计
        let mut size_buckets = HashMap::new();
        for info in self.allocations.values() {
            let bucket = match info.size {
                0..=1024 => "< 1KB",
                1025..=10240 => "1-10KB", 
                10241..=102400 => "10-100KB",
                _ => "> 100KB",
            };
            *size_buckets.entry(bucket).or_insert(0) += 1;
        }
        
        let mut stats = String::new();
        stats.push_str("📊 Memory Usage Statistics\n");
        stats.push_str(&format!("Active allocations: {}\n", allocation_count));
        stats.push_str(&format!("Current usage: {} bytes ({:.2} MB)\n", 
            current_usage, current_usage as f64 / 1024.0 / 1024.0));
        stats.push_str("\nSize distribution:\n");
        
        for (bucket, count) in size_buckets {
            stats.push_str(&format!("  {}: {} allocations\n", bucket, count));
        }
        
        stats
    }
    
    // 强制垃圾收集
    #[wasm_bindgen]
    pub fn force_cleanup(&mut self) {
        let before_count = self.allocations.len();
        let before_size = self.get_current_usage();
        
        // 移除所有分配记录（仅用于测试）
        self.allocations.clear();
        
        console_log!("Forced cleanup: {} allocations removed, {} bytes freed", 
            before_count, before_size);
    }
    
    fn get_stack_trace(&self) -> String {
        // 在真实应用中，这里会获取实际的调用栈
        // JavaScript 端可以提供更详细的栈跟踪
        format!("stack_trace_{}", js_sys::Date::now() as u64)
    }
    
    #[wasm_bindgen]
    pub fn enable_monitoring(&mut self, enabled: bool) {
        self.monitoring_enabled = enabled;
        console_log!("Memory monitoring {}", if enabled { "enabled" } else { "disabled" });
    }
}
}

JavaScript 端内存监控

// 内存监控工具
class WasmMemoryProfiler {
    constructor(wasmInstance) {
        this.instance = wasmInstance;
        this.samples = [];
        this.isMonitoring = false;
        this.sampleInterval = null;
        this.leakDetector = null;
        
        // 初始化内存泄漏检测器
        if (wasmInstance.MemoryLeakDetector) {
            this.leakDetector = new wasmInstance.MemoryLeakDetector(10 * 1024 * 1024); // 10MB 阈值
        }
    }
    
    // 开始内存监控
    startMonitoring(intervalMs = 1000) {
        if (this.isMonitoring) {
            console.warn('Memory monitoring already active');
            return;
        }
        
        this.isMonitoring = true;
        this.samples = [];
        
        console.log('🔍 Starting memory monitoring...');
        
        this.sampleInterval = setInterval(() => {
            this.takeSample();
        }, intervalMs);
        
        // 立即取一个样本
        this.takeSample();
    }
    
    // 停止内存监控
    stopMonitoring() {
        if (!this.isMonitoring) return;
        
        this.isMonitoring = false;
        
        if (this.sampleInterval) {
            clearInterval(this.sampleInterval);
            this.sampleInterval = null;
        }
        
        console.log('🛑 Memory monitoring stopped');
        console.log('Total samples collected:', this.samples.length);
    }
    
    // 获取内存样本
    takeSample() {
        const timestamp = performance.now();
        
        // JavaScript 堆信息
        const jsMemory = this.getJSMemoryInfo();
        
        // WebAssembly 内存信息
        const wasmMemory = this.getWasmMemoryInfo();
        
        // 系统内存信息（如果可用）
        const systemMemory = this.getSystemMemoryInfo();
        
        const sample = {
            timestamp,
            jsMemory,
            wasmMemory,
            systemMemory
        };
        
        this.samples.push(sample);
        
        // 检测内存泄漏
        this.checkForLeaks(sample);
        
        return sample;
    }
    
    // 获取 JavaScript 内存信息
    getJSMemoryInfo() {
        if (!performance.memory) {
            return null;
        }
        
        return {
            used: performance.memory.usedJSHeapSize,
            total: performance.memory.totalJSHeapSize,
            limit: performance.memory.jsHeapSizeLimit
        };
    }
    
    // 获取 WebAssembly 内存信息
    getWasmMemoryInfo() {
        if (!this.instance.memory) {
            return null;
        }
        
        const buffer = this.instance.memory.buffer;
        const pages = buffer.byteLength / 65536;
        
        return {
            byteLength: buffer.byteLength,
            pages: pages,
            maxPages: this.instance.memory.maximum || null,
            detached: buffer.detached || false
        };
    }
    
    // 获取系统内存信息
    getSystemMemoryInfo() {
        // 使用 Performance Observer API（如果可用）
        if ('memory' in navigator) {
            return {
                deviceMemory: navigator.deviceMemory, // GB
                available: navigator.deviceMemory * 1024 * 1024 * 1024 // 转换为字节
            };
        }
        
        return null;
    }
    
    // 内存泄漏检测
    checkForLeaks(currentSample) {
        if (this.samples.length < 10) return; // 需要足够的样本
        
        const recentSamples = this.samples.slice(-10);
        const growthRate = this.calculateGrowthRate(recentSamples);
        
        // 检测 JavaScript 内存增长
        if (currentSample.jsMemory && growthRate.js > 0.1) { // 10% 增长率阈值
            console.warn('🚨 Potential JS memory leak detected:', {
                growthRate: growthRate.js,
                currentUsage: currentSample.jsMemory.used
            });
        }
        
        // 检测 WebAssembly 内存增长
        if (currentSample.wasmMemory && growthRate.wasm > 0.1) {
            console.warn('🚨 Potential WASM memory leak detected:', {
                growthRate: growthRate.wasm,
                currentUsage: currentSample.wasmMemory.byteLength
            });
        }
    }
    
    // 计算内存增长率
    calculateGrowthRate(samples) {
        if (samples.length < 2) return { js: 0, wasm: 0 };
        
        const first = samples[0];
        const last = samples[samples.length - 1];
        const timeSpan = last.timestamp - first.timestamp;
        
        if (timeSpan <= 0) return { js: 0, wasm: 0 };
        
        let jsGrowthRate = 0;
        let wasmGrowthRate = 0;
        
        if (first.jsMemory && last.jsMemory) {
            const jsGrowth = last.jsMemory.used - first.jsMemory.used;
            jsGrowthRate = jsGrowth / first.jsMemory.used;
        }
        
        if (first.wasmMemory && last.wasmMemory) {
            const wasmGrowth = last.wasmMemory.byteLength - first.wasmMemory.byteLength;
            wasmGrowthRate = wasmGrowth / first.wasmMemory.byteLength;
        }
        
        return { js: jsGrowthRate, wasm: wasmGrowthRate };
    }
    
    // 生成内存报告
    generateReport() {
        if (this.samples.length === 0) {
            return 'No memory samples collected';
        }
        
        const report = {
            summary: this.generateSummary(),
            trends: this.analyzeTrends(),
            leaks: this.detectLeaks(),
            recommendations: this.generateRecommendations()
        };
        
        return report;
    }
    
    generateSummary() {
        const first = this.samples[0];
        const last = this.samples[this.samples.length - 1];
        const duration = (last.timestamp - first.timestamp) / 1000; // 秒
        
        return {
            duration: `${duration.toFixed(1)}s`,
            samples: this.samples.length,
            jsMemoryChange: this.calculateMemoryChange(first.jsMemory, last.jsMemory),
            wasmMemoryChange: this.calculateMemoryChange(first.wasmMemory, last.wasmMemory)
        };
    }
    
    calculateMemoryChange(first, last) {
        if (!first || !last) return null;
        
        const change = {
            absolute: last.used - first.used || last.byteLength - first.byteLength,
            percentage: ((last.used || last.byteLength) / (first.used || first.byteLength) - 1) * 100
        };
        
        return change;
    }
    
    analyzeTrends() {
        // 分析内存使用趋势
        const jsUsage = this.samples.map(s => s.jsMemory?.used || 0);
        const wasmUsage = this.samples.map(s => s.wasmMemory?.byteLength || 0);
        
        return {
            jsMemory: {
                min: Math.min(...jsUsage),
                max: Math.max(...jsUsage),
                avg: jsUsage.reduce((a, b) => a + b, 0) / jsUsage.length,
                trend: this.calculateTrend(jsUsage)
            },
            wasmMemory: {
                min: Math.min(...wasmUsage),
                max: Math.max(...wasmUsage),
                avg: wasmUsage.reduce((a, b) => a + b, 0) / wasmUsage.length,
                trend: this.calculateTrend(wasmUsage)
            }
        };
    }
    
    calculateTrend(values) {
        if (values.length < 2) return 'insufficient_data';
        
        const first = values[0];
        const last = values[values.length - 1];
        const change = (last - first) / first;
        
        if (change > 0.1) return 'increasing';
        if (change < -0.1) return 'decreasing';
        return 'stable';
    }
    
    detectLeaks() {
        // 使用 WASM 泄漏检测器
        if (this.leakDetector) {
            return this.leakDetector.detect_leaks(30000); // 30秒阈值
        }
        
        return 'Leak detector not available';
    }
    
    generateRecommendations() {
        const recommendations = [];
        const trends = this.analyzeTrends();
        
        if (trends.jsMemory.trend === 'increasing') {
            recommendations.push('Consider implementing object pooling for JavaScript objects');
            recommendations.push('Review event listener cleanup and closure usage');
        }
        
        if (trends.wasmMemory.trend === 'increasing') {
            recommendations.push('Check for memory leaks in WASM allocation/deallocation');
            recommendations.push('Consider implementing custom memory management');
        }
        
        const lastSample = this.samples[this.samples.length - 1];
        if (lastSample.jsMemory && lastSample.jsMemory.used / lastSample.jsMemory.limit > 0.8) {
            recommendations.push('JavaScript memory usage is approaching limit');
        }
        
        if (recommendations.length === 0) {
            recommendations.push('Memory usage appears healthy');
        }
        
        return recommendations;
    }
    
    // 导出数据为 CSV
    exportToCsv() {
        const headers = ['timestamp', 'js_used', 'js_total', 'wasm_bytes', 'wasm_pages'];
        const rows = [headers.join(',')];
        
        this.samples.forEach(sample => {
            const row = [
                sample.timestamp,
                sample.jsMemory?.used || 0,
                sample.jsMemory?.total || 0,
                sample.wasmMemory?.byteLength || 0,
                sample.wasmMemory?.pages || 0
            ];
            rows.push(row.join(','));
        });
        
        return rows.join('\n');
    }
}

// 使用示例
async function demonstrateMemoryProfiling() {
    const wasmModule = await import('./pkg/wasm_debug_demo.js');
    await wasmModule.default();
    
    const profiler = new WasmMemoryProfiler(wasmModule);
    
    // 开始监控
    profiler.startMonitoring(500); // 每500ms采样一次
    
    // 模拟内存使用
    const arrays = [];
    
    for (let i = 0; i < 20; i++) {
        // 创建大数组模拟内存分配
        const size = 100000 + Math.random() * 50000;
        const array = new Float32Array(size);
        array.fill(Math.random());
        
        arrays.push(array);
        
        console.log(`Created array ${i + 1} with ${size} elements`);
        
        // 偶尔释放一些数组
        if (i > 10 && Math.random() > 0.7) {
            arrays.splice(0, 1);
            console.log('Released an array');
        }
        
        await new Promise(resolve => setTimeout(resolve, 1000));
    }
    
    // 停止监控并生成报告
    setTimeout(() => {
        profiler.stopMonitoring();
        
        const report = profiler.generateReport();
        console.log('📊 Memory Profiling Report:', report);
        
        // 导出 CSV 数据
        const csvData = profiler.exportToCsv();
        console.log('📄 CSV Export:', csvData);
        
    }, 25000);
}

11.3.2 堆栈溢出检测

#![allow(unused)]
fn main() {
// 堆栈监控和溢出检测
#[wasm_bindgen]
pub struct StackMonitor {
    max_depth: u32,
    current_depth: u32,
    max_observed_depth: u32,
    stack_traces: Vec<String>,
    overflow_threshold: u32,
}

#[wasm_bindgen]
impl StackMonitor {
    #[wasm_bindgen(constructor)]
    pub fn new(max_depth: u32) -> StackMonitor {
        StackMonitor {
            max_depth,
            current_depth: 0,
            max_observed_depth: 0,
            stack_traces: Vec::new(),
            overflow_threshold: (max_depth as f32 * 0.9) as u32, // 90% 阈值
        }
    }
    
    // 进入函数时调用
    #[wasm_bindgen]
    pub fn enter_function(&mut self, function_name: &str) -> bool {
        self.current_depth += 1;
        
        if self.current_depth > self.max_observed_depth {
            self.max_observed_depth = self.current_depth;
        }
        
        // 记录函数调用
        self.stack_traces.push(function_name.to_string());
        
        // 检查是否接近溢出
        if self.current_depth >= self.overflow_threshold {
            console_log!("⚠️  Stack depth warning: {} (threshold: {})", 
                self.current_depth, self.overflow_threshold);
            
            if self.current_depth >= self.max_depth {
                console_log!("🚨 Stack overflow detected at depth: {}", self.current_depth);
                self.print_stack_trace();
                return false; // 表示应该停止递归
            }
        }
        
        true
    }
    
    // 退出函数时调用
    #[wasm_bindgen]
    pub fn exit_function(&mut self) {
        if self.current_depth > 0 {
            self.current_depth -= 1;
            self.stack_traces.pop();
        }
    }
    
    // 打印堆栈跟踪
    #[wasm_bindgen]
    pub fn print_stack_trace(&self) {
        console_log!("📋 Stack trace (depth: {}):", self.current_depth);
        for (i, func_name) in self.stack_traces.iter().enumerate() {
            console_log!("  {}: {}", i + 1, func_name);
        }
    }
    
    // 获取堆栈统计信息
    #[wasm_bindgen]
    pub fn get_stack_stats(&self) -> String {
        format!(
            "Current depth: {}, Max observed: {}, Max allowed: {}, Threshold: {}",
            self.current_depth, self.max_observed_depth, self.max_depth, self.overflow_threshold
        )
    }
    
    // 重置监控状态
    #[wasm_bindgen]
    pub fn reset(&mut self) {
        self.current_depth = 0;
        self.max_observed_depth = 0;
        self.stack_traces.clear();
    }
}

// 递归函数示例（带堆栈监控）
#[wasm_bindgen]
pub fn monitored_fibonacci(n: u32, monitor: &mut StackMonitor) -> u64 {
    if !monitor.enter_function(&format!("fibonacci({})", n)) {
        console_log!("🛑 Stopping recursion due to stack overflow risk");
        return 0; // 错误值
    }
    
    let result = if n <= 1 {
        n as u64
    } else {
        let a = monitored_fibonacci(n - 1, monitor);
        let b = monitored_fibonacci(n - 2, monitor);
        a + b
    };
    
    monitor.exit_function();
    result
}

// 栈使用优化示例
#[wasm_bindgen]
pub fn iterative_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 tail_recursive_factorial(n: u64, accumulator: u64, monitor: &mut StackMonitor) -> u64 {
    if !monitor.enter_function(&format!("factorial({}, acc={})", n, accumulator)) {
        return accumulator; // 返回当前累积值
    }
    
    let result = if n <= 1 {
        accumulator
    } else {
        tail_recursive_factorial(n - 1, n * accumulator, monitor)
    };
    
    monitor.exit_function();
    result
}
}

11.4 性能调试和分析

11.4.1 性能瓶颈识别

性能问题往往是最难调试的问题类型。我们需要专门的工具和技术来识别和解决性能瓶颈。

性能测量工具

#![allow(unused)]
fn main() {
// 性能分析器
use std::collections::HashMap;
use std::time::Instant;

#[wasm_bindgen]
pub struct PerformanceProfiler {
    timers: HashMap<String, f64>,
    counters: HashMap<String, u64>,
    measurements: HashMap<String, Vec<f64>>,
    memory_snapshots: Vec<MemorySnapshot>,
    profiling_enabled: bool,
}

#[derive(Clone)]
struct MemorySnapshot {
    timestamp: f64,
    heap_size: usize,
    stack_usage: usize,
}

#[wasm_bindgen]
impl PerformanceProfiler {
    #[wasm_bindgen(constructor)]
    pub fn new() -> PerformanceProfiler {
        PerformanceProfiler {
            timers: HashMap::new(),
            counters: HashMap::new(),
            measurements: HashMap::new(),
            memory_snapshots: Vec::new(),
            profiling_enabled: true,
        }
    }
    
    // 开始计时
    #[wasm_bindgen]
    pub fn start_timer(&mut self, name: &str) {
        if !self.profiling_enabled { return; }
        
        let timestamp = js_sys::Date::now();
        self.timers.insert(name.to_string(), timestamp);
    }
    
    // 结束计时并记录
    #[wasm_bindgen]
    pub fn end_timer(&mut self, name: &str) -> f64 {
        if !self.profiling_enabled { return 0.0; }
        
        let end_time = js_sys::Date::now();
        if let Some(&start_time) = self.timers.get(name) {
            let duration = end_time - start_time;
            
            // 记录测量结果
            self.measurements
                .entry(name.to_string())
                .or_insert_with(Vec::new)
                .push(duration);
            
            self.timers.remove(name);
            duration
        } else {
            console_log!("⚠️  Timer '{}' was not started", name);
            0.0
        }
    }
    
    // 增加计数器
    #[wasm_bindgen]
    pub fn increment_counter(&mut self, name: &str, value: u64) {
        if !self.profiling_enabled { return; }
        
        *self.counters.entry(name.to_string()).or_insert(0) += value;
    }
    
    // 记录内存快照
    #[wasm_bindgen]
    pub fn take_memory_snapshot(&mut self, heap_size: usize, stack_usage: usize) {
        if !self.profiling_enabled { return; }
        
        let snapshot = MemorySnapshot {
            timestamp: js_sys::Date::now(),
            heap_size,
            stack_usage,
        };
        
        self.memory_snapshots.push(snapshot);
    }
    
    // 生成性能报告
    #[wasm_bindgen]
    pub fn generate_report(&self) -> String {
        let mut report = String::new();
        
        report.push_str("🔬 Performance Analysis Report\n");
        report.push_str("================================\n\n");
        
        // 计时器统计
        if !self.measurements.is_empty() {
            report.push_str("⏱️  Timing Statistics:\n");
            for (name, measurements) in &self.measurements {
                if !measurements.is_empty() {
                    let count = measurements.len();
                    let total: f64 = measurements.iter().sum();
                    let avg = total / count as f64;
                    let min = measurements.iter().fold(f64::INFINITY, |a, &b| a.min(b));
                    let max = measurements.iter().fold(f64::NEG_INFINITY, |a, &b| a.max(b));
                    
                    // 计算百分位数
                    let mut sorted = measurements.clone();
                    sorted.sort_by(|a, b| a.partial_cmp(b).unwrap());
                    let p50 = sorted[count / 2];
                    let p95 = sorted[(count as f64 * 0.95) as usize];
                    let p99 = sorted[(count as f64 * 0.99) as usize];
                    
                    report.push_str(&format!(
                        "  {}: {} samples, avg: {:.2}ms, min: {:.2}ms, max: {:.2}ms, p50: {:.2}ms, p95: {:.2}ms, p99: {:.2}ms\n",
                        name, count, avg, min, max, p50, p95, p99
                    ));
                }
            }
            report.push_str("\n");
        }
        
        // 计数器统计
        if !self.counters.is_empty() {
            report.push_str("📊 Counter Statistics:\n");
            for (name, count) in &self.counters {
                report.push_str(&format!("  {}: {}\n", name, count));
            }
            report.push_str("\n");
        }
        
        // 内存使用分析
        if !self.memory_snapshots.is_empty() {
            report.push_str("💾 Memory Usage Analysis:\n");
            let heap_sizes: Vec<usize> = self.memory_snapshots.iter().map(|s| s.heap_size).collect();
            let stack_usages: Vec<usize> = self.memory_snapshots.iter().map(|s| s.stack_usage).collect();
            
            let heap_min = *heap_sizes.iter().min().unwrap();
            let heap_max = *heap_sizes.iter().max().unwrap();
            let heap_avg = heap_sizes.iter().sum::<usize>() / heap_sizes.len();
            
            let stack_min = *stack_usages.iter().min().unwrap();
            let stack_max = *stack_usages.iter().max().unwrap();
            let stack_avg = stack_usages.iter().sum::<usize>() / stack_usages.len();
            
            report.push_str(&format!(
                "  Heap: min: {} bytes, max: {} bytes, avg: {} bytes\n",
                heap_min, heap_max, heap_avg
            ));
            report.push_str(&format!(
                "  Stack: min: {} bytes, max: {} bytes, avg: {} bytes\n",
                stack_min, stack_max, stack_avg
            ));
            report.push_str("\n");
        }
        
        // 性能建议
        report.push_str("💡 Performance Recommendations:\n");
        report.push_str(&self.generate_recommendations());
        
        report
    }
    
    fn generate_recommendations(&self) -> String {
        let mut recommendations = String::new();
        
        // 分析计时数据给出建议
        for (name, measurements) in &self.measurements {
            if measurements.is_empty() { continue; }
            
            let avg = measurements.iter().sum::<f64>() / measurements.len() as f64;
            let mut sorted = measurements.clone();
            sorted.sort_by(|a, b| a.partial_cmp(b).unwrap());
            let p95 = sorted[(measurements.len() as f64 * 0.95) as usize];
            
            if avg > 100.0 {
                recommendations.push_str(&format!(
                    "  - '{}' has high average execution time ({:.2}ms). Consider optimization.\n",
                    name, avg
                ));
            }
            
            if p95 > avg * 2.0 {
                recommendations.push_str(&format!(
                    "  - '{}' shows high variance (P95: {:.2}ms vs Avg: {:.2}ms). Check for edge cases.\n",
                    name, p95, avg
                ));
            }
        }
        
        // 内存建议
        if !self.memory_snapshots.is_empty() {
            let heap_sizes: Vec<usize> = self.memory_snapshots.iter().map(|s| s.heap_size).collect();
            let first_heap = heap_sizes[0];
            let last_heap = heap_sizes[heap_sizes.len() - 1];
            
            if last_heap > first_heap * 2 {
                recommendations.push_str("  - Memory usage doubled during profiling. Check for memory leaks.\n");
            }
        }
        
        if recommendations.is_empty() {
            recommendations.push_str("  - No obvious performance issues detected.\n");
        }
        
        recommendations
    }
    
    // 清除所有数据
    #[wasm_bindgen]
    pub fn clear(&mut self) {
        self.timers.clear();
        self.counters.clear();
        self.measurements.clear();
        self.memory_snapshots.clear();
    }
    
    // 启用/禁用分析
    #[wasm_bindgen]
    pub fn set_enabled(&mut self, enabled: bool) {
        self.profiling_enabled = enabled;
    }
}

// 性能测试示例函数
#[wasm_bindgen]
pub fn performance_test_suite(profiler: &mut PerformanceProfiler) {
    // 测试1: 简单循环
    profiler.start_timer("simple_loop");
    let mut sum = 0;
    for i in 0..1000000 {
        sum += i;
    }
    profiler.end_timer("simple_loop");
    profiler.increment_counter("loop_iterations", 1000000);
    
    // 测试2: 内存分配
    profiler.start_timer("memory_allocation");
    let mut vectors = Vec::new();
    for _ in 0..1000 {
        vectors.push(vec![0; 1000]);
    }
    profiler.end_timer("memory_allocation");
    profiler.increment_counter("allocations", 1000);
    
    // 测试3: 数学计算
    profiler.start_timer("math_operations");
    let mut result = 1.0;
    for i in 1..10000 {
        result = (result * i as f64).sqrt();
    }
    profiler.end_timer("math_operations");
    profiler.increment_counter("math_ops", 10000);
    
    console_log!("Performance test completed. Sum: {}, Result: {:.6}", sum, result);
}
}

JavaScript 性能分析集成

// JavaScript 端性能分析
class WasmPerformanceAnalyzer {
    constructor(wasmModule) {
        this.wasmModule = wasmModule;
        this.profiler = null;
        this.observer = null;
        this.marks = new Map();
        this.isRecording = false;
    }
    
    // 初始化分析器
    async initialize() {
        if (this.wasmModule.PerformanceProfiler) {
            this.profiler = new this.wasmModule.PerformanceProfiler();
        }
        
        // 设置 Performance Observer
        if ('PerformanceObserver' in window) {
            this.observer = new PerformanceObserver((list) => {
                this.handlePerformanceEntries(list.getEntries());
            });
            
            this.observer.observe({ entryTypes: ['measure', 'navigation', 'paint'] });
        }
        
        console.log('🔬 Performance analyzer initialized');
    }
    
    // 开始性能记录
    startRecording() {
        this.isRecording = true;
        this.marks.clear();
        
        if (this.profiler) {
            this.profiler.clear();
        }
        
        // 标记开始
        performance.mark('wasm-analysis-start');
        console.log('🎬 Performance recording started');
    }
    
    // 停止性能记录
    stopRecording() {
        if (!this.isRecording) return;
        
        this.isRecording = false;
        performance.mark('wasm-analysis-end');
        performance.measure('total-analysis', 'wasm-analysis-start', 'wasm-analysis-end');
        
        console.log('🛑 Performance recording stopped');
    }
    
    // 处理性能条目
    handlePerformanceEntries(entries) {
        entries.forEach(entry => {
            if (entry.name.startsWith('wasm-')) {
                console.log(`📊 Performance entry: ${entry.name} - ${entry.duration}ms`);
            }
        });
    }
    
    // 包装函数进行性能测量
    wrapFunction(obj, funcName, category = 'general') {
        const originalFunc = obj[funcName];
        const analyzer = this;
        
        obj[funcName] = function(...args) {
            if (!analyzer.isRecording) {
                return originalFunc.apply(this, args);
            }
            
            const markName = `${category}-${funcName}`;
            const startMark = `${markName}-start`;
            const endMark = `${markName}-end`;
            
            // Performance API 标记
            performance.mark(startMark);
            
            // WASM 分析器计时
            if (analyzer.profiler) {
                analyzer.profiler.start_timer(markName);
            }
            
            try {
                const result = originalFunc.apply(this, args);
                
                // 如果是 Promise，等待完成
                if (result && typeof result.then === 'function') {
                    return result.finally(() => {
                        analyzer.endMeasurement(markName, startMark, endMark);
                    });
                } else {
                    analyzer.endMeasurement(markName, startMark, endMark);
                    return result;
                }
            } catch (error) {
                analyzer.endMeasurement(markName, startMark, endMark);
                throw error;
            }
        };
    }
    
    endMeasurement(markName, startMark, endMark) {
        performance.mark(endMark);
        performance.measure(markName, startMark, endMark);
        
        if (this.profiler) {
            this.profiler.end_timer(markName);
        }
    }
    
    // 自动包装所有导出函数
    wrapAllExports() {
        const exports = Object.keys(this.wasmModule);
        
        exports.forEach(exportName => {
            const exportValue = this.wasmModule[exportName];
            
            if (typeof exportValue === 'function') {
                this.wrapFunction(this.wasmModule, exportName, 'export');
                console.log(`🔧 Wrapped function: ${exportName}`);
            }
        });
    }
    
    // 运行性能基准测试
    async runBenchmark(testName, testFunction, iterations = 100) {
        console.log(`🏃 Running benchmark: ${testName} (${iterations} iterations)`);
        
        const results = [];
        
        for (let i = 0; i < iterations; i++) {
            const startTime = performance.now();
            
            try {
                await testFunction();
            } catch (error) {
                console.error(`Benchmark error in iteration ${i}:`, error);
                continue;
            }
            
            const endTime = performance.now();
            const duration = endTime - startTime;
            results.push(duration);
            
            // 每10次迭代记录一次进度
            if ((i + 1) % 10 === 0) {
                console.log(`Progress: ${i + 1}/${iterations} iterations completed`);
            }
        }
        
        // 计算统计信息
        const stats = this.calculateStats(results);
        console.log(`📈 Benchmark '${testName}' completed:`, stats);
        
        return stats;
    }
    
    calculateStats(values) {
        if (values.length === 0) return null;
        
        const sorted = [...values].sort((a, b) => a - b);
        const sum = values.reduce((a, b) => a + b, 0);
        
        return {
            count: values.length,
            min: sorted[0],
            max: sorted[sorted.length - 1],
            mean: sum / values.length,
            median: sorted[Math.floor(sorted.length / 2)],
            p95: sorted[Math.floor(sorted.length * 0.95)],
            p99: sorted[Math.floor(sorted.length * 0.99)],
            stdDev: this.calculateStdDev(values, sum / values.length)
        };
    }
    
    calculateStdDev(values, mean) {
        const squaredDiffs = values.map(value => Math.pow(value - mean, 2));
        const avgSquaredDiff = squaredDiffs.reduce((a, b) => a + b, 0) / values.length;
        return Math.sqrt(avgSquaredDiff);
    }
    
    // 生成综合性能报告
    generateReport() {
        const report = {
            timestamp: new Date().toISOString(),
            wasmReport: null,
            browserMetrics: this.getBrowserMetrics(),
            performanceEntries: this.getPerformanceEntries()
        };
        
        // 获取 WASM 性能报告
        if (this.profiler) {
            report.wasmReport = this.profiler.generate_report();
        }
        
        return report;
    }
    
    getBrowserMetrics() {
        const metrics = {};
        
        // 内存信息
        if (performance.memory) {
            metrics.memory = {
                used: performance.memory.usedJSHeapSize,
                total: performance.memory.totalJSHeapSize,
                limit: performance.memory.jsHeapSizeLimit
            };
        }
        
        // 导航时机
        if (performance.timing) {
            const timing = performance.timing;
            metrics.navigation = {
                domContentLoaded: timing.domContentLoadedEventEnd - timing.navigationStart,
                loadComplete: timing.loadEventEnd - timing.navigationStart,
                domInteractive: timing.domInteractive - timing.navigationStart
            };
        }
        
        return metrics;
    }
    
    getPerformanceEntries() {
        const entries = performance.getEntriesByType('measure')
            .filter(entry => entry.name.includes('wasm') || entry.name.includes('test'))
            .map(entry => ({
                name: entry.name,
                duration: entry.duration,
                startTime: entry.startTime
            }));
        
        return entries;
    }
    
    // 清理资源
    cleanup() {
        if (this.observer) {
            this.observer.disconnect();
        }
        
        if (this.profiler) {
            this.profiler.clear();
        }
        
        performance.clearMarks();
        performance.clearMeasures();
        
        console.log('🧹 Performance analyzer cleaned up');
    }
}

// 使用示例
async function demonstratePerformanceAnalysis() {
    const wasmModule = await import('./pkg/wasm_debug_demo.js');
    await wasmModule.default();
    
    const analyzer = new WasmPerformanceAnalyzer(wasmModule);
    await analyzer.initialize();
    
    // 包装所有导出函数
    analyzer.wrapAllExports();
    
    // 开始记录
    analyzer.startRecording();
    
    // 运行性能测试套件
    if (wasmModule.PerformanceProfiler) {
        const profiler = new wasmModule.PerformanceProfiler();
        wasmModule.performance_test_suite(profiler);
    }
    
    // 运行自定义基准测试
    await analyzer.runBenchmark('array_processing', async () => {
        const data = new Float32Array(1000);
        for (let i = 0; i < data.length; i++) {
            data[i] = Math.random();
        }
        
        if (wasmModule.debug_complex_calculation) {
            wasmModule.debug_complex_calculation(data);
        }
    }, 50);
    
    // 停止记录并生成报告
    analyzer.stopRecording();
    
    setTimeout(() => {
        const report = analyzer.generateReport();
        console.log('📊 Final Performance Report:', report);
        
        analyzer.cleanup();
    }, 1000);
}

11.4.2 热点分析

热点分析帮助我们找到程序中最消耗时间的部分，从而针对性地进行优化。

#![allow(unused)]
fn main() {
// 热点分析工具
#[wasm_bindgen]
pub struct HotspotAnalyzer {
    function_calls: std::collections::HashMap<String, FunctionStats>,
    call_stack: Vec<String>,
    sampling_rate: u32,
    sample_count: u32,
}

#[derive(Clone)]
struct FunctionStats {
    call_count: u64,
    total_time: f64,
    self_time: f64,
    child_time: f64,
    min_time: f64,
    max_time: f64,
}

impl FunctionStats {
    fn new() -> Self {
        FunctionStats {
            call_count: 0,
            total_time: 0.0,
            self_time: 0.0,
            child_time: 0.0,
            min_time: f64::INFINITY,
            max_time: 0.0,
        }
    }
}

#[wasm_bindgen]
impl HotspotAnalyzer {
    #[wasm_bindgen(constructor)]
    pub fn new(sampling_rate: u32) -> HotspotAnalyzer {
        HotspotAnalyzer {
            function_calls: std::collections::HashMap::new(),
            call_stack: Vec::new(),
            sampling_rate,
            sample_count: 0,
        }
    }
    
    // 进入函数
    #[wasm_bindgen]
    pub fn enter_function(&mut self, function_name: &str) -> f64 {
        self.call_stack.push(function_name.to_string());
        
        // 更新函数统计
        let stats = self.function_calls
            .entry(function_name.to_string())
            .or_insert_with(FunctionStats::new);
        stats.call_count += 1;
        
        js_sys::Date::now()
    }
    
    // 退出函数
    #[wasm_bindgen]
    pub fn exit_function(&mut self, function_name: &str, start_time: f64) {
        let end_time = js_sys::Date::now();
        let duration = end_time - start_time;
        
        if let Some(popped) = self.call_stack.pop() {
            if popped != function_name {
                console_log!("⚠️  Function stack mismatch: expected {}, got {}", function_name, popped);
            }
        }
        
        // 更新统计信息
        if let Some(stats) = self.function_calls.get_mut(function_name) {
            stats.total_time += duration;
            stats.min_time = stats.min_time.min(duration);
            stats.max_time = stats.max_time.max(duration);
            
            // 计算自身时间（不包括子函数调用）
            stats.self_time += duration;
        }
        
        // 从父函数的自身时间中减去这次调用的时间
        if let Some(parent_name) = self.call_stack.last() {
            if let Some(parent_stats) = self.function_calls.get_mut(parent_name) {
                parent_stats.self_time -= duration;
                parent_stats.child_time += duration;
            }
        }
        
        // 采样记录
        self.sample_count += 1;
        if self.sample_count % self.sampling_rate == 0 {
            self.record_sample();
        }
    }
    
    fn record_sample(&self) {
        if !self.call_stack.is_empty() {
            console_log!("📊 Sample #{}: Stack depth: {}, Top function: {}", 
                self.sample_count, self.call_stack.len(), self.call_stack.last().unwrap());
        }
    }
    
    // 生成热点报告
    #[wasm_bindgen]
    pub fn generate_hotspot_report(&self) -> String {
        let mut report = String::new();
        
        report.push_str("🔥 Hotspot Analysis Report\n");
        report.push_str("==========================\n\n");
        
        // 按总时间排序
        let mut sorted_functions: Vec<_> = self.function_calls.iter().collect();
        sorted_functions.sort_by(|a, b| b.1.total_time.partial_cmp(&a.1.total_time).unwrap());
        
        report.push_str("📈 Functions by Total Time:\n");
        report.push_str("Function Name                | Calls    | Total Time | Self Time  | Avg Time   | Min Time   | Max Time\n");
        report.push_str("----------------------------|----------|------------|------------|------------|------------|----------\n");
        
        for (name, stats) in &sorted_functions[..10.min(sorted_functions.len())] {
            let avg_time = stats.total_time / stats.call_count as f64;
            report.push_str(&format!(
                "{:<27} | {:>8} | {:>9.2}ms | {:>9.2}ms | {:>9.2}ms | {:>9.2}ms | {:>9.2}ms\n",
                name, stats.call_count, stats.total_time, stats.self_time, 
                avg_time, stats.min_time, stats.max_time
            ));
        }
        
        // 按调用次数排序
        sorted_functions.sort_by(|a, b| b.1.call_count.cmp(&a.1.call_count));
        
        report.push_str("\n📞 Functions by Call Count:\n");
        for (name, stats) in &sorted_functions[..5.min(sorted_functions.len())] {
            report.push_str(&format!(
                "  {}: {} calls, {:.2}ms total\n",
                name, stats.call_count, stats.total_time
            ));
        }
        
        // 按平均时间排序
        sorted_functions.sort_by(|a, b| {
            let avg_a = a.1.total_time / a.1.call_count as f64;
            let avg_b = b.1.total_time / b.1.call_count as f64;
            avg_b.partial_cmp(&avg_a).unwrap()
        });
        
        report.push_str("\n⏱️  Functions by Average Time:\n");
        for (name, stats) in &sorted_functions[..5.min(sorted_functions.len())] {
            let avg_time = stats.total_time / stats.call_count as f64;
            report.push_str(&format!(
                "  {}: {:.2}ms avg ({} calls)\n",
                name, avg_time, stats.call_count
            ));
        }
        
        // 优化建议
        report.push_str("\n💡 Optimization Suggestions:\n");
        report.push_str(&self.generate_optimization_suggestions());
        
        report
    }
    
    fn generate_optimization_suggestions(&self) -> String {
        let mut suggestions = String::new();
        
        // 找出总时间最长的函数
        if let Some((hottest_func, hottest_stats)) = self.function_calls.iter()
            .max_by(|a, b| a.1.total_time.partial_cmp(&b.1.total_time).unwrap()) {
            
            suggestions.push_str(&format!(
                "  1. '{}' consumes {:.1}% of total execution time. Consider optimizing this function.\n",
                hottest_func, 
                (hottest_stats.total_time / self.get_total_execution_time()) * 100.0
            ));
        }
        
        // 找出调用次数过多的函数
        if let Some((most_called_func, most_called_stats)) = self.function_calls.iter()
            .max_by(|a, b| a.1.call_count.cmp(&b.1.call_count)) {
            
            if most_called_stats.call_count > 10000 {
                suggestions.push_str(&format!(
                    "  2. '{}' is called {} times. Consider caching or reducing call frequency.\n",
                    most_called_func, most_called_stats.call_count
                ));
            }
        }
        
        // 找出平均时间过长的函数
        for (name, stats) in &self.function_calls {
            let avg_time = stats.total_time / stats.call_count as f64;
            if avg_time > 10.0 && stats.call_count > 10 {
                suggestions.push_str(&format!(
                    "  3. '{}' has high average execution time ({:.2}ms). Consider algorithmic optimization.\n",
                    name, avg_time
                ));
            }
        }
        
        if suggestions.is_empty() {
            suggestions.push_str("  - No obvious optimization opportunities detected.\n");
        }
        
        suggestions
    }
    
    fn get_total_execution_time(&self) -> f64 {
        self.function_calls.values().map(|stats| stats.self_time).sum()
    }
    
    // 重置统计
    #[wasm_bindgen]
    pub fn reset(&mut self) {
        self.function_calls.clear();
        self.call_stack.clear();
        self.sample_count = 0;
    }
    
    // 获取当前调用栈
    #[wasm_bindgen]
    pub fn get_call_stack(&self) -> String {
        self.call_stack.join(" -> ")
    }
}

// 宏：自动添加函数调用跟踪
macro_rules! profile_function {
    ($analyzer:expr, $func_name:expr, $block:block) => {
        {
            let start_time = $analyzer.enter_function($func_name);
            let result = $block;
            $analyzer.exit_function($func_name, start_time);
            result
        }
    };
}

// 热点分析示例函数
#[wasm_bindgen]
pub fn hotspot_test_suite(analyzer: &mut HotspotAnalyzer) {
    // 模拟不同性能特征的函数
    
    // 高频率调用的快速函数
    for i in 0..1000 {
        profile_function!(analyzer, "fast_function", {
            let mut sum = 0;
            for j in 0..10 {
                sum += i + j;
            }
            sum
        });
    }
    
    // 低频率调用的慢速函数
    for _i in 0..5 {
        profile_function!(analyzer, "slow_function", {
            let mut result = 1.0;
            for j in 0..100000 {
                result = (result + j as f64).sqrt();
            }
            result
        });
    }
    
    // 递归函数测试
    fn recursive_test(analyzer: &mut HotspotAnalyzer, n: u32) -> u32 {
        profile_function!(analyzer, "recursive_function", {
            if n <= 1 {
                n
            } else {
                recursive_test(analyzer, n - 1) + recursive_test(analyzer, n - 2)
            }
        })
    }
    
    recursive_test(analyzer, 10);
    
    // 嵌套函数调用测试
    profile_function!(analyzer, "outer_function", {
        for _i in 0..100 {
            profile_function!(analyzer, "inner_function_a", {
                let mut temp = 0;
                for j in 0..50 {
                    temp += j;
                }
                temp
            });
            
            profile_function!(analyzer, "inner_function_b", {
                let mut temp = 1.0;
                for j in 1..20 {
                    temp *= j as f64;
                }
                temp
            });
        }
    });
}
}

通过本章的学习，你现在掌握了 WebAssembly 应用调试的全套技术：

1. 调试环境搭建：配置浏览器开发者工具、源码映射和调试扩展
2. 断点调试：设置各种类型的断点，包括条件断点和日志点
3. 内存调试：检测内存泄漏、监控内存使用和堆栈溢出
4. 性能调试：识别性能瓶颈、进行热点分析和性能优化

这些调试技术将帮助你：

• 快速定位和修复 WebAssembly 应用中的错误
• 优化应用性能，提升用户体验
• 建立健壮的调试和监控体系
• 提高开发效率和代码质量

在下一章中，我们将把所学的知识应用到实际项目中，通过构建完整的 WebAssembly 应用来巩固和深化理解。

第11章 练习题

11.1 调试环境配置练习

练习 11.1.1 浏览器调试工具配置 (15分)

题目: 配置浏览器开发者工具以支持 WebAssembly 调试，并验证源码映射功能。

要求：

• 在 Chrome 和 Firefox 中启用 WebAssembly 调试功能
• 配置 Rust 项目生成调试信息
• 验证源码映射是否正常工作
• 创建一个调试配置指南

# 启动 Chrome 时添加调试参数
google-chrome --enable-features=WebAssemblyDebugging

[package]
name = "debug-example"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
console_error_panic_hook = "0.1"

# 调试配置
[profile.dev]
debug = true
opt-level = 0

[profile.release]
debug = true
opt-level = 2

# 开发版本构建（包含调试信息）
wasm-pack build --dev --out-dir pkg

# 或者带调试信息的发布版本
wasm-pack build --profiling --out-dir pkg

use wasm_bindgen::prelude::*;

// 导入 console.log
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// 设置 panic hook
#[wasm_bindgen(start)]
pub fn main() {
    console_error_panic_hook::set_once();
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

#[wasm_bindgen]
pub fn debug_function(input: i32) -> i32 {
    console_log!("进入 debug_function，输入: {}", input);
    
    let mut result = input;
    
    // 可以在这里设置断点
    for i in 1..=5 {
        result = calculate_step(result, i);
        console_log!("步骤 {} 结果: {}", i, result);
    }
    
    console_log!("函数返回: {}", result);
    result
}

fn calculate_step(value: i32, step: i32) -> i32 {
    // 这里也可以设置断点
    let intermediate = value * 2;
    intermediate + step
}

// 故意创建一个可能出错的函数
#[wasm_bindgen]
pub fn potentially_buggy_function(array_size: usize) -> Vec<i32> {
    let mut data = vec![0; array_size];
    
    for i in 0..array_size {
        // 故意的边界检查问题（在某些情况下）
        if i < data.len() {
            data[i] = i as i32 * 2;
        }
    }
    
    data
}

// 内存使用测试函数
#[wasm_bindgen]
pub fn memory_test_function(iterations: usize) -> usize {
    let mut total_allocated = 0;
    
    for i in 0..iterations {
        let size = (i % 1000) + 1;
        let _data: Vec<u8> = vec![0; size];
        total_allocated += size;
        
        // 故意不释放某些内存（模拟内存泄漏）
        if i % 10 == 0 {
            std::mem::forget(_data);
        }
    }
    
    total_allocated
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebAssembly 调试测试</title>
</head>
<body>
    <h1>WebAssembly 调试验证</h1>
    
    <button id="test-debug">测试调试功能</button>
    <button id="test-buggy">测试有问题的函数</button>
    <button id="test-memory">测试内存使用</button>
    
    <div id="output"></div>
    
    <script type="module">
        import init, { 
            debug_function, 
            potentially_buggy_function, 
            memory_test_function 
        } from './pkg/debug_example.js';
        
        async function run() {
            await init();
            
            const output = document.getElementById('output');
            
            document.getElementById('test-debug').onclick = () => {
                console.log('开始调试测试');
                const result = debug_function(10);
                output.innerHTML += `<p>调试函数结果: ${result}</p>`;
            };
            
            document.getElementById('test-buggy').onclick = () => {
                console.log('测试有问题的函数');
                try {
                    const result = potentially_buggy_function(1000);
                    output.innerHTML += `<p>生成了 ${result.length} 个元素</p>`;
                } catch (error) {
                    output.innerHTML += `<p style="color: red">错误: ${error}</p>`;
                }
            };
            
            document.getElementById('test-memory').onclick = () => {
                console.log('测试内存使用');
                const allocated = memory_test_function(100);
                output.innerHTML += `<p>分配内存总量: ${allocated} 字节</p>`;
            };
        }
        
        run();
    </script>
</body>
</html>

11.2 断点调试练习

练习 11.2.1 高级断点技术 (20分)

题目: 实现并使用条件断点、日志断点等高级调试技术来调试复杂的 WebAssembly 应用。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct DataProcessor {
    data: Vec<f64>,
    threshold: f64,
}

#[wasm_bindgen]
impl DataProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(threshold: f64) -> DataProcessor {
        DataProcessor {
            data: Vec::new(),
            threshold,
        }
    }
    
    #[wasm_bindgen]
    pub fn add_data(&mut self, value: f64) {
        // 条件断点目标：只在异常值时暂停
        if value.is_infinite() || value.is_nan() {
            panic!("检测到异常数值: {}", value);
        }
        
        self.data.push(value);
    }
    
    #[wasm_bindgen]
    pub fn process_data(&mut self) -> Vec<f64> {
        let mut results = Vec::new();
        
        for (index, &value) in self.data.iter().enumerate() {
            // 日志断点目标：记录每次处理的数据
            let processed = self.apply_algorithm(value, index);
            
            // 条件断点目标：只在超过阈值时暂停
            if processed > self.threshold {
                results.push(processed);
            }
        }
        
        results
    }
    
    fn apply_algorithm(&self, value: f64, index: usize) -> f64 {
        // 复杂的算法，可能出现问题
        let factor = if index % 2 == 0 { 1.5 } else { 0.8 };
        let base_result = value * factor;
        
        // 故意的潜在问题：除零
        if index > 0 {
            base_result / (index as f64)
        } else {
            base_result
        }
    }
    
    #[wasm_bindgen]
    pub fn get_statistics(&self) -> JsValue {
        if self.data.is_empty() {
            return JsValue::NULL;
        }
        
        let sum: f64 = self.data.iter().sum();
        let mean = sum / self.data.len() as f64;
        let variance = self.data.iter()
            .map(|&x| (x - mean).powi(2))
            .sum::<f64>() / self.data.len() as f64;
        
        let stats = serde_json::json!({
            "count": self.data.len(),
            "sum": sum,
            "mean": mean,
            "variance": variance,
            "std_dev": variance.sqrt()
        });
        
        JsValue::from_str(&stats.to_string())
    }
}

// 测试用的复杂函数
#[wasm_bindgen]
pub fn complex_calculation(input: &[f64]) -> f64 {
    let mut result = 0.0;
    
    for (i, &value) in input.iter().enumerate() {
        // 多个条件，适合条件断点
        if value > 100.0 {
            result += value * 2.0;
        } else if value < 0.0 {
            result -= value.abs();
        } else {
            result += value / (i + 1) as f64;
        }
        
        // 可能的问题点
        if i > 10 && result > 1000.0 {
            result = result.sqrt();
        }
    }
    
    result
}
}

class WasmDebugHelper {
    constructor(wasmModule) {
        this.module = wasmModule;
        this.breakpointConditions = new Map();
        this.logPoints = new Map();
    }
    
    // 条件断点辅助
    addConditionalBreakpoint(functionName, condition) {
        this.breakpointConditions.set(functionName, condition);
    }
    
    // 日志断点辅助
    addLogPoint(functionName, message) {
        this.logPoints.set(functionName, message);
    }
    
    // 包装函数调用以添加调试功能
    wrapFunction(obj, functionName) {
        const originalFunction = obj[functionName];
        const self = this;
        
        obj[functionName] = function(...args) {
            // 检查日志断点
            if (self.logPoints.has(functionName)) {
                console.log(`[LOG] ${functionName}:`, self.logPoints.get(functionName), args);
            }
            
            // 检查条件断点
            if (self.breakpointConditions.has(functionName)) {
                const condition = self.breakpointConditions.get(functionName);
                if (condition(...args)) {
                    debugger; // 触发断点
                }
            }
            
            return originalFunction.apply(this, args);
        };
    }
}

// 使用示例
async function setupAdvancedDebugging() {
    const module = await import('./pkg/debug_example.js');
    await module.default();
    
    const debugHelper = new WasmDebugHelper(module);
    
    // 设置条件断点：只在输入包含 NaN 时暂停
    debugHelper.addConditionalBreakpoint('complex_calculation', (input) => {
        return input.some(x => isNaN(x));
    });
    
    // 设置日志断点
    debugHelper.addLogPoint('complex_calculation', '计算开始');
    
    // 创建测试数据
    const processor = new module.DataProcessor(50.0);
    
    // 测试正常数据
    const normalData = [1.0, 2.5, 3.7, 4.2, 5.8];
    normalData.forEach(value => processor.add_data(value));
    
    // 测试异常数据（会触发条件断点）
    const problematicData = [10.0, NaN, 15.0, Infinity, 20.0];
    
    try {
        const result1 = module.complex_calculation(new Float64Array(normalData));
        console.log('正常计算结果:', result1);
        
        // 这应该触发条件断点
        const result2 = module.complex_calculation(new Float64Array(problematicData));
        console.log('异常数据计算结果:', result2);
    } catch (error) {
        console.error('计算错误:', error);
    }
    
    const stats = processor.get_statistics();
    console.log('数据统计:', JSON.parse(stats));
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug WebAssembly in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "userDataDir": "${workspaceFolder}/.vscode/chrome-debug-profile",
            "runtimeArgs": [
                "--enable-features=WebAssemblyDebugging",
                "--disable-extensions-except=",
                "--disable-web-security"
            ]
        }
    ]
}

11.3 内存调试练习

练习 11.3.1 内存泄漏检测和分析 (25分)

题目: 创建一个包含内存泄漏的 WebAssembly 应用，使用调试工具检测并修复内存问题。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;
use std::collections::HashMap;
use std::rc::Rc;
use std::cell::RefCell;

// 故意的内存泄漏示例
#[wasm_bindgen]
pub struct LeakyContainer {
    data: Vec<Vec<u8>>,
    cache: HashMap<String, Rc<RefCell<Vec<u8>>>>,
    permanent_storage: Vec<Box<[u8; 1024]>>,
}

#[wasm_bindgen]
impl LeakyContainer {
    #[wasm_bindgen(constructor)]
    pub fn new() -> LeakyContainer {
        LeakyContainer {
            data: Vec::new(),
            cache: HashMap::new(),
            permanent_storage: Vec::new(),
        }
    }
    
    // 内存泄漏问题 1: 无限增长的缓存
    #[wasm_bindgen]
    pub fn add_to_cache(&mut self, key: String, data: Vec<u8>) {
        let cached_data = Rc::new(RefCell::new(data));
        self.cache.insert(key, cached_data);
        // 问题：缓存永远不会清理
    }
    
    // 内存泄漏问题 2: 循环引用
    #[wasm_bindgen]
    pub fn create_circular_reference(&mut self) {
        let data1 = Rc::new(RefCell::new(vec![1u8; 1000]));
        let data2 = Rc::new(RefCell::new(vec![2u8; 1000]));
        
        // 创建循环引用（在实际场景中更复杂）
        // 这里简化演示
        self.cache.insert("ref1".to_string(), data1.clone());
        self.cache.insert("ref2".to_string(), data2.clone());
    }
    
    // 内存泄漏问题 3: 忘记释放大块内存
    #[wasm_bindgen]
    pub fn allocate_permanent_memory(&mut self, count: usize) {
        for _ in 0..count {
            let large_chunk = Box::new([0u8; 1024]);
            self.permanent_storage.push(large_chunk);
        }
        // 问题：这些内存永远不会被释放
    }
    
    // 栈溢出风险函数
    #[wasm_bindgen]
    pub fn recursive_function(&self, depth: usize) -> usize {
        if depth == 0 {
            return 1;
        }
        
        // 每次递归都分配一些栈空间
        let _local_array = [0u8; 1000];
        
        // 危险的深度递归
        self.recursive_function(depth - 1) + depth
    }
    
    // 获取当前内存使用统计
    #[wasm_bindgen]
    pub fn get_memory_stats(&self) -> String {
        let data_size = self.data.iter().map(|v| v.len()).sum::<usize>();
        let cache_size = self.cache.len();
        let permanent_size = self.permanent_storage.len() * 1024;
        
        format!(
            "Data: {} bytes, Cache entries: {}, Permanent: {} bytes",
            data_size, cache_size, permanent_size
        )
    }
    
    // 尝试清理缓存（部分修复）
    #[wasm_bindgen]
    pub fn cleanup_cache(&mut self) {
        // 只保留最近的10个条目
        if self.cache.len() > 10 {
            let keys_to_remove: Vec<String> = self.cache
                .keys()
                .take(self.cache.len() - 10)
                .cloned()
                .collect();
            
            for key in keys_to_remove {
                self.cache.remove(&key);
            }
        }
    }
}

// 内存监控工具
#[wasm_bindgen]
pub struct MemoryMonitor {
    baseline_memory: usize,
    snapshots: Vec<(f64, usize)>, // (timestamp, memory_usage)
}

#[wasm_bindgen]
impl MemoryMonitor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> MemoryMonitor {
        MemoryMonitor {
            baseline_memory: 0,
            snapshots: Vec::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn set_baseline(&mut self) {
        // 在实际实现中，这里会获取真实的内存使用量
        self.baseline_memory = self.get_current_memory_usage();
    }
    
    #[wasm_bindgen]
    pub fn take_snapshot(&mut self) {
        let timestamp = js_sys::Date::now();
        let memory_usage = self.get_current_memory_usage();
        self.snapshots.push((timestamp, memory_usage));
    }
    
    fn get_current_memory_usage(&self) -> usize {
        // 模拟内存使用量获取
        // 在真实实现中会使用 performance.memory 或其他 API
        42000 + self.snapshots.len() * 1000
    }
    
    #[wasm_bindgen]
    pub fn analyze_memory_trend(&self) -> String {
        if self.snapshots.len() < 2 {
            return "需要至少2个快照才能分析趋势".to_string();
        }
        
        let first = &self.snapshots[0];
        let last = &self.snapshots[self.snapshots.len() - 1];
        
        let time_diff = last.0 - first.0; // 毫秒
        let memory_diff = last.1 as i64 - first.1 as i64;
        
        let growth_rate = if time_diff > 0.0 {
            memory_diff as f64 / time_diff // bytes per ms
        } else {
            0.0
        };
        
        format!(
            "内存增长趋势: {:.2} bytes/ms, 总变化: {} bytes",
            growth_rate, memory_diff
        )
    }
    
    #[wasm_bindgen]
    pub fn detect_memory_leak(&self, threshold_per_second: f64) -> bool {
        if self.snapshots.len() < 10 {
            return false;
        }
        
        // 检查最近的内存增长趋势
        let recent_snapshots = &self.snapshots[self.snapshots.len() - 10..];
        let mut total_growth = 0i64;
        let mut total_time = 0.0;
        
        for i in 1..recent_snapshots.len() {
            let time_diff = recent_snapshots[i].0 - recent_snapshots[i-1].0;
            let memory_diff = recent_snapshots[i].1 as i64 - recent_snapshots[i-1].1 as i64;
            
            total_time += time_diff;
            total_growth += memory_diff;
        }
        
        if total_time > 0.0 {
            let growth_per_second = (total_growth as f64 / total_time) * 1000.0;
            growth_per_second > threshold_per_second
        } else {
            false
        }
    }
}

// 测试用的内存密集型操作
#[wasm_bindgen]
pub fn memory_stress_test(iterations: usize, size_per_iteration: usize) -> usize {
    let mut total_allocated = 0;
    let mut data_store: Vec<Vec<u8>> = Vec::new();
    
    for i in 0..iterations {
        let chunk = vec![0u8; size_per_iteration];
        total_allocated += size_per_iteration;
        
        // 故意保留某些数据不释放
        if i % 10 == 0 {
            data_store.push(chunk);
        }
    }
    
    // 返回总分配量，但 data_store 中的数据可能不会立即释放
    total_allocated
}
}

class WebAssemblyMemoryDebugger {
    constructor() {
        this.memorySnapshots = [];
        this.isMonitoring = false;
        this.monitoringInterval = null;
    }
    
    startMemoryMonitoring(intervalMs = 1000) {
        if (this.isMonitoring) return;
        
        this.isMonitoring = true;
        this.monitoringInterval = setInterval(() => {
            this.takeMemorySnapshot();
        }, intervalMs);
        
        console.log('开始内存监控');
    }
    
    stopMemoryMonitoring() {
        if (!this.isMonitoring) return;
        
        clearInterval(this.monitoringInterval);
        this.isMonitoring = false;
        console.log('停止内存监控');
    }
    
    takeMemorySnapshot() {
        const snapshot = {
            timestamp: Date.now(),
            jsHeapUsed: 0,
            jsHeapTotal: 0,
            wasmMemory: 0
        };
        
        // 获取 JavaScript 堆信息
        if (performance.memory) {
            snapshot.jsHeapUsed = performance.memory.usedJSHeapSize;
            snapshot.jsHeapTotal = performance.memory.totalJSHeapSize;
        }
        
        // 获取 WebAssembly 内存信息
        if (window.wasmModule && window.wasmModule.memory) {
            snapshot.wasmMemory = window.wasmModule.memory.buffer.byteLength;
        }
        
        this.memorySnapshots.push(snapshot);
        
        // 保持最近100个快照
        if (this.memorySnapshots.length > 100) {
            this.memorySnapshots.shift();
        }
    }
    
    analyzeMemoryLeaks() {
        if (this.memorySnapshots.length < 10) {
            console.log('需要更多数据点进行分析');
            return null;
        }
        
        const recent = this.memorySnapshots.slice(-10);
        const analysis = {
            jsHeapGrowth: this.calculateGrowthRate(recent, 'jsHeapUsed'),
            wasmMemoryGrowth: this.calculateGrowthRate(recent, 'wasmMemory'),
            timeSpan: recent[recent.length - 1].timestamp - recent[0].timestamp
        };
        
        // 判断是否存在内存泄漏
        analysis.hasJsLeak = analysis.jsHeapGrowth > 1000; // 每秒增长1KB
        analysis.hasWasmLeak = analysis.wasmMemoryGrowth > 500; // 每秒增长500B
        
        return analysis;
    }
    
    calculateGrowthRate(snapshots, property) {
        if (snapshots.length < 2) return 0;
        
        const first = snapshots[0];
        const last = snapshots[snapshots.length - 1];
        const timeDiff = last.timestamp - first.timestamp;
        const memoryDiff = last[property] - first[property];
        
        return timeDiff > 0 ? (memoryDiff / timeDiff) * 1000 : 0; // bytes per second
    }
    
    generateMemoryReport() {
        const analysis = this.analyzeMemoryLeaks();
        if (!analysis) return '数据不足';
        
        return `
内存分析报告:
时间跨度: ${(analysis.timeSpan / 1000).toFixed(2)} 秒
JS堆增长率: ${analysis.jsHeapGrowth.toFixed(2)} bytes/秒
WASM内存增长率: ${analysis.wasmMemoryGrowth.toFixed(2)} bytes/秒
疑似JS内存泄漏: ${analysis.hasJsLeak ? '是' : '否'}
疑似WASM内存泄漏: ${analysis.hasWasmLeak ? '是' : '否'}
        `;
    }
    
    plotMemoryUsage() {
        if (this.memorySnapshots.length === 0) return;
        
        // 简单的控制台图表
        console.log('内存使用趋势:');
        this.memorySnapshots.forEach((snapshot, index) => {
            if (index % 5 === 0) { // 每5个点显示一次
                const jsHeapMB = (snapshot.jsHeapUsed / 1024 / 1024).toFixed(1);
                const wasmMB = (snapshot.wasmMemory / 1024 / 1024).toFixed(1);
                console.log(`${index}: JS=${jsHeapMB}MB, WASM=${wasmMB}MB`);
            }
        });
    }
}

// 测试内存泄漏检测
async function testMemoryLeakDetection() {
    const module = await import('./pkg/debug_example.js');
    await module.default();
    
    window.wasmModule = module;
    
    const debugger = new WebAssemblyMemoryDebugger();
    const monitor = new module.MemoryMonitor();
    const container = new module.LeakyContainer();
    
    // 开始监控
    debugger.startMemoryMonitoring(500);
    monitor.set_baseline();
    
    // 模拟内存泄漏
    console.log('开始内存泄漏测试...');
    
    for (let i = 0; i < 50; i++) {
        // 添加到缓存（不会清理）
        container.add_to_cache(`key_${i}`, new Array(1000).fill(i));
        
        // 分配永久内存
        container.allocate_permanent_memory(5);
        
        // 创建循环引用
        if (i % 10 === 0) {
            container.create_circular_reference();
        }
        
        // 拍摄内存快照
        monitor.take_snapshot();
        
        console.log(container.get_memory_stats());
        
        // 等待一段时间
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    // 分析结果
    setTimeout(() => {
        debugger.stopMemoryMonitoring();
        
        console.log('=== 内存分析结果 ===');
        console.log(debugger.generateMemoryReport());
        console.log(monitor.analyze_memory_trend());
        
        const hasLeak = monitor.detect_memory_leak(1000.0);
        console.log(`检测到内存泄漏: ${hasLeak ? '是' : '否'}`);
        
        debugger.plotMemoryUsage();
        
        // 尝试清理
        console.log('尝试清理内存...');
        container.cleanup_cache();
        console.log('清理后:', container.get_memory_stats());
        
    }, 2000);
}

#![allow(unused)]
fn main() {
// 修复后的内存安全版本
#[wasm_bindgen]
pub struct FixedContainer {
    cache: HashMap<String, Vec<u8>>,
    max_cache_size: usize,
}

#[wasm_bindgen]
impl FixedContainer {
    #[wasm_bindgen(constructor)]
    pub fn new(max_cache_size: usize) -> FixedContainer {
        FixedContainer {
            cache: HashMap::new(),
            max_cache_size,
        }
    }
    
    #[wasm_bindgen]
    pub fn add_to_cache(&mut self, key: String, data: Vec<u8>) {
        // 检查缓存大小限制
        if self.cache.len() >= self.max_cache_size {
            // 移除最旧的条目
            if let Some(oldest_key) = self.cache.keys().next().cloned() {
                self.cache.remove(&oldest_key);
            }
        }
        
        self.cache.insert(key, data);
    }
}
}

11.4 性能调试练习

练习 11.4.1 性能瓶颈分析和优化 (25分)

题目: 使用性能分析工具识别 WebAssembly 应用中的性能瓶颈，并实施优化方案。

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct PerformanceTestSuite {
    data: Vec<f64>,
    processed_count: usize,
}

#[wasm_bindgen]
impl PerformanceTestSuite {
    #[wasm_bindgen(constructor)]
    pub fn new() -> PerformanceTestSuite {
        PerformanceTestSuite {
            data: Vec::new(),
            processed_count: 0,
        }
    }
    
    // 性能瓶颈1: 低效的数据访问模式
    #[wasm_bindgen]
    pub fn inefficient_processing(&mut self, size: usize) -> f64 {
        let start = js_sys::Date::now();
        
        // 创建测试数据
        self.data = (0..size).map(|i| i as f64).collect();
        
        let mut result = 0.0;
        
        // 低效的内存访问模式
        for i in 0..size {
            for j in 0..size {
                if i < self.data.len() && j < i {
                    // 非连续内存访问
                    result += self.data[i] * self.data[j];
                }
            }
        }
        
        self.processed_count += 1;
        js_sys::Date::now() - start
    }
    
    // 优化版本1: 改进的数据访问模式
    #[wasm_bindgen]
    pub fn optimized_processing(&mut self, size: usize) -> f64 {
        let start = js_sys::Date::now();
        
        self.data = (0..size).map(|i| i as f64).collect();
        
        let mut result = 0.0;
        
        // 优化的内存访问模式
        for i in 0..size {
            let data_i = self.data[i];
            for j in 0..i {
                result += data_i * self.data[j];
            }
        }
        
        self.processed_count += 1;
        js_sys::Date::now() - start
    }
    
    // 性能瓶颈2: 频繁的内存分配
    #[wasm_bindgen]
    pub fn allocation_heavy_function(&self, iterations: usize) -> f64 {
        let start = js_sys::Date::now();
        
        let mut results = Vec::new();
        
        for i in 0..iterations {
            // 频繁的小内存分配
            let mut temp_vec = Vec::new();
            for j in 0..100 {
                temp_vec.push((i * j) as f64);
            }
            
            // 不必要的中间计算
            let sum: f64 = temp_vec.iter().sum();
            let mean = sum / temp_vec.len() as f64;
            
            results.push(mean);
        }
        
        js_sys::Date::now() - start
    }
    
    // 优化版本2: 减少内存分配
    #[wasm_bindgen]
    pub fn allocation_optimized_function(&self, iterations: usize) -> f64 {
        let start = js_sys::Date::now();
        
        // 预分配缓冲区
        let mut temp_vec = Vec::with_capacity(100);
        let mut results = Vec::with_capacity(iterations);
        
        for i in 0..iterations {
            temp_vec.clear(); // 重用而不是重新分配
            
            for j in 0..100 {
                temp_vec.push((i * j) as f64);
            }
            
            let sum: f64 = temp_vec.iter().sum();
            let mean = sum / temp_vec.len() as f64;
            
            results.push(mean);
        }
        
        js_sys::Date::now() - start
    }
    
    // 性能瓶颈3: 未优化的算法
    #[wasm_bindgen]
    pub fn slow_algorithm(&self, n: usize) -> f64 {
        let start = js_sys::Date::now();
        
        // O(n²) 的算法
        let mut result = 0.0;
        for i in 0..n {
            for j in 0..n {
                result += ((i * j) as f64).sin();
            }
        }
        
        js_sys::Date::now() - start
    }
    
    // 优化版本3: 改进的算法
    #[wasm_bindgen]
    pub fn fast_algorithm(&self, n: usize) -> f64 {
        let start = js_sys::Date::now();
        
        // 预计算sin值
        let sin_values: Vec<f64> = (0..n).map(|i| (i as f64).sin()).collect();
        
        let mut result = 0.0;
        for i in 0..n {
            for j in 0..n {
                result += sin_values[i] * sin_values[j];
            }
        }
        
        js_sys::Date::now() - start
    }
    
    // 性能基准测试
    #[wasm_bindgen]
    pub fn run_performance_benchmark(&mut self) -> String {
        const TEST_SIZE: usize = 1000;
        const ITERATIONS: usize = 100;
        
        // 测试低效处理
        let inefficient_time = self.inefficient_processing(TEST_SIZE);
        let optimized_time = self.optimized_processing(TEST_SIZE);
        
        // 测试内存分配
        let allocation_heavy_time = self.allocation_heavy_function(ITERATIONS);
        let allocation_optimized_time = self.allocation_optimized_function(ITERATIONS);
        
        // 测试算法效率
        let slow_algorithm_time = self.slow_algorithm(100);
        let fast_algorithm_time = self.fast_algorithm(100);
        
        format!(
            "性能基准测试结果:\n\
            数据处理:\n\
            - 低效版本: {:.2}ms\n\
            - 优化版本: {:.2}ms\n\
            - 提升: {:.2}x\n\
            \n\
            内存分配:\n\
            - 频繁分配: {:.2}ms\n\
            - 优化分配: {:.2}ms\n\
            - 提升: {:.2}x\n\
            \n\
            算法效率:\n\
            - 慢算法: {:.2}ms\n\
            - 快算法: {:.2}ms\n\
            - 提升: {:.2}x",
            inefficient_time,
            optimized_time,
            inefficient_time / optimized_time.max(0.1),
            allocation_heavy_time,
            allocation_optimized_time,
            allocation_heavy_time / allocation_optimized_time.max(0.1),
            slow_algorithm_time,
            fast_algorithm_time,
            slow_algorithm_time / fast_algorithm_time.max(0.1)
        )
    }
}

// 性能分析器
#[wasm_bindgen]
pub struct PerformanceProfiler {
    measurements: std::collections::HashMap<String, Vec<f64>>,
}

#[wasm_bindgen]
impl PerformanceProfiler {
    #[wasm_bindgen(constructor)]
    pub fn new() -> PerformanceProfiler {
        PerformanceProfiler {
            measurements: std::collections::HashMap::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn time_function<F>(&mut self, name: &str, mut func: F) -> f64 
    where 
        F: FnMut() -> (),
    {
        let start = js_sys::Date::now();
        func();
        let duration = js_sys::Date::now() - start;
        
        self.measurements
            .entry(name.to_string())
            .or_insert_with(Vec::new)
            .push(duration);
        
        duration
    }
    
    #[wasm_bindgen]
    pub fn get_statistics(&self, name: &str) -> String {
        if let Some(measurements) = self.measurements.get(name) {
            if measurements.is_empty() {
                return "无测量数据".to_string();
            }
            
            let count = measurements.len();
            let sum: f64 = measurements.iter().sum();
            let mean = sum / count as f64;
            let min = measurements.iter().fold(f64::INFINITY, |a, &b| a.min(b));
            let max = measurements.iter().fold(f64::NEG_INFINITY, |a, &b| a.max(b));
            
            // 计算标准差
            let variance = measurements.iter()
                .map(|&x| (x - mean).powi(2))
                .sum::<f64>() / count as f64;
            let std_dev = variance.sqrt();
            
            format!(
                "{}: 次数={}, 平均={:.2}ms, 最小={:.2}ms, 最大={:.2}ms, 标准差={:.2}ms",
                name, count, mean, min, max, std_dev
            )
        } else {
            format!("{}: 无数据", name)
        }
    }
}
}

class WasmPerformanceAnalyzer {
    constructor() {
        this.measurements = new Map();
        this.observers = [];
    }
    
    // 使用 Performance Observer API
    startPerformanceObserver() {
        if ('PerformanceObserver' in window) {
            const observer = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                    if (entry.name.includes('wasm')) {
                        this.logPerformanceEntry(entry);
                    }
                }
            });
            
            observer.observe({ entryTypes: ['measure', 'navigation', 'resource'] });
            this.observers.push(observer);
        }
    }
    
    logPerformanceEntry(entry) {
        console.log(`Performance: ${entry.name} - ${entry.duration.toFixed(2)}ms`);
    }
    
    // 高精度计时
    async timeAsyncFunction(name, asyncFunc) {
        performance.mark(`${name}-start`);
        const startTime = performance.now();
        
        try {
            const result = await asyncFunc();
            const endTime = performance.now();
            const duration = endTime - startTime;
            
            performance.mark(`${name}-end`);
            performance.measure(name, `${name}-start`, `${name}-end`);
            
            this.recordMeasurement(name, duration);
            return { result, duration };
        } catch (error) {
            console.error(`Performance test ${name} failed:`, error);
            throw error;
        }
    }
    
    recordMeasurement(name, duration) {
        if (!this.measurements.has(name)) {
            this.measurements.set(name, []);
        }
        this.measurements.get(name).push(duration);
    }
    
    // 性能回归检测
    detectPerformanceRegression(testName, expectedDuration, tolerance = 0.2) {
        const measurements = this.measurements.get(testName);
        if (!measurements || measurements.length === 0) {
            return { regression: false, reason: 'No measurements available' };
        }
        
        const recent = measurements.slice(-5); // 最近5次测量
        const avgRecent = recent.reduce((a, b) => a + b) / recent.length;
        
        const regressionThreshold = expectedDuration * (1 + tolerance);
        const isRegression = avgRecent > regressionThreshold;
        
        return {
            regression: isRegression,
            expectedDuration,
            actualDuration: avgRecent,
            slowdownFactor: avgRecent / expectedDuration,
            reason: isRegression ? 
                `Performance degraded by ${((avgRecent / expectedDuration - 1) * 100).toFixed(1)}%` :
                'Performance within expected range'
        };
    }
    
    // 生成性能报告
    generatePerformanceReport() {
        const report = {
            timestamp: new Date().toISOString(),
            tests: {},
            summary: {
                totalTests: this.measurements.size,
                totalMeasurements: 0
            }
        };
        
        for (const [testName, measurements] of this.measurements) {
            const stats = this.calculateStatistics(measurements);
            report.tests[testName] = stats;
            report.summary.totalMeasurements += measurements.length;
        }
        
        return report;
    }
    
    calculateStatistics(measurements) {
        if (measurements.length === 0) return null;
        
        const sorted = [...measurements].sort((a, b) => a - b);
        const sum = measurements.reduce((a, b) => a + b, 0);
        
        return {
            count: measurements.length,
            min: Math.min(...measurements),
            max: Math.max(...measurements),
            mean: sum / measurements.length,
            median: sorted[Math.floor(sorted.length / 2)],
            p95: sorted[Math.floor(sorted.length * 0.95)],
            p99: sorted[Math.floor(sorted.length * 0.99)]
        };
    }
    
    // 可视化性能趋势
    visualizePerformanceTrend(testName) {
        const measurements = this.measurements.get(testName);
        if (!measurements) {
            console.log(`No data for test: ${testName}`);
            return;
        }
        
        console.log(`Performance trend for ${testName}:`);
        measurements.forEach((duration, index) => {
            const bar = '█'.repeat(Math.round(duration / 10));
            console.log(`${index.toString().padStart(3)}: ${duration.toFixed(2)}ms ${bar}`);
        });
    }
}

// 综合性能测试
async function runComprehensivePerformanceTest() {
    const module = await import('./pkg/debug_example.js');
    await module.default();
    
    const analyzer = new WasmPerformanceAnalyzer();
    const testSuite = new module.PerformanceTestSuite();
    
    analyzer.startPerformanceObserver();
    
    console.log('开始性能测试...');
    
    // 测试1: 数据处理性能
    await analyzer.timeAsyncFunction('inefficient_processing', async () => {
        return testSuite.inefficient_processing(500);
    });
    
    await analyzer.timeAsyncFunction('optimized_processing', async () => {
        return testSuite.optimized_processing(500);
    });
    
    // 测试2: 内存分配性能
    await analyzer.timeAsyncFunction('allocation_heavy', async () => {
        return testSuite.allocation_heavy_function(100);
    });
    
    await analyzer.timeAsyncFunction('allocation_optimized', async () => {
        return testSuite.allocation_optimized_function(100);
    });
    
    // 测试3: 算法性能
    await analyzer.timeAsyncFunction('slow_algorithm', async () => {
        return testSuite.slow_algorithm(50);
    });
    
    await analyzer.timeAsyncFunction('fast_algorithm', async () => {
        return testSuite.fast_algorithm(50);
    });
    
    // 运行综合基准测试
    console.log('\n' + testSuite.run_performance_benchmark());
    
    // 分析结果
    console.log('\n=== 性能分析结果 ===');
    const report = analyzer.generatePerformanceReport();
    console.log(JSON.stringify(report, null, 2));
    
    // 检查性能回归
    const regressionResults = [
        analyzer.detectPerformanceRegression('optimized_processing', 50),
        analyzer.detectPerformanceRegression('allocation_optimized', 30),
        analyzer.detectPerformanceRegression('fast_algorithm', 20)
    ];
    
    console.log('\n=== 性能回归检测 ===');
    regressionResults.forEach((result, index) => {
        const testNames = ['optimized_processing', 'allocation_optimized', 'fast_algorithm'];
        console.log(`${testNames[index]}: ${result.reason}`);
    });
    
    // 可视化趋势
    console.log('\n=== 性能趋势 ===');
    analyzer.visualizePerformanceTrend('optimized_processing');
}

11.5 高级调试练习

练习 11.5.1 自定义调试工具开发 (30分)

题目: 开发一个自定义的 WebAssembly 调试工具，集成日志记录、错误跟踪和性能监控功能。

本章练习总结

本章练习全面覆盖了 WebAssembly 调试的核心技能：

🎯 学习目标达成

1. 调试环境掌握 - 熟练配置和使用各种调试工具
2. 断点调试精通 - 掌握高级断点技术和变量检查
3. 内存问题诊断 - 能够检测和修复内存泄漏
4. 性能优化能力 - 识别瓶颈并实施优化方案
5. 工具开发技能 - 构建自定义调试工具

📈 难度递进

• 基础练习 (15分) - 环境配置和基本调试
• 进阶练习 (20-25分) - 高级调试技术和问题诊断
• 高级练习 (30分) - 自定义工具开发和系统集成

🔧 关键技能

1. 工具使用熟练度 - 浏览器开发者工具、VS Code 等
2. 问题诊断能力 - 快速定位和解决各类问题
3. 性能分析技能 - 使用专业工具进行性能优化
4. 系统思维 - 构建完整的调试解决方案

通过这些练习，学习者将具备专业的 WebAssembly 调试能力，能够在实际项目中高效地诊断和解决问题。

第12章 实战项目

本章将通过真实的 WebAssembly 项目案例和最佳实践，帮助你理解如何在生产环境中构建、部署和维护 WebAssembly 应用。我们将分析成功的开源项目、商业应用案例，并提供完整的项目架构设计指南。

12.1 经典项目案例分析

12.1.1 Figma - 高性能图形编辑器

Figma 是 WebAssembly 在浏览器端应用的经典成功案例，展示了如何将复杂的桌面级应用移植到 Web 平台。

技术架构分析

核心技术栈:

渲染引擎:     C++ → WebAssembly
UI 层:        React + TypeScript  
通信层:       WebAssembly.Table + SharedArrayBuffer
图形处理:     Skia (C++) → WASM
数学计算:     高精度几何运算 (C++)

架构设计模式:

#![allow(unused)]
fn main() {
// 模拟 Figma 的渲染架构设计
use wasm_bindgen::prelude::*;
use std::collections::HashMap;

#[wasm_bindgen]
pub struct GraphicsRenderer {
    canvas_width: u32,
    canvas_height: u32,
    objects: Vec<GraphicsObject>,
    transform_stack: Vec<Transform>,
    viewport: Viewport,
}

#[wasm_bindgen]
pub struct GraphicsObject {
    id: u32,
    object_type: ObjectType,
    geometry: Geometry,
    style: Style,
    children: Vec<u32>,
}

#[wasm_bindgen]
#[derive(Clone)]
pub struct Transform {
    a: f64, b: f64, c: f64,
    d: f64, e: f64, f: f64,
}

#[wasm_bindgen]
pub enum ObjectType {
    Rectangle,
    Ellipse,
    Path,
    Text,
    Group,
    Frame,
}

#[wasm_bindgen]
impl GraphicsRenderer {
    #[wasm_bindgen(constructor)]
    pub fn new(width: u32, height: u32) -> GraphicsRenderer {
        GraphicsRenderer {
            canvas_width: width,
            canvas_height: height,
            objects: Vec::new(),
            transform_stack: vec![Transform::identity()],
            viewport: Viewport::new(0.0, 0.0, width as f64, height as f64),
        }
    }
    
    // 批量渲染优化 - 关键性能特性
    #[wasm_bindgen]
    pub fn render_frame(&mut self, object_ids: &[u32]) -> js_sys::Uint8Array {
        let mut frame_buffer = vec![0u8; (self.canvas_width * self.canvas_height * 4) as usize];
        
        // 视锥剔除 - 只渲染可见对象
        let visible_objects = self.cull_objects(object_ids);
        
        // 按 Z 顺序排序
        let mut sorted_objects = visible_objects;
        sorted_objects.sort_by_key(|obj| obj.z_index);
        
        // 批量渲染
        for object in sorted_objects {
            self.render_object(&object, &mut frame_buffer);
        }
        
        js_sys::Uint8Array::from(&frame_buffer[..])
    }
    
    // 高精度几何计算
    fn render_object(&self, object: &GraphicsObject, buffer: &mut [u8]) {
        match object.object_type {
            ObjectType::Rectangle => self.render_rectangle(object, buffer),
            ObjectType::Ellipse => self.render_ellipse(object, buffer),
            ObjectType::Path => self.render_path(object, buffer),
            ObjectType::Text => self.render_text(object, buffer),
            _ => {}
        }
    }
    
    // 向量化路径渲染
    fn render_path(&self, object: &GraphicsObject, buffer: &mut [u8]) {
        // 使用贝塞尔曲线细分算法
        let segments = object.geometry.path_segments();
        
        for segment in segments {
            match segment {
                PathSegment::MoveTo(x, y) => { /* 移动到指定点 */ }
                PathSegment::LineTo(x, y) => { 
                    self.draw_line_segment(buffer, segment.start(), (x, y));
                }
                PathSegment::CurveTo(cp1, cp2, end) => {
                    self.draw_bezier_curve(buffer, segment.start(), cp1, cp2, end);
                }
            }
        }
    }
    
    // 抗锯齿渲染
    fn draw_line_segment(&self, buffer: &mut [u8], start: (f64, f64), end: (f64, f64)) {
        // Wu's 线段抗锯齿算法实现
        let (x0, y0) = start;
        let (x1, y1) = end;
        
        let steep = (y1 - y0).abs() > (x1 - x0).abs();
        let (x0, y0, x1, y1) = if steep {
            (y0, x0, y1, x1)
        } else {
            (x0, y0, x1, y1)
        };
        
        let (x0, y0, x1, y1) = if x0 > x1 {
            (x1, y1, x0, y0)
        } else {
            (x0, y0, x1, y1)
        };
        
        let dx = x1 - x0;
        let dy = y1 - y0;
        let gradient = if dx == 0.0 { 1.0 } else { dy / dx };
        
        // 实际的像素绘制逻辑...
    }
    
    fn cull_objects(&self, object_ids: &[u32]) -> Vec<&GraphicsObject> {
        // 实现视锥剔除算法
        self.objects.iter()
            .filter(|obj| object_ids.contains(&obj.id))
            .filter(|obj| self.viewport.intersects(&obj.bounds()))
            .collect()
    }
}

// 支持的几何类型
#[wasm_bindgen]
pub struct Geometry {
    bounds: BoundingBox,
    path_data: Option<Vec<u8>>,
}

#[wasm_bindgen]
pub struct Viewport {
    x: f64,
    y: f64,
    width: f64,
    height: f64,
    scale: f64,
}

impl Viewport {
    pub fn new(x: f64, y: f64, width: f64, height: f64) -> Self {
        Viewport { x, y, width, height, scale: 1.0 }
    }
    
    pub fn intersects(&self, bounds: &BoundingBox) -> bool {
        // AABB 相交检测
        bounds.x < self.x + self.width &&
        bounds.x + bounds.width > self.x &&
        bounds.y < self.y + self.height &&
        bounds.y + bounds.height > self.y
    }
}
}

性能优化策略:

1. 内存管理优化:

#![allow(unused)]
fn main() {
use std::alloc::{GlobalAlloc, Layout, System};

// 自定义分配器用于图形对象
pub struct GraphicsAllocator {
    pool: Vec<u8>,
    free_blocks: Vec<(usize, usize)>, // (offset, size)
}

impl GraphicsAllocator {
    pub fn new(pool_size: usize) -> Self {
        GraphicsAllocator {
            pool: vec![0; pool_size],
            free_blocks: vec![(0, pool_size)],
        }
    }
    
    pub fn allocate_graphics_object(&mut self, size: usize) -> Option<*mut u8> {
        for i in 0..self.free_blocks.len() {
            let (offset, block_size) = self.free_blocks[i];
            if block_size >= size {
                // 分割块
                if block_size > size {
                    self.free_blocks[i] = (offset + size, block_size - size);
                } else {
                    self.free_blocks.remove(i);
                }
                
                return Some(unsafe { 
                    self.pool.as_mut_ptr().add(offset) 
                });
            }
        }
        None
    }
}
}

2. 多线程渲染 (使用 Web Workers):

// 主线程代码
class FigmaLikeRenderer {
    constructor() {
        this.renderWorkers = [];
        this.taskQueue = [];
        
        // 创建多个渲染工作线程
        for (let i = 0; i < navigator.hardwareConcurrency || 4; i++) {
            const worker = new Worker('render-worker.js');
            worker.onmessage = this.handleWorkerMessage.bind(this);
            this.renderWorkers.push(worker);
        }
    }
    
    async renderScene(scene) {
        // 将场景分割为多个渲染任务
        const tiles = this.divideTiles(scene);
        const renderPromises = [];
        
        for (const tile of tiles) {
            const promise = this.assignRenderTask(tile);
            renderPromises.push(promise);
        }
        
        const renderedTiles = await Promise.all(renderPromises);
        return this.composeTiles(renderedTiles);
    }
    
    assignRenderTask(tile) {
        return new Promise((resolve) => {
            const worker = this.getAvailableWorker();
            const taskId = this.generateTaskId();
            
            this.taskQueue.push({ taskId, resolve });
            
            worker.postMessage({
                type: 'render_tile',
                taskId: taskId,
                tile: tile,
                timestamp: performance.now()
            });
        });
    }
    
    handleWorkerMessage(event) {
        const { type, taskId, result, renderTime } = event.data;
        
        if (type === 'render_complete') {
            const task = this.taskQueue.find(t => t.taskId === taskId);
            if (task) {
                task.resolve(result);
                this.taskQueue = this.taskQueue.filter(t => t.taskId !== taskId);
            }
            
            // 性能监控
            console.log(`Tile rendered in ${renderTime}ms`);
        }
    }
}

关键技术要点

1. 内存布局优化:

• 紧凑的对象表示减少内存占用
• 空间分区算法提高碰撞检测效率
• 对象池模式减少 GC 压力

2. 渲染管道优化:

• 视锥剔除减少不必要的渲染
• 批处理减少 JS-WASM 边界开销
• 增量渲染只更新变化区域

3. 交互响应性:

• 时间分片避免阻塞主线程
• 预测性预加载提高用户体验
• 优先级队列处理紧急任务

12.1.2 AutoCAD Web App - CAD 引擎移植

AutoCAD Web 展示了如何将复杂的桌面 CAD 引擎成功移植到 WebAssembly。

移植策略分析

1. 模块化分离:

核心引擎:     C++ 几何内核 → WASM
渲染引擎:     OpenGL → WebGL 桥接
文件格式:     DWG/DXF 解析器 → WASM  
UI 交互:      Web 前端 (React)

2. 示例架构实现:

#![allow(unused)]
fn main() {
// CAD 引擎核心模块
#[wasm_bindgen]
pub struct CADEngine {
    entities: Vec<CADEntity>,
    layers: HashMap<String, Layer>,
    coordinate_system: CoordinateSystem,
    precision: f64,
}

#[wasm_bindgen]
pub struct CADEntity {
    id: u64,
    entity_type: EntityType,
    geometry: GeometryData,
    properties: EntityProperties,
    layer_id: String,
}

#[wasm_bindgen]
pub enum EntityType {
    Line,
    Arc,
    Circle,
    Polyline,
    Spline,
    Text,
    Dimension,
    Block,
}

#[wasm_bindgen]
impl CADEngine {
    #[wasm_bindgen(constructor)]
    pub fn new() -> CADEngine {
        CADEngine {
            entities: Vec::new(),
            layers: HashMap::new(),
            coordinate_system: CoordinateSystem::new(),
            precision: 1e-10, // 高精度计算
        }
    }
    
    // 高精度几何计算
    #[wasm_bindgen]
    pub fn create_line(&mut self, x1: f64, y1: f64, x2: f64, y2: f64) -> u64 {
        let entity_id = self.generate_id();
        let geometry = GeometryData::Line(Point2D::new(x1, y1), Point2D::new(x2, y2));
        
        let entity = CADEntity {
            id: entity_id,
            entity_type: EntityType::Line,
            geometry,
            properties: EntityProperties::default(),
            layer_id: "0".to_string(),
        };
        
        self.entities.push(entity);
        entity_id
    }
    
    // 复杂几何运算
    #[wasm_bindgen]
    pub fn boolean_union(&mut self, entity1_id: u64, entity2_id: u64) -> Option<u64> {
        let entity1 = self.find_entity(entity1_id)?;
        let entity2 = self.find_entity(entity2_id)?;
        
        // 实现布尔并集算法
        let result_geometry = self.compute_boolean_union(&entity1.geometry, &entity2.geometry)?;
        
        let result_id = self.generate_id();
        let result_entity = CADEntity {
            id: result_id,
            entity_type: EntityType::Polyline, // 简化假设
            geometry: result_geometry,
            properties: EntityProperties::default(),
            layer_id: entity1.layer_id.clone(),
        };
        
        self.entities.push(result_entity);
        Some(result_id)
    }
    
    // 空间索引优化
    #[wasm_bindgen]
    pub fn spatial_query(&self, min_x: f64, min_y: f64, max_x: f64, max_y: f64) -> Vec<u64> {
        let query_bounds = BoundingBox::new(min_x, min_y, max_x, max_y);
        
        self.entities.iter()
            .filter(|entity| {
                let entity_bounds = entity.geometry.bounding_box();
                query_bounds.intersects(&entity_bounds)
            })
            .map(|entity| entity.id)
            .collect()
    }
    
    // 捕捉点计算
    #[wasm_bindgen]
    pub fn snap_point(&self, x: f64, y: f64, snap_distance: f64) -> Option<js_sys::Array> {
        let query_point = Point2D::new(x, y);
        let mut closest_distance = snap_distance;
        let mut snap_point = None;
        
        for entity in &self.entities {
            if let Some(snaps) = entity.geometry.get_snap_points() {
                for snap in snaps {
                    let distance = query_point.distance_to(&snap);
                    if distance < closest_distance {
                        closest_distance = distance;
                        snap_point = Some(snap);
                    }
                }
            }
        }
        
        if let Some(point) = snap_point {
            let result = js_sys::Array::new();
            result.push(&JsValue::from(point.x));
            result.push(&JsValue::from(point.y));
            Some(result)
        } else {
            None
        }
    }
    
    // 文件格式支持
    #[wasm_bindgen]
    pub fn import_dxf(&mut self, dxf_data: &[u8]) -> Result<(), JsValue> {
        let mut parser = DXFParser::new();
        let entities = parser.parse(dxf_data)
            .map_err(|e| JsValue::from_str(&format!("DXF 解析错误: {}", e)))?;
        
        for entity_data in entities {
            self.import_entity(entity_data);
        }
        
        Ok(())
    }
    
    #[wasm_bindgen]
    pub fn export_dxf(&self) -> Result<js_sys::Uint8Array, JsValue> {
        let mut writer = DXFWriter::new();
        
        // 写入文件头
        writer.write_header();
        
        // 写入图层定义
        for (name, layer) in &self.layers {
            writer.write_layer(name, layer);
        }
        
        // 写入实体数据
        for entity in &self.entities {
            writer.write_entity(entity);
        }
        
        // 写入文件尾
        writer.write_footer();
        
        let data = writer.get_data();
        Ok(js_sys::Uint8Array::from(data.as_slice()))
    }
    
    fn compute_boolean_union(&self, geom1: &GeometryData, geom2: &GeometryData) -> Option<GeometryData> {
        // 实现 Clipper 或 CGAL 算法
        // 这是一个简化版本
        match (geom1, geom2) {
            (GeometryData::Circle(c1), GeometryData::Circle(c2)) => {
                // 圆的并集计算
                self.circle_union(c1, c2)
            }
            _ => {
                // 通用多边形布尔运算
                self.polygon_boolean_union(geom1, geom2)
            }
        }
    }
}

// 高精度几何数据结构
#[wasm_bindgen]
#[derive(Clone)]
pub struct Point2D {
    pub x: f64,
    pub y: f64,
}

impl Point2D {
    pub fn new(x: f64, y: f64) -> Self {
        Point2D { x, y }
    }
    
    pub fn distance_to(&self, other: &Point2D) -> f64 {
        let dx = self.x - other.x;
        let dy = self.y - other.y;
        (dx * dx + dy * dy).sqrt()
    }
}

// DXF 文件格式解析器
pub struct DXFParser {
    precision: f64,
}

impl DXFParser {
    pub fn new() -> Self {
        DXFParser { precision: 1e-10 }
    }
    
    pub fn parse(&mut self, data: &[u8]) -> Result<Vec<EntityData>, String> {
        // 实现 DXF 格式解析
        let content = std::str::from_utf8(data)
            .map_err(|_| "无效的 UTF-8 编码".to_string())?;
        
        let mut entities = Vec::new();
        let lines: Vec<&str> = content.lines().collect();
        let mut i = 0;
        
        while i < lines.len() {
            if lines[i].trim() == "ENTITIES" {
                i += 1;
                while i < lines.len() && lines[i].trim() != "ENDSEC" {
                    if let Some(entity) = self.parse_entity(&lines, &mut i)? {
                        entities.push(entity);
                    }
                }
                break;
            }
            i += 1;
        }
        
        Ok(entities)
    }
    
    fn parse_entity(&self, lines: &[&str], index: &mut usize) -> Result<Option<EntityData>, String> {
        // 具体的实体解析逻辑
        // 这里是简化版本
        if *index >= lines.len() {
            return Ok(None);
        }
        
        // 实际实现会更复杂，需要处理各种 DXF 代码
        *index += 1;
        Ok(None)
    }
}
}

性能关键技术

1. 空间数据结构:

#![allow(unused)]
fn main() {
// R-Tree 空间索引实现
pub struct RTree {
    root: Option<Box<RTreeNode>>,
    max_children: usize,
}

pub struct RTreeNode {
    bounds: BoundingBox,
    children: Vec<RTreeNode>,
    entities: Vec<u64>, // 叶子节点存储实体ID
    is_leaf: bool,
}

impl RTree {
    pub fn new(max_children: usize) -> Self {
        RTree {
            root: None,
            max_children,
        }
    }
    
    pub fn insert(&mut self, entity_id: u64, bounds: BoundingBox) {
        if let Some(ref mut root) = self.root {
            if root.children.len() >= self.max_children {
                // 分裂根节点
                let new_root = self.split_root();
                self.root = Some(new_root);
            }
        } else {
            // 创建根节点
            self.root = Some(Box::new(RTreeNode::new_leaf()));
        }
        
        if let Some(ref mut root) = self.root {
            self.insert_into_node(root, entity_id, bounds);
        }
    }
    
    pub fn query(&self, query_bounds: &BoundingBox) -> Vec<u64> {
        let mut results = Vec::new();
        
        if let Some(ref root) = self.root {
            self.query_node(root, query_bounds, &mut results);
        }
        
        results
    }
    
    fn query_node(&self, node: &RTreeNode, query_bounds: &BoundingBox, results: &mut Vec<u64>) {
        if !node.bounds.intersects(query_bounds) {
            return;
        }
        
        if node.is_leaf {
            for &entity_id in &node.entities {
                results.push(entity_id);
            }
        } else {
            for child in &node.children {
                self.query_node(child, query_bounds, results);
            }
        }
    }
}
}

2. 内存优化技术:

#![allow(unused)]
fn main() {
// 对象池用于频繁创建的几何对象
pub struct GeometryPool {
    point_pool: Vec<Point2D>,
    line_pool: Vec<Line>,
    arc_pool: Vec<Arc>,
    used_points: Vec<bool>,
    used_lines: Vec<bool>,
    used_arcs: Vec<bool>,
}

impl GeometryPool {
    pub fn new(initial_capacity: usize) -> Self {
        GeometryPool {
            point_pool: Vec::with_capacity(initial_capacity),
            line_pool: Vec::with_capacity(initial_capacity),
            arc_pool: Vec::with_capacity(initial_capacity),
            used_points: Vec::new(),
            used_lines: Vec::new(),
            used_arcs: Vec::new(),
        }
    }
    
    pub fn get_point(&mut self) -> (usize, &mut Point2D) {
        // 寻找未使用的点对象
        for (i, &used) in self.used_points.iter().enumerate() {
            if !used {
                self.used_points[i] = true;
                return (i, &mut self.point_pool[i]);
            }
        }
        
        // 如果没有可用对象，创建新的
        let index = self.point_pool.len();
        self.point_pool.push(Point2D::new(0.0, 0.0));
        self.used_points.push(true);
        (index, &mut self.point_pool[index])
    }
    
    pub fn release_point(&mut self, index: usize) {
        if index < self.used_points.len() {
            self.used_points[index] = false;
        }
    }
}
}

12.1.3 Photoshop Web - 图像处理引擎

Adobe Photoshop Web 版本展示了如何将复杂的图像处理算法移植到 WebAssembly。

图像处理架构

1. 核心滤镜实现:

#![allow(unused)]
fn main() {
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct ImageProcessor {
    width: u32,
    height: u32,
    channels: u32, // RGBA = 4
    data: Vec<u8>,
    temp_buffer: Vec<f32>, // 浮点计算缓冲区
    histogram: [u32; 256],
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: u32, height: u32) -> ImageProcessor {
        let pixel_count = (width * height * 4) as usize;
        ImageProcessor {
            width,
            height,
            channels: 4,
            data: vec![0; pixel_count],
            temp_buffer: vec![0.0; pixel_count],
            histogram: [0; 256],
        }
    }
    
    // 高斯模糊 - 分离式卷积优化
    #[wasm_bindgen]
    pub fn gaussian_blur(&mut self, radius: f32) {
        if radius <= 0.0 {
            return;
        }
        
        let sigma = radius / 3.0;
        let kernel_size = ((radius * 6.0) as usize) | 1; // 确保奇数
        let kernel = self.create_gaussian_kernel(kernel_size, sigma);
        
        // 水平方向模糊
        self.horizontal_blur(&kernel);
        
        // 垂直方向模糊
        self.vertical_blur(&kernel);
    }
    
    // 自适应直方图均衡化 (CLAHE)
    #[wasm_bindgen]
    pub fn adaptive_histogram_equalization(&mut self, clip_limit: f32, tile_size: u32) {
        let tile_x_count = (self.width + tile_size - 1) / tile_size;
        let tile_y_count = (self.height + tile_size - 1) / tile_size;
        
        // 为每个 tile 计算直方图
        let mut tile_histograms = Vec::new();
        
        for tile_y in 0..tile_y_count {
            for tile_x in 0..tile_x_count {
                let x_start = tile_x * tile_size;
                let y_start = tile_y * tile_size;
                let x_end = std::cmp::min(x_start + tile_size, self.width);
                let y_end = std::cmp::min(y_start + tile_size, self.height);
                
                let histogram = self.compute_tile_histogram(x_start, y_start, x_end, y_end);
                let clipped_histogram = self.clip_histogram(histogram, clip_limit);
                let equalized_mapping = self.compute_equalization_mapping(clipped_histogram);
                
                tile_histograms.push(equalized_mapping);
            }
        }
        
        // 双线性插值应用映射
        self.apply_adaptive_mapping(&tile_histograms, tile_size);
    }
    
    // 边缘检测 - Canny 算法
    #[wasm_bindgen]
    pub fn canny_edge_detection(&mut self, low_threshold: f32, high_threshold: f32) -> js_sys::Uint8Array {
        // 1. 高斯模糊预处理
        self.gaussian_blur(1.4);
        
        // 2. 计算梯度
        let (grad_magnitude, grad_direction) = self.compute_gradients();
        
        // 3. 非极大值抑制
        let suppressed = self.non_maximum_suppression(&grad_magnitude, &grad_direction);
        
        // 4. 双阈值检测
        let edges = self.double_threshold(&suppressed, low_threshold, high_threshold);
        
        // 5. 边缘连接
        let final_edges = self.hysteresis_edge_tracking(&edges);
        
        js_sys::Uint8Array::from(&final_edges[..])
    }
    
    // 内容感知缩放 (Seam Carving)
    #[wasm_bindgen]
    pub fn seam_carving_resize(&mut self, new_width: u32, new_height: u32) {
        let width_diff = self.width as i32 - new_width as i32;
        let height_diff = self.height as i32 - new_height as i32;
        
        // 移除垂直缝
        for _ in 0..width_diff.abs() {
            if width_diff > 0 {
                self.remove_vertical_seam();
            } else {
                self.add_vertical_seam();
            }
        }
        
        // 移除水平缝
        for _ in 0..height_diff.abs() {
            if height_diff > 0 {
                self.remove_horizontal_seam();
            } else {
                self.add_horizontal_seam();
            }
        }
    }
    
    // 智能选择工具 - 基于图论的分割
    #[wasm_bindgen]
    pub fn intelligent_select(&self, seed_x: u32, seed_y: u32, threshold: f32) -> js_sys::Uint8Array {
        let mut visited = vec![false; (self.width * self.height) as usize];
        let mut selection = vec![0u8; (self.width * self.height) as usize];
        let mut queue = std::collections::VecDeque::new();
        
        let seed_index = (seed_y * self.width + seed_x) as usize;
        let seed_color = self.get_pixel_color(seed_x, seed_y);
        
        queue.push_back((seed_x, seed_y));
        visited[seed_index] = true;
        selection[seed_index] = 255;
        
        while let Some((x, y)) = queue.pop_front() {
            // 检查8邻域
            for dy in -1..=1 {
                for dx in -1..=1 {
                    if dx == 0 && dy == 0 {
                        continue;
                    }
                    
                    let nx = x as i32 + dx;
                    let ny = y as i32 + dy;
                    
                    if nx >= 0 && nx < self.width as i32 && ny >= 0 && ny < self.height as i32 {
                        let nx = nx as u32;
                        let ny = ny as u32;
                        let neighbor_index = (ny * self.width + nx) as usize;
                        
                        if !visited[neighbor_index] {
                            let neighbor_color = self.get_pixel_color(nx, ny);
                            let color_diff = self.color_distance(&seed_color, &neighbor_color);
                            
                            if color_diff < threshold {
                                visited[neighbor_index] = true;
                                selection[neighbor_index] = 255;
                                queue.push_back((nx, ny));
                            }
                        }
                    }
                }
            }
        }
        
        js_sys::Uint8Array::from(&selection[..])
    }
    
    // 辅助方法实现
    fn create_gaussian_kernel(&self, size: usize, sigma: f32) -> Vec<f32> {
        let mut kernel = vec![0.0; size];
        let center = size / 2;
        let mut sum = 0.0;
        
        for (i, k) in kernel.iter_mut().enumerate() {
            let x = (i as i32 - center as i32) as f32;
            *k = (-x * x / (2.0 * sigma * sigma)).exp();
            sum += *k;
        }
        
        // 归一化
        for k in &mut kernel {
            *k /= sum;
        }
        
        kernel
    }
    
    fn horizontal_blur(&mut self, kernel: &[f32]) {
        let radius = kernel.len() / 2;
        self.temp_buffer.clear();
        self.temp_buffer.resize((self.width * self.height * 4) as usize, 0.0);
        
        for y in 0..self.height {
            for x in 0..self.width {
                for c in 0..self.channels {
                    let mut sum = 0.0;
                    
                    for (i, &k) in kernel.iter().enumerate() {
                        let sample_x = (x as i32 + i as i32 - radius as i32)
                            .max(0)
                            .min(self.width as i32 - 1) as u32;
                        
                        let pixel_index = ((y * self.width + sample_x) * self.channels + c) as usize;
                        sum += self.data[pixel_index] as f32 * k;
                    }
                    
                    let temp_index = ((y * self.width + x) * self.channels + c) as usize;
                    self.temp_buffer[temp_index] = sum;
                }
            }
        }
        
        // 复制回原数组
        for (i, &value) in self.temp_buffer.iter().enumerate() {
            self.data[i] = value.round().max(0.0).min(255.0) as u8;
        }
    }
    
    fn compute_gradients(&self) -> (Vec<f32>, Vec<f32>) {
        let mut magnitude = vec![0.0; (self.width * self.height) as usize];
        let mut direction = vec![0.0; (self.width * self.height) as usize];
        
        // Sobel 算子
        let sobel_x = [-1.0, 0.0, 1.0, -2.0, 0.0, 2.0, -1.0, 0.0, 1.0];
        let sobel_y = [-1.0, -2.0, -1.0, 0.0, 0.0, 0.0, 1.0, 2.0, 1.0];
        
        for y in 1..(self.height - 1) {
            for x in 1..(self.width - 1) {
                let mut gx = 0.0;
                let mut gy = 0.0;
                
                for ky in 0..3 {
                    for kx in 0..3 {
                        let pixel_x = x + kx - 1;
                        let pixel_y = y + ky - 1;
                        let pixel_index = (pixel_y * self.width + pixel_x) as usize * 4;
                        
                        // 转为灰度值
                        let gray = (self.data[pixel_index] as f32 * 0.299 +
                                  self.data[pixel_index + 1] as f32 * 0.587 +
                                  self.data[pixel_index + 2] as f32 * 0.114);
                        
                        let kernel_index = ky * 3 + kx;
                        gx += gray * sobel_x[kernel_index];
                        gy += gray * sobel_y[kernel_index];
                    }
                }
                
                let index = (y * self.width + x) as usize;
                magnitude[index] = (gx * gx + gy * gy).sqrt();
                direction[index] = gy.atan2(gx);
            }
        }
        
        (magnitude, direction)
    }
    
    fn remove_vertical_seam(&mut self) {
        // 计算能量函数
        let energy = self.compute_energy();
        
        // 动态规划找到最小能量缝
        let seam = self.find_min_vertical_seam(&energy);
        
        // 移除缝
        let mut new_data = Vec::new();
        for y in 0..self.height {
            for x in 0..self.width {
                if x != seam[y as usize] {
                    let pixel_index = (y * self.width + x) as usize * 4;
                    new_data.extend_from_slice(&self.data[pixel_index..pixel_index + 4]);
                }
            }
        }
        
        self.width -= 1;
        self.data = new_data;
    }
    
    fn compute_energy(&self) -> Vec<f32> {
        let mut energy = vec![0.0; (self.width * self.height) as usize];
        
        for y in 0..self.height {
            for x in 0..self.width {
                let mut total_energy = 0.0;
                
                // 计算 x 方向梯度
                if x > 0 && x < self.width - 1 {
                    let left_index = (y * self.width + x - 1) as usize * 4;
                    let right_index = (y * self.width + x + 1) as usize * 4;
                    
                    for c in 0..3 {
                        let diff = self.data[right_index + c] as f32 - self.data[left_index + c] as f32;
                        total_energy += diff * diff;
                    }
                }
                
                // 计算 y 方向梯度
                if y > 0 && y < self.height - 1 {
                    let up_index = ((y - 1) * self.width + x) as usize * 4;
                    let down_index = ((y + 1) * self.width + x) as usize * 4;
                    
                    for c in 0..3 {
                        let diff = self.data[down_index + c] as f32 - self.data[up_index + c] as f32;
                        total_energy += diff * diff;
                    }
                }
                
                energy[(y * self.width + x) as usize] = total_energy.sqrt();
            }
        }
        
        energy
    }
}
}

2. 性能优化策略:

#![allow(unused)]
fn main() {
// SIMD 优化的像素处理
#[cfg(target_arch = "wasm32")]
use std::arch::wasm32::*;

impl ImageProcessor {
    // SIMD 优化的亮度调整
    pub fn adjust_brightness_simd(&mut self, adjustment: f32) {
        let adjustment_vec = f32x4_splat(adjustment);
        let chunks = self.data.chunks_exact_mut(16); // 4 像素 = 16 字节
        let remainder = chunks.remainder();
        
        for chunk in chunks {
            // 加载 4 个像素 (16 字节)
            let pixels = v128_load(chunk.as_ptr() as *const v128);
            
            // 转换为浮点数
            let r = f32x4_convert_i32x4_u(u32x4_extend_low_u16x8(u16x8_extend_low_u8x16(pixels)));
            let g = f32x4_convert_i32x4_u(u32x4_extend_high_u16x8(u16x8_extend_low_u8x16(pixels)));
            let b = f32x4_convert_i32x4_u(u32x4_extend_low_u16x8(u16x8_extend_high_u8x16(pixels)));
            let a = f32x4_convert_i32x4_u(u32x4_extend_high_u16x8(u16x8_extend_high_u8x16(pixels)));
            
            // 应用亮度调整
            let r_adj = f32x4_add(r, adjustment_vec);
            let g_adj = f32x4_add(g, adjustment_vec);
            let b_adj = f32x4_add(b, adjustment_vec);
            
            // 限制到 0-255 范围
            let zero = f32x4_splat(0.0);
            let max_val = f32x4_splat(255.0);
            
            let r_clamped = f32x4_max(zero, f32x4_min(max_val, r_adj));
            let g_clamped = f32x4_max(zero, f32x4_min(max_val, g_adj));
            let b_clamped = f32x4_max(zero, f32x4_min(max_val, b_adj));
            
            // 转换回整数并存储
            let r_int = i32x4_trunc_sat_f32x4(r_clamped);
            let g_int = i32x4_trunc_sat_f32x4(g_clamped);
            let b_int = i32x4_trunc_sat_f32x4(b_clamped);
            let a_int = i32x4_trunc_sat_f32x4(a);
            
            let result = u8x16_narrow_i16x8(
                i16x8_narrow_i32x4(r_int, g_int),
                i16x8_narrow_i32x4(b_int, a_int)
            );
            
            v128_store(chunk.as_mut_ptr() as *mut v128, result);
        }
        
        // 处理剩余像素
        for pixel in remainder.chunks_exact_mut(4) {
            for channel in &mut pixel[0..3] {
                let new_value = *channel as f32 + adjustment;
                *channel = new_value.max(0.0).min(255.0) as u8;
            }
        }
    }
    
    // 多线程处理（通过 Web Workers）
    pub fn parallel_filter(&mut self, filter_type: FilterType) -> js_sys::Promise {
        let (tx, rx) = std::sync::mpsc::channel();
        let worker_count = 4; // 可配置
        let tile_height = self.height / worker_count;
        
        for worker_id in 0..worker_count {
            let y_start = worker_id * tile_height;
            let y_end = if worker_id == worker_count - 1 {
                self.height
            } else {
                (worker_id + 1) * tile_height
            };
            
            // 发送数据到 Web Worker
            let tile_data = self.extract_tile(0, y_start, self.width, y_end);
            
            // 这里需要与 JavaScript 配合实现 Web Worker 通信
            // 简化示例，实际需要通过 postMessage 发送到 worker
        }
        
        // 返回 Promise，在所有 worker 完成后 resolve
        js_sys::Promise::new(&mut |resolve, reject| {
            // 异步等待所有 worker 完成
        })
    }
}

// 滤镜类型枚举
#[wasm_bindgen]
pub enum FilterType {
    Blur,
    Sharpen,
    EdgeDetect,
    Emboss,
    Custom,
}

// 图像块数据结构
#[wasm_bindgen]
pub struct ImageTile {
    x: u32,
    y: u32,
    width: u32,
    height: u32,
    data: Vec<u8>,
}
}

JavaScript 集成层

// Photoshop Web 的主要架构
class PhotoshopEngine {
    constructor() {
        this.wasmModule = null;
        this.imageProcessor = null;
        this.filterWorkers = [];
        this.undoStack = [];
        this.redoStack = [];
    }
    
    async initialize() {
        // 加载 WASM 模块
        this.wasmModule = await import('./photoshop_engine.js');
        await this.wasmModule.default();
        
        // 初始化工作线程池
        this.initializeWorkerPool();
        
        console.log('Photoshop Engine initialized');
    }
    
    initializeWorkerPool() {
        const workerCount = navigator.hardwareConcurrency || 4;
        
        for (let i = 0; i < workerCount; i++) {
            const worker = new Worker('filter-worker.js');
            worker.onmessage = this.handleWorkerMessage.bind(this);
            this.filterWorkers.push({
                worker: worker,
                busy: false,
                id: i
            });
        }
    }
    
    loadImage(imageData) {
        const { width, height, data } = imageData;
        
        // 创建 WASM 图像处理器实例
        this.imageProcessor = new this.wasmModule.ImageProcessor(width, height);
        
        // 传输图像数据到 WASM
        const wasmData = new Uint8Array(this.wasmModule.memory.buffer, 
                                       this.imageProcessor.get_data_ptr(), 
                                       width * height * 4);
        wasmData.set(data);
        
        // 保存到撤销栈
        this.saveState();
    }
    
    async applyFilter(filterName, parameters = {}) {
        if (!this.imageProcessor) {
            throw new Error('No image loaded');
        }
        
        // 保存当前状态以支持撤销
        this.saveState();
        
        const startTime = performance.now();
        
        try {
            switch (filterName) {
                case 'gaussianBlur':
                    this.imageProcessor.gaussian_blur(parameters.radius || 5.0);
                    break;
                    
                case 'cannyEdge':
                    const edges = this.imageProcessor.canny_edge_detection(
                        parameters.lowThreshold || 50,
                        parameters.highThreshold || 150
                    );
                    return new Uint8Array(edges);
                    
                case 'adaptiveHistogram':
                    this.imageProcessor.adaptive_histogram_equalization(
                        parameters.clipLimit || 2.0,
                        parameters.tileSize || 8
                    );
                    break;
                    
                case 'seamCarving':
                    this.imageProcessor.seam_carving_resize(
                        parameters.newWidth,
                        parameters.newHeight
                    );
                    break;
                    
                default:
                    throw new Error(`Unknown filter: ${filterName}`);
            }
            
            const endTime = performance.now();
            console.log(`Filter ${filterName} applied in ${endTime - startTime}ms`);
            
            return this.getImageData();
            
        } catch (error) {
            // 如果出错，恢复上一个状态
            this.undo();
            throw error;
        }
    }
    
    // 智能选择工具
    intelligentSelect(x, y, threshold = 30) {
        if (!this.imageProcessor) {
            return null;
        }
        
        const selection = this.imageProcessor.intelligent_select(x, y, threshold);
        return new Uint8Array(selection);
    }
    
    // 批量处理支持
    async batchProcess(operations) {
        const results = [];
        
        for (const operation of operations) {
            const result = await this.applyFilter(operation.filter, operation.parameters);
            results.push(result);
            
            // 可以添加进度回调
            if (operation.onProgress) {
                operation.onProgress(results.length / operations.length);
            }
        }
        
        return results;
    }
    
    // 撤销/重做系统
    saveState() {
        if (this.imageProcessor) {
            const imageData = this.getImageData();
            this.undoStack.push({
                data: new Uint8Array(imageData.data),
                width: imageData.width,
                height: imageData.height,
                timestamp: Date.now()
            });
            
            // 限制撤销栈大小
            if (this.undoStack.length > 20) {
                this.undoStack.shift();
            }
            
            // 清空重做栈
            this.redoStack = [];
        }
    }
    
    undo() {
        if (this.undoStack.length > 1) {
            const currentState = this.undoStack.pop();
            this.redoStack.push(currentState);
            
            const previousState = this.undoStack[this.undoStack.length - 1];
            this.restoreState(previousState);
        }
    }
    
    redo() {
        if (this.redoStack.length > 0) {
            const state = this.redoStack.pop();
            this.undoStack.push(state);
            this.restoreState(state);
        }
    }
    
    restoreState(state) {
        // 重新创建图像处理器
        this.imageProcessor = new this.wasmModule.ImageProcessor(state.width, state.height);
        
        // 恢复图像数据
        const wasmData = new Uint8Array(this.wasmModule.memory.buffer,
                                       this.imageProcessor.get_data_ptr(),
                                       state.width * state.height * 4);
        wasmData.set(state.data);
    }
    
    getImageData() {
        if (!this.imageProcessor) {
            return null;
        }
        
        const width = this.imageProcessor.get_width();
        const height = this.imageProcessor.get_height();
        const dataPtr = this.imageProcessor.get_data_ptr();
        const dataLen = width * height * 4;
        
        const data = new Uint8Array(this.wasmModule.memory.buffer, dataPtr, dataLen);
        
        return {
            width: width,
            height: height,
            data: new Uint8Array(data) // 创建副本
        };
    }
    
    // 性能监控
    getPerformanceMetrics() {
        return {
            memoryUsage: this.wasmModule.memory.buffer.byteLength,
            undoStackSize: this.undoStack.length,
            redoStackSize: this.redoStack.length,
            workerStatus: this.filterWorkers.map(w => ({ id: w.id, busy: w.busy }))
        };
    }
    
    // 清理资源
    dispose() {
        if (this.imageProcessor) {
            this.imageProcessor.free();
            this.imageProcessor = null;
        }
        
        this.filterWorkers.forEach(worker => {
            worker.worker.terminate();
        });
        this.filterWorkers = [];
        
        this.undoStack = [];
        this.redoStack = [];
    }
}

// 使用示例
async function main() {
    const engine = new PhotoshopEngine();
    await engine.initialize();
    
    // 加载图像
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    engine.loadImage(imageData);
    
    // 应用滤镜
    await engine.applyFilter('gaussianBlur', { radius: 3.0 });
    await engine.applyFilter('adaptiveHistogram', { clipLimit: 2.0, tileSize: 8 });
    
    // 获取结果
    const result = engine.getImageData();
    ctx.putImageData(new ImageData(result.data, result.width, result.height), 0, 0);
    
    // 性能监控
    console.log('Performance:', engine.getPerformanceMetrics());
}

12.2 项目架构设计模式

12.2.1 分层架构模式

在大型 WebAssembly 项目中，分层架构有助于管理复杂性和维护性。

┌─────────────────────────────────────┐
│           前端 UI 层                │
│   (React/Vue/Angular + TypeScript) │
├─────────────────────────────────────┤
│          业务逻辑层                 │
│     (JavaScript/TypeScript)         │
├─────────────────────────────────────┤
│          WASM 接口层                │
│      (wasm-bindgen/JS Glue)         │
├─────────────────────────────────────┤
│          核心计算层                 │
│        (Rust/C++/AssemblyScript)    │
├─────────────────────────────────────┤
│          系统资源层                 │
│   (WebGL/WebAudio/FileSystem API)   │
└─────────────────────────────────────┘

示例实现

#![allow(unused)]
fn main() {
// 核心计算层 - 纯算法实现
pub mod core {
    pub trait Processor {
        type Input;
        type Output;
        type Error;
        
        fn process(&mut self, input: Self::Input) -> Result<Self::Output, Self::Error>;
    }
    
    // 数据处理管道
    pub struct ProcessingPipeline<T> {
        processors: Vec<Box<dyn Processor<Input = T, Output = T, Error = ProcessingError>>>,
    }
    
    impl<T> ProcessingPipeline<T> {
        pub fn new() -> Self {
            ProcessingPipeline {
                processors: Vec::new(),
            }
        }
        
        pub fn add_processor<P>(&mut self, processor: P) 
        where 
            P: Processor<Input = T, Output = T, Error = ProcessingError> + 'static,
        {
            self.processors.push(Box::new(processor));
        }
        
        pub fn execute(&mut self, mut data: T) -> Result<T, ProcessingError> {
            for processor in &mut self.processors {
                data = processor.process(data)?;
            }
            Ok(data)
        }
    }
}

// WASM 接口层 - 与 JavaScript 的桥接
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct WasmEngine {
    pipeline: core::ProcessingPipeline<Vec<f32>>,
    config: EngineConfig,
}

#[wasm_bindgen]
pub struct EngineConfig {
    buffer_size: usize,
    thread_count: usize,
    enable_simd: bool,
}

#[wasm_bindgen]
impl WasmEngine {
    #[wasm_bindgen(constructor)]
    pub fn new(config: EngineConfig) -> WasmEngine {
        let mut pipeline = core::ProcessingPipeline::new();
        
        // 根据配置添加处理器
        if config.enable_simd {
            pipeline.add_processor(SimdProcessor::new());
        }
        
        WasmEngine { pipeline, config }
    }
    
    #[wasm_bindgen]
    pub fn process_data(&mut self, data: &[f32]) -> Result<js_sys::Float32Array, JsValue> {
        let result = self.pipeline.execute(data.to_vec())
            .map_err(|e| JsValue::from_str(&format!("处理错误: {}", e)))?;
        
        Ok(js_sys::Float32Array::from(&result[..]))
    }
    
    #[wasm_bindgen]
    pub fn get_performance_info(&self) -> js_sys::Object {
        let info = js_sys::Object::new();
        
        js_sys::Reflect::set(
            &info, 
            &"buffer_size".into(), 
            &(self.config.buffer_size as u32).into()
        ).unwrap();
        
        js_sys::Reflect::set(
            &info, 
            &"thread_count".into(), 
            &(self.config.thread_count as u32).into()
        ).unwrap();
        
        info
    }
}

// 业务逻辑层 - JavaScript/TypeScript
}

// 业务逻辑层实现
export class DataProcessingService {
    private wasmEngine: WasmEngine | null = null;
    private isInitialized = false;
    
    async initialize(config: EngineConfig): Promise<void> {
        // 加载 WASM 模块
        const wasmModule = await import('./wasm_engine.js');
        await wasmModule.default();
        
        this.wasmEngine = new wasmModule.WasmEngine(config);
        this.isInitialized = true;
    }
    
    async processDataset(dataset: Float32Array[]): Promise<Float32Array[]> {
        if (!this.isInitialized || !this.wasmEngine) {
            throw new Error('Engine not initialized');
        }
        
        const results: Float32Array[] = [];
        
        for (const data of dataset) {
            try {
                const result = this.wasmEngine.process_data(data);
                results.push(result);
            } catch (error) {
                console.error('Processing failed:', error);
                throw error;
            }
        }
        
        return results;
    }
    
    getPerformanceMetrics(): PerformanceMetrics {
        if (!this.wasmEngine) {
            throw new Error('Engine not initialized');
        }
        
        const wasmInfo = this.wasmEngine.get_performance_info();
        
        return {
            bufferSize: wasmInfo.buffer_size,
            threadCount: wasmInfo.thread_count,
            memoryUsage: performance.memory?.usedJSHeapSize || 0,
            wasmMemoryUsage: this.getWasmMemoryUsage()
        };
    }
    
    private getWasmMemoryUsage(): number {
        // 获取 WASM 内存使用情况
        return 0; // 实际实现需要从 WASM 获取
    }
}

// 前端 UI 层集成
export class ProcessingUI {
    private service: DataProcessingService;
    private progressCallback?: (progress: number) => void;
    
    constructor() {
        this.service = new DataProcessingService();
    }
    
    async initializeEngine(): Promise<void> {
        const config = {
            buffer_size: 1024 * 1024, // 1MB
            thread_count: navigator.hardwareConcurrency || 4,
            enable_simd: this.checkSimdSupport()
        };
        
        await this.service.initialize(config);
    }
    
    async processFiles(files: File[]): Promise<void> {
        const datasets: Float32Array[] = [];
        
        // 读取文件数据
        for (const file of files) {
            const data = await this.readFileAsFloat32Array(file);
            datasets.push(data);
        }
        
        // 批量处理
        const results = await this.service.processDataset(datasets);
        
        // 显示结果
        this.displayResults(results);
    }
    
    setProgressCallback(callback: (progress: number) => void): void {
        this.progressCallback = callback;
    }
    
    private checkSimdSupport(): boolean {
        // 检测 SIMD 支持
        try {
            return typeof WebAssembly.Module.prototype.exports !== 'undefined';
        } catch {
            return false;
        }
    }
    
    private async readFileAsFloat32Array(file: File): Promise<Float32Array> {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            
            reader.onload = () => {
                try {
                    const arrayBuffer = reader.result as ArrayBuffer;
                    const float32Array = new Float32Array(arrayBuffer);
                    resolve(float32Array);
                } catch (error) {
                    reject(error);
                }
            };
            
            reader.onerror = () => reject(reader.error);
            reader.readAsArrayBuffer(file);
        });
    }
    
    private displayResults(results: Float32Array[]): void {
        // 实现结果显示逻辑
        console.log(`处理完成，共 ${results.length} 个结果`);
    }
}

// 类型定义
interface EngineConfig {
    buffer_size: number;
    thread_count: number;
    enable_simd: boolean;
}

interface PerformanceMetrics {
    bufferSize: number;
    threadCount: number;
    memoryUsage: number;
    wasmMemoryUsage: number;
}

12.2.2 微服务架构模式

对于复杂的 WebAssembly 应用，可以采用微服务架构，将不同功能模块独立部署。

#![allow(unused)]
fn main() {
// 模块化 WASM 服务设计
pub mod services {
    use wasm_bindgen::prelude::*;
    
    // 基础服务特征
    pub trait WasmService {
        fn initialize(&mut self) -> Result<(), ServiceError>;
        fn process(&mut self, request: ServiceRequest) -> Result<ServiceResponse, ServiceError>;
        fn shutdown(&mut self) -> Result<(), ServiceError>;
        fn get_status(&self) -> ServiceStatus;
    }
    
    // 图像处理服务
    #[wasm_bindgen]
    pub struct ImageProcessingService {
        initialized: bool,
        cache: std::collections::HashMap<String, Vec<u8>>,
        stats: ProcessingStats,
    }
    
    #[wasm_bindgen]
    impl ImageProcessingService {
        #[wasm_bindgen(constructor)]
        pub fn new() -> ImageProcessingService {
            ImageProcessingService {
                initialized: false,
                cache: std::collections::HashMap::new(),
                stats: ProcessingStats::new(),
            }
        }
        
        #[wasm_bindgen]
        pub fn resize_image(&mut self, data: &[u8], new_width: u32, new_height: u32) -> Result<js_sys::Uint8Array, JsValue> {
            if !self.initialized {
                return Err(JsValue::from_str("Service not initialized"));
            }
            
            self.stats.increment_request_count();
            let start_time = js_sys::Date::now();
            
            // 实际的图像缩放算法
            let result = self.perform_resize(data, new_width, new_height)
                .map_err(|e| JsValue::from_str(&format!("Resize failed: {}", e)))?;
            
            let duration = js_sys::Date::now() - start_time;
            self.stats.add_processing_time(duration);
            
            Ok(js_sys::Uint8Array::from(&result[..]))
        }
        
        #[wasm_bindgen]
        pub fn apply_filter(&mut self, data: &[u8], filter_type: &str, parameters: &js_sys::Object) -> Result<js_sys::Uint8Array, JsValue> {
            let filter_params = self.parse_filter_parameters(filter_type, parameters)?;
            
            match filter_type {
                "blur" => self.apply_blur_filter(data, &filter_params),
                "sharpen" => self.apply_sharpen_filter(data, &filter_params),
                "contrast" => self.apply_contrast_filter(data, &filter_params),
                _ => Err(JsValue::from_str("Unknown filter type"))
            }
        }
        
        #[wasm_bindgen]
        pub fn get_cache_stats(&self) -> js_sys::Object {
            let stats = js_sys::Object::new();
            
            js_sys::Reflect::set(&stats, &"cache_size".into(), &(self.cache.len() as u32).into()).unwrap();
            js_sys::Reflect::set(&stats, &"request_count".into(), &self.stats.request_count.into()).unwrap();
            js_sys::Reflect::set(&stats, &"average_processing_time".into(), &self.stats.average_processing_time().into()).unwrap();
            
            stats
        }
    }
    
    // 数据分析服务
    #[wasm_bindgen]
    pub struct DataAnalysisService {
        models: Vec<Box<dyn AnalysisModel>>,
        preprocessing_pipeline: Vec<Box<dyn DataPreprocessor>>,
    }
    
    #[wasm_bindgen]
    impl DataAnalysisService {
        #[wasm_bindgen(constructor)]
        pub fn new() -> DataAnalysisService {
            DataAnalysisService {
                models: Vec::new(),
                preprocessing_pipeline: Vec::new(),
            }
        }
        
        #[wasm_bindgen]
        pub fn train_model(&mut self, training_data: &[f32], labels: &[f32], model_type: &str) -> Result<String, JsValue> {
            let model_id = uuid::Uuid::new_v4().to_string();
            
            let model: Box<dyn AnalysisModel> = match model_type {
                "linear_regression" => Box::new(LinearRegressionModel::new()),
                "neural_network" => Box::new(NeuralNetworkModel::new()),
                "decision_tree" => Box::new(DecisionTreeModel::new()),
                _ => return Err(JsValue::from_str("Unsupported model type"))
            };
            
            // 训练模型的实现...
            
            self.models.push(model);
            Ok(model_id)
        }
        
        #[wasm_bindgen]
        pub fn predict(&self, model_id: &str, input_data: &[f32]) -> Result<js_sys::Float32Array, JsValue> {
            // 查找对应的模型并进行预测
            // 实现细节...
            Ok(js_sys::Float32Array::new(&js_sys::Object::new()))
        }
    }
    
    // 加密服务
    #[wasm_bindgen]
    pub struct CryptographyService {
        key_store: std::collections::HashMap<String, Vec<u8>>,
    }
    
    #[wasm_bindgen]
    impl CryptographyService {
        #[wasm_bindgen(constructor)]
        pub fn new() -> CryptographyService {
            CryptographyService {
                key_store: std::collections::HashMap::new(),
            }
        }
        
        #[wasm_bindgen]
        pub fn generate_key_pair(&mut self, algorithm: &str) -> Result<js_sys::Object, JsValue> {
            match algorithm {
                "rsa-2048" => self.generate_rsa_key_pair(2048),
                "ed25519" => self.generate_ed25519_key_pair(),
                "secp256k1" => self.generate_secp256k1_key_pair(),
                _ => Err(JsValue::from_str("Unsupported algorithm"))
            }
        }
        
        #[wasm_bindgen]
        pub fn encrypt(&self, data: &[u8], key_id: &str) -> Result<js_sys::Uint8Array, JsValue> {
            let key = self.key_store.get(key_id)
                .ok_or_else(|| JsValue::from_str("Key not found"))?;
            
            // 实际的加密实现
            let encrypted = self.perform_encryption(data, key)?;
            Ok(js_sys::Uint8Array::from(&encrypted[..]))
        }
        
        #[wasm_bindgen]
        pub fn decrypt(&self, encrypted_data: &[u8], key_id: &str) -> Result<js_sys::Uint8Array, JsValue> {
            let key = self.key_store.get(key_id)
                .ok_or_else(|| JsValue::from_str("Key not found"))?;
            
            // 实际的解密实现
            let decrypted = self.perform_decryption(encrypted_data, key)?;
            Ok(js_sys::Uint8Array::from(&decrypted[..]))
        }
    }
}

// 服务管理器
#[wasm_bindgen]
pub struct ServiceManager {
    services: std::collections::HashMap<String, Box<dyn services::WasmService>>,
    service_registry: ServiceRegistry,
}

#[wasm_bindgen]
impl ServiceManager {
    #[wasm_bindgen(constructor)]
    pub fn new() -> ServiceManager {
        ServiceManager {
            services: std::collections::HashMap::new(),
            service_registry: ServiceRegistry::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn register_service(&mut self, service_name: &str, service_type: &str) -> Result<(), JsValue> {
        let service: Box<dyn services::WasmService> = match service_type {
            "image_processing" => Box::new(services::ImageProcessingService::new()),
            "data_analysis" => Box::new(services::DataAnalysisService::new()),
            "cryptography" => Box::new(services::CryptographyService::new()),
            _ => return Err(JsValue::from_str("Unknown service type"))
        };
        
        self.services.insert(service_name.to_string(), service);
        self.service_registry.register(service_name, service_type);
        
        Ok(())
    }
    
    #[wasm_bindgen]
    pub fn get_service_status(&self, service_name: &str) -> Result<js_sys::Object, JsValue> {
        let service = self.services.get(service_name)
            .ok_or_else(|| JsValue::from_str("Service not found"))?;
        
        let status = service.get_status();
        let status_obj = js_sys::Object::new();
        
        js_sys::Reflect::set(&status_obj, &"name".into(), &service_name.into()).unwrap();
        js_sys::Reflect::set(&status_obj, &"status".into(), &status.state.into()).unwrap();
        js_sys::Reflect::set(&status_obj, &"uptime".into(), &status.uptime.into()).unwrap();
        
        Ok(status_obj)
    }
    
    #[wasm_bindgen]
    pub fn list_services(&self) -> js_sys::Array {
        let services = js_sys::Array::new();
        
        for service_name in self.services.keys() {
            services.push(&service_name.into());
        }
        
        services
    }
}
}

12.2.3 事件驱动架构

对于需要实时响应的应用，事件驱动架构提供了良好的扩展性。

#![allow(unused)]
fn main() {
// 事件系统设计
use std::collections::HashMap;
use wasm_bindgen::prelude::*;

// 事件类型定义
#[wasm_bindgen]
#[derive(Clone, Debug)]
pub struct Event {
    event_type: String,
    payload: String, // JSON serialized data
    timestamp: f64,
    source: String,
}

#[wasm_bindgen]
impl Event {
    #[wasm_bindgen(constructor)]
    pub fn new(event_type: String, payload: String, source: String) -> Event {
        Event {
            event_type,
            payload,
            timestamp: js_sys::Date::now(),
            source,
        }
    }
    
    #[wasm_bindgen(getter)]
    pub fn event_type(&self) -> String {
        self.event_type.clone()
    }
    
    #[wasm_bindgen(getter)]
    pub fn payload(&self) -> String {
        self.payload.clone()
    }
    
    #[wasm_bindgen(getter)]
    pub fn timestamp(&self) -> f64 {
        self.timestamp
    }
}

// 事件总线
#[wasm_bindgen]
pub struct EventBus {
    subscribers: HashMap<String, Vec<js_sys::Function>>,
    event_history: Vec<Event>,
    max_history_size: usize,
}

#[wasm_bindgen]
impl EventBus {
    #[wasm_bindgen(constructor)]
    pub fn new() -> EventBus {
        EventBus {
            subscribers: HashMap::new(),
            event_history: Vec::new(),
            max_history_size: 1000,
        }
    }
    
    #[wasm_bindgen]
    pub fn subscribe(&mut self, event_type: &str, callback: js_sys::Function) {
        self.subscribers
            .entry(event_type.to_string())
            .or_insert_with(Vec::new)
            .push(callback);
    }
    
    #[wasm_bindgen]
    pub fn unsubscribe(&mut self, event_type: &str, callback: &js_sys::Function) {
        if let Some(callbacks) = self.subscribers.get_mut(event_type) {
            callbacks.retain(|cb| !js_sys::Object::is(cb, callback));
        }
    }
    
    #[wasm_bindgen]
    pub fn emit(&mut self, event: Event) -> Result<(), JsValue> {
        // 记录事件历史
        self.event_history.push(event.clone());
        if self.event_history.len() > self.max_history_size {
            self.event_history.remove(0);
        }
        
        // 通知订阅者
        if let Some(callbacks) = self.subscribers.get(&event.event_type) {
            for callback in callbacks {
                let this = JsValue::NULL;
                let event_js = JsValue::from(event.clone());
                callback.call1(&this, &event_js)?;
            }
        }
        
        Ok(())
    }
    
    #[wasm_bindgen]
    pub fn get_event_history(&self, event_type: Option<String>) -> js_sys::Array {
        let history = js_sys::Array::new();
        
        for event in &self.event_history {
            if let Some(ref filter_type) = event_type {
                if &event.event_type != filter_type {
                    continue;
                }
            }
            
            history.push(&JsValue::from(event.clone()));
        }
        
        history
    }
}

// 实时数据处理器
#[wasm_bindgen]
pub struct RealTimeProcessor {
    event_bus: EventBus,
    processing_queue: Vec<Event>,
    batch_size: usize,
    processing_interval: f64,
}

#[wasm_bindgen]
impl RealTimeProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(batch_size: usize, processing_interval: f64) -> RealTimeProcessor {
        RealTimeProcessor {
            event_bus: EventBus::new(),
            processing_queue: Vec::new(),
            batch_size,
            processing_interval,
        }
    }
    
    #[wasm_bindgen]
    pub fn add_event(&mut self, event: Event) {
        self.processing_queue.push(event.clone());
        
        // 立即发布事件
        let _ = self.event_bus.emit(event);
        
        // 检查是否需要批处理
        if self.processing_queue.len() >= self.batch_size {
            self.process_batch();
        }
    }
    
    #[wasm_bindgen]
    pub fn process_batch(&mut self) {
        if self.processing_queue.is_empty() {
            return;
        }
        
        let batch = self.processing_queue.drain(..).collect::<Vec<_>>();
        
        // 分析事件模式
        let patterns = self.analyze_event_patterns(&batch);
        
        // 生成分析结果事件
        for pattern in patterns {
            let analysis_event = Event::new(
                "pattern_detected".to_string(),
                pattern.to_json(),
                "real_time_processor".to_string(),
            );
            
            let _ = self.event_bus.emit(analysis_event);
        }
    }
    
    #[wasm_bindgen]
    pub fn subscribe_to_events(&mut self, event_type: &str, callback: js_sys::Function) {
        self.event_bus.subscribe(event_type, callback);
    }
    
    fn analyze_event_patterns(&self, events: &[Event]) -> Vec<EventPattern> {
        let mut patterns = Vec::new();
        
        // 频率分析
        let mut type_counts = HashMap::new();
        for event in events {
            *type_counts.entry(&event.event_type).or_insert(0) += 1;
        }
        
        // 检测高频事件
        for (event_type, count) in type_counts {
            if count > 10 { // 阈值可配置
                patterns.push(EventPattern::HighFrequency {
                    event_type: event_type.clone(),
                    count,
                    time_window: self.processing_interval,
                });
            }
        }
        
        // 时间序列分析
        if events.len() > 2 {
            let time_diffs: Vec<f64> = events.windows(2)
                .map(|window| window[1].timestamp - window[0].timestamp)
                .collect();
            
            let avg_interval = time_diffs.iter().sum::<f64>() / time_diffs.len() as f64;
            
            if avg_interval < 100.0 { // 100ms 内的快速事件
                patterns.push(EventPattern::RapidSequence {
                    event_count: events.len(),
                    average_interval: avg_interval,
                });
            }
        }
        
        patterns
    }
}

// 事件模式定义
#[derive(Debug, Clone)]
pub enum EventPattern {
    HighFrequency {
        event_type: String,
        count: usize,
        time_window: f64,
    },
    RapidSequence {
        event_count: usize,
        average_interval: f64,
    },
    AnomalousPattern {
        description: String,
        confidence: f64,
    },
}

impl EventPattern {
    pub fn to_json(&self) -> String {
        match self {
            EventPattern::HighFrequency { event_type, count, time_window } => {
                format!(
                    r#"{{"type":"high_frequency","event_type":"{}","count":{},"time_window":{}}}"#,
                    event_type, count, time_window
                )
            }
            EventPattern::RapidSequence { event_count, average_interval } => {
                format!(
                    r#"{{"type":"rapid_sequence","event_count":{},"average_interval":{}}}"#,
                    event_count, average_interval
                )
            }
            EventPattern::AnomalousPattern { description, confidence } => {
                format!(
                    r#"{{"type":"anomalous","description":"{}","confidence":{}}}"#,
                    description, confidence
                )
            }
        }
    }
}
}

12.3 集成模式与最佳实践

12.3.1 渐进式增强模式

对于现有的 Web 应用，WebAssembly 可以作为性能增强的手段逐步引入。

// 渐进式增强的实现策略
export class ProgressiveEnhancement {
    private wasmAvailable = false;
    private wasmModule: any = null;
    private fallbackImplementation: FallbackProcessor;
    
    constructor() {
        this.fallbackImplementation = new FallbackProcessor();
        this.detectWasmSupport();
    }
    
    private async detectWasmSupport(): Promise<void> {
        try {
            if (typeof WebAssembly === 'object' && typeof WebAssembly.instantiate === 'function') {
                // 尝试加载 WASM 模块
                const wasmModule = await import('./enhanced_processor.js');
                await wasmModule.default();
                
                this.wasmModule = wasmModule;
                this.wasmAvailable = true;
                
                console.log('WebAssembly 增强功能已启用');
            }
        } catch (error) {
            console.warn('WebAssembly 不可用，使用 JavaScript 回退:', error);
            this.wasmAvailable = false;
        }
    }
    
    // 智能处理方法选择
    async processData(data: Float32Array, options: ProcessingOptions): Promise<Float32Array> {
        // 根据数据大小和复杂度选择处理方式
        const complexity = this.assessComplexity(data, options);
        
        if (this.wasmAvailable && complexity.shouldUseWasm) {
            return this.processWithWasm(data, options);
        } else {
            return this.processWithJavaScript(data, options);
        }
    }
    
    private assessComplexity(data: Float32Array, options: ProcessingOptions): ComplexityAssessment {
        const dataSize = data.length;
        const algorithmComplexity = this.getAlgorithmComplexity(options.algorithm);
        
        // 简单的启发式规则
        const shouldUseWasm = dataSize > 10000 || algorithmComplexity > 2;
        
        return {
            dataSize,
            algorithmComplexity,
            shouldUseWasm,
            estimatedJsTime: this.estimateJavaScriptTime(dataSize, algorithmComplexity),
            estimatedWasmTime: this.estimateWasmTime(dataSize, algorithmComplexity)
        };
    }
    
    private async processWithWasm(data: Float32Array, options: ProcessingOptions): Promise<Float32Array> {
        if (!this.wasmModule) {
            throw new Error('WASM module not available');
        }
        
        const processor = new this.wasmModule.EnhancedProcessor();
        
        try {
            const result = processor.process(data, options);
            return result;
        } finally {
            processor.free(); // 清理 WASM 资源
        }
    }
    
    private async processWithJavaScript(data: Float32Array, options: ProcessingOptions): Promise<Float32Array> {
        return this.fallbackImplementation.process(data, options);
    }
    
    // 性能监控和自适应选择
    async processWithAdaptiveSelection(data: Float32Array, options: ProcessingOptions): Promise<Float32Array> {
        const wasmStart = performance.now();
        
        if (this.wasmAvailable) {
            try {
                const wasmResult = await this.processWithWasm(data, options);
                const wasmTime = performance.now() - wasmStart;
                
                // 记录 WASM 性能
                this.recordPerformance('wasm', wasmTime, data.length);
                
                return wasmResult;
            } catch (error) {
                console.warn('WASM 处理失败，切换到 JavaScript:', error);
            }
        }
        
        // 回退到 JavaScript
        const jsStart = performance.now();
        const jsResult = await this.processWithJavaScript(data, options);
        const jsTime = performance.now() - jsStart;
        
        this.recordPerformance('javascript', jsTime, data.length);
        
        return jsResult;
    }
    
    private recordPerformance(method: 'wasm' | 'javascript', time: number, dataSize: number): void {
        const metrics = {
            method,
            time,
            dataSize,
            timestamp: Date.now(),
            throughput: dataSize / time // 元素/毫秒
        };
        
        // 发送到分析服务或本地存储
        this.sendMetrics(metrics);
    }
    
    getPerformanceReport(): PerformanceReport {
        return {
            wasmAvailable: this.wasmAvailable,
            totalProcessingOperations: this.getTotalOperations(),
            averageWasmTime: this.getAverageTime('wasm'),
            averageJavaScriptTime: this.getAverageTime('javascript'),
            recommendedMethod: this.getRecommendedMethod()
        };
    }
}

// JavaScript 回退实现
class FallbackProcessor {
    process(data: Float32Array, options: ProcessingOptions): Promise<Float32Array> {
        return new Promise((resolve) => {
            // 使用 Web Workers 进行后台处理以避免阻塞主线程
            const worker = new Worker('js-processor-worker.js');
            
            worker.postMessage({ data, options });
            
            worker.onmessage = (event) => {
                resolve(new Float32Array(event.data.result));
                worker.terminate();
            };
        });
    }
}

// 功能检测和优雅降级
export class FeatureDetection {
    static async detectCapabilities(): Promise<BrowserCapabilities> {
        const capabilities: BrowserCapabilities = {
            webAssembly: false,
            sharedArrayBuffer: false,
            webWorkers: false,
            simd: false,
            threads: false,
            bigInt: false
        };
        
        // WebAssembly 基础支持
        capabilities.webAssembly = typeof WebAssembly === 'object';
        
        // SharedArrayBuffer 支持 (用于多线程)
        capabilities.sharedArrayBuffer = typeof SharedArrayBuffer !== 'undefined';
        
        // Web Workers 支持
        capabilities.webWorkers = typeof Worker !== 'undefined';
        
        // BigInt 支持
        capabilities.bigInt = typeof BigInt !== 'undefined';
        
        if (capabilities.webAssembly) {
            // SIMD 支持检测
            try {
                await WebAssembly.instantiate(new Uint8Array([
                    0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00,
                    0x01, 0x04, 0x01, 0x60, 0x00, 0x00, 0x03, 0x02,
                    0x01, 0x00, 0x0a, 0x0a, 0x01, 0x08, 0x00, 0xfd,
                    0x0c, 0x00, 0x00, 0x00, 0x00, 0x0b
                ]));
                capabilities.simd = true;
            } catch {
                capabilities.simd = false;
            }
            
            // 线程支持检测
            capabilities.threads = capabilities.sharedArrayBuffer && capabilities.webWorkers;
        }
        
        return capabilities;
    }
    
    static createOptimalConfiguration(capabilities: BrowserCapabilities): ProcessingConfiguration {
        return {
            useWasm: capabilities.webAssembly,
            useSimd: capabilities.simd,
            useThreads: capabilities.threads,
            workerCount: capabilities.webWorkers ? (navigator.hardwareConcurrency || 4) : 0,
            batchSize: capabilities.webAssembly ? 1024 : 256,
            memoryStrategy: capabilities.sharedArrayBuffer ? 'shared' : 'copied'
        };
    }
}

// 类型定义
interface ProcessingOptions {
    algorithm: string;
    parameters: Record<string, any>;
    precision: 'float32' | 'float64';
    parallel: boolean;
}

interface ComplexityAssessment {
    dataSize: number;
    algorithmComplexity: number;
    shouldUseWasm: boolean;
    estimatedJsTime: number;
    estimatedWasmTime: number;
}

interface BrowserCapabilities {
    webAssembly: boolean;
    sharedArrayBuffer: boolean;
    webWorkers: boolean;
    simd: boolean;
    threads: boolean;
    bigInt: boolean;
}

interface ProcessingConfiguration {
    useWasm: boolean;
    useSimd: boolean;
    useThreads: boolean;
    workerCount: number;
    batchSize: number;
    memoryStrategy: 'shared' | 'copied';
}

interface PerformanceReport {
    wasmAvailable: boolean;
    totalProcessingOperations: number;
    averageWasmTime: number;
    averageJavaScriptTime: number;
    recommendedMethod: 'wasm' | 'javascript';
}

12.3.2 测试策略

完整的测试策略对于 WebAssembly 项目至关重要。

#![allow(unused)]
fn main() {
// WASM 模块的单元测试
#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::*;
    
    wasm_bindgen_test_configure!(run_in_browser);
    
    #[wasm_bindgen_test]
    fn test_basic_computation() {
        let mut processor = ImageProcessor::new(100, 100);
        
        // 测试基本功能
        let result = processor.gaussian_blur(5.0);
        assert!(result.is_ok());
    }
    
    #[wasm_bindgen_test]
    fn test_performance_requirements() {
        let mut processor = ImageProcessor::new(1000, 1000);
        
        let start_time = js_sys::Date::now();
        processor.gaussian_blur(10.0);
        let end_time = js_sys::Date::now();
        
        let duration = end_time - start_time;
        
        // 性能要求：大图像处理应在 1 秒内完成
        assert!(duration < 1000.0, "处理时间超出要求: {}ms", duration);
    }
    
    #[wasm_bindgen_test]
    fn test_memory_usage() {
        let processor = ImageProcessor::new(500, 500);
        
        // 检查内存使用是否在合理范围内
        let memory_usage = get_wasm_memory_usage();
        let expected_max = 500 * 500 * 4 * 2; // 图像数据 + 临时缓冲区
        
        assert!(memory_usage < expected_max, "内存使用超出预期: {}", memory_usage);
    }
    
    #[wasm_bindgen_test]
    async fn test_concurrent_operations() {
        let mut processor1 = ImageProcessor::new(100, 100);
        let mut processor2 = ImageProcessor::new(100, 100);
        
        // 测试并发操作
        let future1 = async { processor1.gaussian_blur(3.0) };
        let future2 = async { processor2.gaussian_blur(5.0) };
        
        let (result1, result2) = futures::join!(future1, future2);
        
        assert!(result1.is_ok() && result2.is_ok());
    }
}

// 集成测试工具
#[wasm_bindgen]
pub struct TestHarness {
    test_results: Vec<TestResult>,
    performance_metrics: Vec<PerformanceMetric>,
}

#[wasm_bindgen]
impl TestHarness {
    #[wasm_bindgen(constructor)]
    pub fn new() -> TestHarness {
        TestHarness {
            test_results: Vec::new(),
            performance_metrics: Vec::new(),
        }
    }
    
    #[wasm_bindgen]
    pub fn run_benchmark_suite(&mut self) -> js_sys::Promise {
        let benchmarks = vec![
            ("small_image_blur", 100, 100),
            ("medium_image_blur", 500, 500),
            ("large_image_blur", 1000, 1000),
        ];
        
        // 返回 Promise 以支持异步测试
        js_sys::Promise::new(&mut |resolve, reject| {
            for (name, width, height) in benchmarks {
                match self.run_single_benchmark(name, width, height) {
                    Ok(metric) => {
                        self.performance_metrics.push(metric);
                    }
                    Err(e) => {
                        reject.call1(&JsValue::NULL, &JsValue::from_str(&e)).unwrap();
                        return;
                    }
                }
            }
            
            let results = self.get_benchmark_results();
            resolve.call1(&JsValue::NULL, &results).unwrap();
        })
    }
    
    fn run_single_benchmark(&self, name: &str, width: u32, height: u32) -> Result<PerformanceMetric, String> {
        let mut processor = ImageProcessor::new(width, height);
        
        let start_time = js_sys::Date::now();
        let start_memory = get_wasm_memory_usage();
        
        // 执行基准测试
        processor.gaussian_blur(5.0);
        
        let end_time = js_sys::Date::now();
        let end_memory = get_wasm_memory_usage();
        
        let duration = end_time - start_time;
        let memory_delta = end_memory - start_memory;
        
        Ok(PerformanceMetric {
            test_name: name.to_string(),
            duration,
            memory_delta,
            throughput: (width * height) as f64 / duration,
            success: true,
        })
    }
    
    #[wasm_bindgen]
    pub fn get_benchmark_results(&self) -> js_sys::Object {
        let results = js_sys::Object::new();
        
        let metrics_array = js_sys::Array::new();
        for metric in &self.performance_metrics {
            let metric_obj = js_sys::Object::new();
            
            js_sys::Reflect::set(&metric_obj, &"test_name".into(), &metric.test_name.clone().into()).unwrap();
            js_sys::Reflect::set(&metric_obj, &"duration".into(), &metric.duration.into()).unwrap();
            js_sys::Reflect::set(&metric_obj, &"memory_delta".into(), &(metric.memory_delta as f64).into()).unwrap();
            js_sys::Reflect::set(&metric_obj, &"throughput".into(), &metric.throughput.into()).unwrap();
            
            metrics_array.push(&metric_obj);
        }
        
        js_sys::Reflect::set(&results, &"metrics".into(), &metrics_array).unwrap();
        
        results
    }
}

#[derive(Clone, Debug)]
struct TestResult {
    test_name: String,
    passed: bool,
    error_message: Option<String>,
    duration: f64,
}

#[derive(Clone, Debug)]
struct PerformanceMetric {
    test_name: String,
    duration: f64,
    memory_delta: usize,
    throughput: f64,
    success: bool,
}

// 辅助函数
fn get_wasm_memory_usage() -> usize {
    // 实际实现需要通过 WebAssembly.Memory 获取
    0
}
}

JavaScript 端的端到端测试:

// E2E 测试套件
import { test, expect } from '@playwright/test';

class WasmTestSuite {
    async runCompleteTestSuite() {
        await this.testModuleLoading();
        await this.testFunctionalCorrectness();
        await this.testPerformanceRequirements();
        await this.testErrorHandling();
        await this.testMemoryManagement();
        await this.testBrowserCompatibility();
    }
    
    async testModuleLoading() {
        test('WASM module should load successfully', async ({ page }) => {
            await page.goto('/wasm-app');
            
            // 等待 WASM 模块加载
            await page.waitForFunction(() => window.wasmLoaded === true);
            
            // 检查基本功能是否可用
            const result = await page.evaluate(() => {
                return window.wasmModule.test_basic_function();
            });
            
            expect(result).toBeTruthy();
        });
    }
    
    async testFunctionalCorrectness() {
        test('Image processing should produce correct results', async ({ page }) => {
            await page.goto('/image-editor');
            
            // 上传测试图像
            await page.setInputFiles('#image-input', 'test-image.png');
            
            // 应用模糊滤镜
            await page.click('#blur-filter');
            await page.fill('#blur-radius', '5');
            await page.click('#apply-filter');
            
            // 等待处理完成
            await page.waitForSelector('#processing-complete');
            
            // 验证结果
            const result = await page.evaluate(() => {
                const canvas = document.getElementById('result-canvas');
                return canvas.toDataURL();
            });
            
            expect(result).toContain('data:image/png');
        });
    }
    
    async testPerformanceRequirements() {
        test('Large image processing should meet performance requirements', async ({ page }) => {
            await page.goto('/performance-test');
            
            const startTime = Date.now();
            
            const result = await page.evaluate(() => {
                return window.runPerformanceTest('large_image_blur');
            });
            
            const endTime = Date.now();
            const duration = endTime - startTime;
            
            // 性能要求检查
            expect(duration).toBeLessThan(5000); // 5秒内完成
            expect(result.success).toBe(true);
        });
    }
    
    async testErrorHandling() {
        test('Should handle invalid input gracefully', async ({ page }) => {
            await page.goto('/error-test');
            
            // 测试各种错误情况
            const errorTests = [
                { input: null, expectedError: 'Invalid input' },
                { input: [], expectedError: 'Empty data' },
                { input: 'invalid', expectedError: 'Type error' }
            ];
            
            for (const errorTest of errorTests) {
                const result = await page.evaluate((test) => {
                    try {
                        window.wasmModule.process_data(test.input);
                        return { success: true, error: null };
                    } catch (error) {
                        return { success: false, error: error.message };
                    }
                }, errorTest);
                
                expect(result.success).toBe(false);
                expect(result.error).toContain(errorTest.expectedError);
            }
        });
    }
    
    async testMemoryManagement() {
        test('Should not have memory leaks', async ({ page }) => {
            await page.goto('/memory-test');
            
            // 获取初始内存使用
            const initialMemory = await page.evaluate(() => {
                return performance.memory.usedJSHeapSize;
            });
            
            // 执行大量操作
            await page.evaluate(() => {
                for (let i = 0; i < 1000; i++) {
                    const processor = new window.wasmModule.ImageProcessor(100, 100);
                    processor.gaussian_blur(3.0);
                    processor.free(); // 确保清理
                }
            });
            
            // 强制垃圾回收
            await page.evaluate(() => {
                if (window.gc) {
                    window.gc();
                }
            });
            
            // 检查内存使用
            const finalMemory = await page.evaluate(() => {
                return performance.memory.usedJSHeapSize;
            });
            
            const memoryGrowth = finalMemory - initialMemory;
            const acceptableGrowth = initialMemory * 0.1; // 10% 增长被认为可接受
            
            expect(memoryGrowth).toBeLessThan(acceptableGrowth);
        });
    }
    
    async testBrowserCompatibility() {
        const browsers = ['chromium', 'firefox', 'webkit'];
        
        for (const browserName of browsers) {
            test(`Should work correctly in ${browserName}`, async ({ page }) => {
                await page.goto('/compatibility-test');
                
                const capabilities = await page.evaluate(() => {
                    return window.detectBrowserCapabilities();
                });
                
                expect(capabilities.webAssembly).toBe(true);
                
                // 运行基本功能测试
                const result = await page.evaluate(() => {
                    return window.runBasicFunctionalityTest();
                });
                
                expect(result.success).toBe(true);
            });
        }
    }
}

// 性能回归测试
class PerformanceRegressionTest {
    private baselineMetrics: Map<string, number> = new Map();
    
    async establishBaseline() {
        const tests = [
            'image_blur_100x100',
            'image_blur_500x500',
            'image_blur_1000x1000',
            'matrix_multiply_100x100',
            'fft_1024_points'
        ];
        
        for (const testName of tests) {
            const metrics = await this.runPerformanceTest(testName);
            this.baselineMetrics.set(testName, metrics.averageDuration);
        }
    }
    
    async checkForRegressions() {
        const regressionThreshold = 1.2; // 20% 性能退化阈值
        const regressions: string[] = [];
        
        for (const [testName, baseline] of this.baselineMetrics) {
            const currentMetrics = await this.runPerformanceTest(testName);
            const regressionRatio = currentMetrics.averageDuration / baseline;
            
            if (regressionRatio > regressionThreshold) {
                regressions.push(`${testName}: ${(regressionRatio * 100 - 100).toFixed(1)}% slower`);
            }
        }
        
        if (regressions.length > 0) {
            throw new Error(`Performance regressions detected:\n${regressions.join('\n')}`);
        }
    }
    
    private async runPerformanceTest(testName: string): Promise<PerformanceMetrics> {
        const iterations = 10;
        const durations: number[] = [];
        
        for (let i = 0; i < iterations; i++) {
            const start = performance.now();
            
            // 运行具体的测试
            await this.executeTest(testName);
            
            const end = performance.now();
            durations.push(end - start);
        }
        
        return {
            testName,
            averageDuration: durations.reduce((a, b) => a + b, 0) / durations.length,
            minDuration: Math.min(...durations),
            maxDuration: Math.max(...durations),
            standardDeviation: this.calculateStdDev(durations)
        };
    }
    
    private calculateStdDev(values: number[]): number {
        const mean = values.reduce((a, b) => a + b, 0) / values.length;
        const squaredDiffs = values.map(value => Math.pow(value - mean, 2));
        const avgSquaredDiff = squaredDiffs.reduce((a, b) => a + b, 0) / squaredDiffs.length;
        return Math.sqrt(avgSquaredDiff);
    }
}

interface PerformanceMetrics {
    testName: string;
    averageDuration: number;
    minDuration: number;
    maxDuration: number;
    standardDeviation: number;
}

12.3.3 部署和 CI/CD

# .github/workflows/wasm-ci.yml
name: WebAssembly CI/CD Pipeline

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        rust-version: [stable, beta]
        node-version: [16, 18, 20]
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Rust
      uses: actions-rs/toolchain@v1
      with:
        toolchain: ${{ matrix.rust-version }}
        target: wasm32-unknown-unknown
        override: true
        components: rustfmt, clippy
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    
    - name: Install wasm-pack
      run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
    
    - name: Install dependencies
      run: npm ci
    
    - name: Lint Rust code
      run: cargo clippy --target wasm32-unknown-unknown -- -D warnings
    
    - name: Format check
      run: cargo fmt -- --check
    
    - name: Build WASM module
      run: wasm-pack build --target web --out-dir pkg
    
    - name: Run Rust tests
      run: wasm-pack test --headless --chrome
    
    - name: Build TypeScript
      run: npm run build
    
    - name: Run JavaScript tests
      run: npm test
    
    - name: Run E2E tests
      run: npm run test:e2e
    
    - name: Performance regression tests
      run: npm run test:performance
    
    - name: Upload test results
      uses: actions/upload-artifact@v3
      if: always()
      with:
        name: test-results-${{ matrix.rust-version }}-${{ matrix.node-version }}
        path: |
          test-results/
          coverage/
          benchmarks/

  build:
    needs: test
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup build environment
      run: |
        curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
        npm ci
    
    - name: Build optimized WASM
      run: |
        wasm-pack build --target web --release --out-dir dist/pkg
        wasm-opt -O4 dist/pkg/*.wasm -o dist/pkg/optimized.wasm
    
    - name: Build production bundle
      run: npm run build:production
    
    - name: Analyze bundle size
      run: |
        npm run analyze:bundle
        npm run analyze:wasm-size
    
    - name: Upload build artifacts
      uses: actions/upload-artifact@v3
      with:
        name: production-build
        path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
    - name: Download build artifacts
      uses: actions/download-artifact@v3
      with:
        name: production-build
        path: dist/
    
    - name: Deploy to staging
      run: |
        # 部署到测试环境
        aws s3 sync dist/ s3://staging-bucket/
        aws cloudfront create-invalidation --distribution-id $STAGING_DISTRIBUTION_ID --paths "/*"
    
    - name: Run smoke tests
      run: |
        # 对部署的应用运行基本的烟雾测试
        npm run test:smoke -- --url https://staging.example.com
    
    - name: Deploy to production
      if: success()
      run: |
        # 部署到生产环境
        aws s3 sync dist/ s3://production-bucket/
        aws cloudfront create-invalidation --distribution-id $PRODUCTION_DISTRIBUTION_ID --paths "/*"

  security:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    
    - name: Security audit
      run: |
        cargo audit
        npm audit
    
    - name: WASM security scan
      run: |
        # 检查 WASM 模块的安全问题
        wasm-validate dist/pkg/*.wasm
        
    - name: Dependency vulnerability scan
      uses: snyk/actions/node@master
      env:
        SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}

通过本章的学习，你现在应该对如何构建、架构和部署真实的 WebAssembly 项目有了深入的理解。从经典案例分析到具体的架构模式，再到完整的测试和部署策略，这些知识将帮助你在实际项目中成功应用 WebAssembly 技术。

记住以下关键要点：

1. 渐进式采用：不要一次性重写整个应用，而是从性能关键部分开始
2. 架构设计：选择合适的架构模式以管理复杂性
3. 性能监控：建立完善的性能监控和回归检测机制
4. 测试策略：实现全面的测试覆盖，包括单元、集成和端到端测试
5. 持续集成：建立自动化的构建、测试和部署流程

在下一个练习章节中，你将有机会实践这些概念，构建自己的 WebAssembly 实战项目。

第12章 练习题

实战项目开发题

1. WebAssembly 游戏引擎搭建 (30分)

题目：使用 Rust 和 WebAssembly 构建一个简单的 2D 游戏引擎，要求实现以下功能：

1. 基本的渲染系统（Canvas 2D 或 WebGL）
2. 游戏对象管理系统
3. 简单的物理计算（碰撞检测）
4. 输入处理系统

技术要求：

• 使用 wasm-bindgen 进行 JavaScript 绑定
• 实现高性能的游戏循环
• 支持至少 60 FPS 的渲染

# Cargo.toml
[package]
name = "wasm-game-engine"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
web-sys = "0.3"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
  "CanvasRenderingContext2d",
  "Document",
  "Element",
  "EventTarget",
  "HtmlCanvasElement",
  "Window",
  "KeyboardEvent",
  "MouseEvent",
  "Performance",
]

#![allow(unused)]
fn main() {
// src/lib.rs
use wasm_bindgen::prelude::*;
use web_sys::{CanvasRenderingContext2d, HtmlCanvasElement, KeyboardEvent};
use std::collections::HashMap;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
    
    #[wasm_bindgen(js_namespace = performance)]
    fn now() -> f64;
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 2D 向量结构
#[wasm_bindgen]
#[derive(Clone, Copy, Debug)]
pub struct Vec2 {
    pub x: f32,
    pub y: f32,
}

#[wasm_bindgen]
impl Vec2 {
    #[wasm_bindgen(constructor)]
    pub fn new(x: f32, y: f32) -> Vec2 {
        Vec2 { x, y }
    }
    
    pub fn length(&self) -> f32 {
        (self.x * self.x + self.y * self.y).sqrt()
    }
    
    pub fn normalize(&self) -> Vec2 {
        let len = self.length();
        if len > 0.0 {
            Vec2 { x: self.x / len, y: self.y / len }
        } else {
            Vec2 { x: 0.0, y: 0.0 }
        }
    }
    
    pub fn distance_to(&self, other: &Vec2) -> f32 {
        let dx = self.x - other.x;
        let dy = self.y - other.y;
        (dx * dx + dy * dy).sqrt()
    }
}

// 游戏对象
#[wasm_bindgen]
pub struct GameObject {
    id: u32,
    position: Vec2,
    velocity: Vec2,
    size: Vec2,
    color: String,
    active: bool,
}

#[wasm_bindgen]
impl GameObject {
    #[wasm_bindgen(constructor)]
    pub fn new(id: u32, x: f32, y: f32, width: f32, height: f32) -> GameObject {
        GameObject {
            id,
            position: Vec2::new(x, y),
            velocity: Vec2::new(0.0, 0.0),
            size: Vec2::new(width, height),
            color: "blue".to_string(),
            active: true,
        }
    }
    
    #[wasm_bindgen(getter)]
    pub fn id(&self) -> u32 { self.id }
    
    #[wasm_bindgen(getter)]
    pub fn x(&self) -> f32 { self.position.x }
    
    #[wasm_bindgen(getter)]
    pub fn y(&self) -> f32 { self.position.y }
    
    #[wasm_bindgen(setter)]
    pub fn set_x(&mut self, x: f32) { self.position.x = x; }
    
    #[wasm_bindgen(setter)]
    pub fn set_y(&mut self, y: f32) { self.position.y = y; }
    
    pub fn set_velocity(&mut self, vx: f32, vy: f32) {
        self.velocity = Vec2::new(vx, vy);
    }
    
    pub fn set_color(&mut self, color: &str) {
        self.color = color.to_string();
    }
    
    pub fn update(&mut self, delta_time: f32) {
        if !self.active { return; }
        
        self.position.x += self.velocity.x * delta_time;
        self.position.y += self.velocity.y * delta_time;
    }
    
    pub fn check_collision(&self, other: &GameObject) -> bool {
        if !self.active || !other.active { return false; }
        
        let dx = self.position.x - other.position.x;
        let dy = self.position.y - other.position.y;
        let min_distance = (self.size.x + other.size.x) / 2.0;
        
        dx * dx + dy * dy < min_distance * min_distance
    }
}

// 输入管理器
#[wasm_bindgen]
pub struct InputManager {
    keys_pressed: HashMap<String, bool>,
    mouse_position: Vec2,
}

#[wasm_bindgen]
impl InputManager {
    #[wasm_bindgen(constructor)]
    pub fn new() -> InputManager {
        InputManager {
            keys_pressed: HashMap::new(),
            mouse_position: Vec2::new(0.0, 0.0),
        }
    }
    
    pub fn set_key_pressed(&mut self, key: &str, pressed: bool) {
        self.keys_pressed.insert(key.to_string(), pressed);
    }
    
    pub fn is_key_pressed(&self, key: &str) -> bool {
        *self.keys_pressed.get(key).unwrap_or(&false)
    }
    
    pub fn set_mouse_position(&mut self, x: f32, y: f32) {
        self.mouse_position = Vec2::new(x, y);
    }
    
    #[wasm_bindgen(getter)]
    pub fn mouse_x(&self) -> f32 { self.mouse_position.x }
    
    #[wasm_bindgen(getter)]
    pub fn mouse_y(&self) -> f32 { self.mouse_position.y }
}

// 游戏引擎主类
#[wasm_bindgen]
pub struct GameEngine {
    canvas: HtmlCanvasElement,
    context: CanvasRenderingContext2d,
    game_objects: Vec<GameObject>,
    input_manager: InputManager,
    last_frame_time: f64,
    fps_counter: f64,
    frame_count: u32,
}

#[wasm_bindgen]
impl GameEngine {
    #[wasm_bindgen(constructor)]
    pub fn new(canvas: HtmlCanvasElement) -> Result<GameEngine, JsValue> {
        let context = canvas
            .get_context("2d")?
            .unwrap()
            .dyn_into::<CanvasRenderingContext2d>()?;
        
        Ok(GameEngine {
            canvas,
            context,
            game_objects: Vec::new(),
            input_manager: InputManager::new(),
            last_frame_time: now(),
            fps_counter: 0.0,
            frame_count: 0,
        })
    }
    
    pub fn add_game_object(&mut self, object: GameObject) {
        self.game_objects.push(object);
    }
    
    pub fn remove_game_object(&mut self, id: u32) {
        self.game_objects.retain(|obj| obj.id != id);
    }
    
    pub fn get_input_manager(&mut self) -> &mut InputManager {
        &mut self.input_manager
    }
    
    pub fn update(&mut self) {
        let current_time = now();
        let delta_time = (current_time - self.last_frame_time) as f32 / 1000.0;
        self.last_frame_time = current_time;
        
        // 更新游戏对象
        for object in &mut self.game_objects {
            object.update(delta_time);
            
            // 边界检查
            let canvas_width = self.canvas.width() as f32;
            let canvas_height = self.canvas.height() as f32;
            
            if object.position.x < 0.0 || object.position.x > canvas_width {
                object.velocity.x *= -1.0;
                object.position.x = object.position.x.max(0.0).min(canvas_width);
            }
            
            if object.position.y < 0.0 || object.position.y > canvas_height {
                object.velocity.y *= -1.0;
                object.position.y = object.position.y.max(0.0).min(canvas_height);
            }
        }
        
        // 碰撞检测
        for i in 0..self.game_objects.len() {
            for j in (i + 1)..self.game_objects.len() {
                if self.game_objects[i].check_collision(&self.game_objects[j]) {
                    console_log!("碰撞检测: 对象 {} 与对象 {} 发生碰撞", 
                               self.game_objects[i].id, self.game_objects[j].id);
                }
            }
        }
        
        // 处理输入
        self.handle_input(delta_time);
        
        // 更新 FPS 计数
        self.frame_count += 1;
        if self.frame_count % 60 == 0 {
            self.fps_counter = 60.0 / delta_time;
        }
    }
    
    fn handle_input(&mut self, delta_time: f32) {
        let speed = 200.0; // 像素/秒
        
        if let Some(player) = self.game_objects.get_mut(0) {
            let mut vx = 0.0;
            let mut vy = 0.0;
            
            if self.input_manager.is_key_pressed("ArrowLeft") || 
               self.input_manager.is_key_pressed("KeyA") {
                vx = -speed;
            }
            if self.input_manager.is_key_pressed("ArrowRight") || 
               self.input_manager.is_key_pressed("KeyD") {
                vx = speed;
            }
            if self.input_manager.is_key_pressed("ArrowUp") || 
               self.input_manager.is_key_pressed("KeyW") {
                vy = -speed;
            }
            if self.input_manager.is_key_pressed("ArrowDown") || 
               self.input_manager.is_key_pressed("KeyS") {
                vy = speed;
            }
            
            player.set_velocity(vx, vy);
        }
    }
    
    pub fn render(&self) {
        // 清除画布
        let canvas_width = self.canvas.width() as f64;
        let canvas_height = self.canvas.height() as f64;
        self.context.clear_rect(0.0, 0.0, canvas_width, canvas_height);
        
        // 设置背景色
        self.context.set_fill_style(&"#f0f0f0".into());
        self.context.fill_rect(0.0, 0.0, canvas_width, canvas_height);
        
        // 渲染游戏对象
        for object in &self.game_objects {
            if !object.active { continue; }
            
            self.context.set_fill_style(&object.color.clone().into());
            self.context.fill_rect(
                (object.position.x - object.size.x / 2.0) as f64,
                (object.position.y - object.size.y / 2.0) as f64,
                object.size.x as f64,
                object.size.y as f64,
            );
        }
        
        // 显示 FPS
        self.context.set_fill_style(&"black".into());
        self.context.set_font("16px Arial");
        self.context.fill_text(&format!("FPS: {:.1}", self.fps_counter), 10.0, 25.0).unwrap();
        
        // 显示对象数量
        self.context.fill_text(
            &format!("游戏对象: {}", self.game_objects.len()), 
            10.0, 45.0
        ).unwrap();
    }
    
    pub fn get_fps(&self) -> f32 {
        self.fps_counter as f32
    }
    
    pub fn get_object_count(&self) -> usize {
        self.game_objects.len()
    }
}
}

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly 游戏引擎</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: #222;
            color: white;
        }
        canvas {
            border: 2px solid #444;
            background: white;
        }
        .controls {
            margin-top: 20px;
        }
        button {
            margin: 5px;
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>WebAssembly 2D 游戏引擎演示</h1>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <div class="controls">
        <button onclick="addRandomObject()">添加随机对象</button>
        <button onclick="clearObjects()">清除所有对象</button>
        <button onclick="togglePause()">暂停/继续</button>
        <p>使用 WASD 或箭头键控制蓝色方块</p>
        <p id="stats">统计信息将显示在这里</p>
    </div>

    <script type="module">
        import init, { 
            GameEngine, 
            GameObject, 
            Vec2 
        } from './pkg/wasm_game_engine.js';

        let gameEngine;
        let animationId;
        let isPaused = false;

        async function run() {
            await init();
            
            const canvas = document.getElementById('gameCanvas');
            gameEngine = new GameEngine(canvas);
            
            // 添加玩家对象（蓝色方块）
            const player = new GameObject(0, 400, 300, 40, 40);
            player.set_color("blue");
            gameEngine.add_game_object(player);
            
            // 添加一些初始对象
            for (let i = 1; i <= 5; i++) {
                addRandomObject();
            }
            
            // 设置输入事件监听
            setupInputHandlers();
            
            // 开始游戏循环
            gameLoop();
        }

        function setupInputHandlers() {
            const inputManager = gameEngine.get_input_manager();
            
            // 键盘事件
            document.addEventListener('keydown', (event) => {
                inputManager.set_key_pressed(event.code, true);
                event.preventDefault();
            });
            
            document.addEventListener('keyup', (event) => {
                inputManager.set_key_pressed(event.code, false);
                event.preventDefault();
            });
            
            // 鼠标事件
            const canvas = document.getElementById('gameCanvas');
            canvas.addEventListener('mousemove', (event) => {
                const rect = canvas.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;
                inputManager.set_mouse_position(x, y);
            });
        }

        function gameLoop() {
            if (!isPaused) {
                gameEngine.update();
                gameEngine.render();
                
                // 更新统计信息
                const stats = document.getElementById('stats');
                stats.innerHTML = `
                    FPS: ${gameEngine.get_fps().toFixed(1)} | 
                    对象数量: ${gameEngine.get_object_count()}
                `;
            }
            
            animationId = requestAnimationFrame(gameLoop);
        }

        window.addRandomObject = function() {
            const id = Date.now() + Math.random();
            const x = Math.random() * 750 + 25;
            const y = Math.random() * 550 + 25;
            const size = Math.random() * 30 + 20;
            
            const obj = new GameObject(id, x, y, size, size);
            
            // 随机颜色
            const colors = ['red', 'green', 'yellow', 'purple', 'orange', 'cyan'];
            obj.set_color(colors[Math.floor(Math.random() * colors.length)]);
            
            // 随机速度
            const vx = (Math.random() - 0.5) * 200;
            const vy = (Math.random() - 0.5) * 200;
            obj.set_velocity(vx, vy);
            
            gameEngine.add_game_object(obj);
        };

        window.clearObjects = function() {
            // 保留玩家对象（ID = 0）
            for (let i = 1; i < 1000; i++) {
                gameEngine.remove_game_object(i);
            }
        };

        window.togglePause = function() {
            isPaused = !isPaused;
            const button = event.target;
            button.textContent = isPaused ? '继续' : '暂停';
        };

        run();
    </script>
</body>
</html>

2. 图像处理应用开发 (25分)

题目：开发一个基于 WebAssembly 的在线图像处理应用，要求实现：

1. 基本滤镜（模糊、锐化、边缘检测）
2. 色彩调整（亮度、对比度、饱和度）
3. 图像变换（旋转、缩放、裁剪）
4. 批量处理功能

#![allow(unused)]
fn main() {
// src/lib.rs
use wasm_bindgen::prelude::*;
use web_sys::ImageData;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 图像数据结构
#[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, data: Vec<u8>) -> ImageProcessor {
        ImageProcessor { width, height, data }
    }
    
    #[wasm_bindgen(getter)]
    pub fn width(&self) -> u32 { self.width }
    
    #[wasm_bindgen(getter)]
    pub fn height(&self) -> u32 { self.height }
    
    #[wasm_bindgen(getter)]
    pub fn data(&self) -> Vec<u8> { self.data.clone() }
    
    // 高斯模糊滤镜
    pub fn gaussian_blur(&mut self, radius: f32) {
        let kernel_size = (radius * 6.0) as usize + 1;
        let kernel = self.generate_gaussian_kernel(radius, kernel_size);
        
        // 水平模糊
        let temp_data = self.apply_horizontal_kernel(&kernel);
        
        // 垂直模糊
        self.data = self.apply_vertical_kernel(&temp_data, &kernel);
        
        console_log!("高斯模糊处理完成，半径: {}", radius);
    }
    
    fn generate_gaussian_kernel(&self, sigma: f32, size: usize) -> Vec<f32> {
        let mut kernel = vec![0.0; size];
        let center = size / 2;
        let mut sum = 0.0;
        
        for i in 0..size {
            let x = (i as i32 - center as i32) as f32;
            kernel[i] = (-x * x / (2.0 * sigma * sigma)).exp();
            sum += kernel[i];
        }
        
        // 归一化
        for value in &mut kernel {
            *value /= sum;
        }
        
        kernel
    }
    
    fn apply_horizontal_kernel(&self, kernel: &[f32]) -> Vec<u8> {
        let mut result = vec![0u8; self.data.len()];
        let kernel_center = kernel.len() / 2;
        
        for y in 0..self.height {
            for x in 0..self.width {
                for channel in 0..4 { // RGBA
                    let mut sum = 0.0;
                    
                    for k in 0..kernel.len() {
                        let sample_x = (x as i32 + k as i32 - kernel_center as i32)
                            .max(0)
                            .min(self.width as i32 - 1) as u32;
                        
                        let idx = ((y * self.width + sample_x) * 4 + channel) as usize;
                        sum += self.data[idx] as f32 * kernel[k];
                    }
                    
                    let result_idx = ((y * self.width + x) * 4 + channel) as usize;
                    result[result_idx] = sum.round().max(0.0).min(255.0) as u8;
                }
            }
        }
        
        result
    }
    
    fn apply_vertical_kernel(&self, data: &[u8], kernel: &[f32]) -> Vec<u8> {
        let mut result = vec![0u8; data.len()];
        let kernel_center = kernel.len() / 2;
        
        for y in 0..self.height {
            for x in 0..self.width {
                for channel in 0..4 {
                    let mut sum = 0.0;
                    
                    for k in 0..kernel.len() {
                        let sample_y = (y as i32 + k as i32 - kernel_center as i32)
                            .max(0)
                            .min(self.height as i32 - 1) as u32;
                        
                        let idx = ((sample_y * self.width + x) * 4 + channel) as usize;
                        sum += data[idx] as f32 * kernel[k];
                    }
                    
                    let result_idx = ((y * self.width + x) * 4 + channel) as usize;
                    result[result_idx] = sum.round().max(0.0).min(255.0) as u8;
                }
            }
        }
        
        result
    }
    
    // 锐化滤镜
    pub fn sharpen(&mut self, strength: f32) {
        let kernel = [
            0.0, -strength, 0.0,
            -strength, 1.0 + 4.0 * strength, -strength,
            0.0, -strength, 0.0,
        ];
        
        self.apply_3x3_kernel(&kernel);
        console_log!("锐化处理完成，强度: {}", strength);
    }
    
    // 边缘检测（Sobel 算子）
    pub fn edge_detection(&mut self) {
        // 先转换为灰度
        self.to_grayscale();
        
        let sobel_x = [
            -1.0, 0.0, 1.0,
            -2.0, 0.0, 2.0,
            -1.0, 0.0, 1.0,
        ];
        
        let sobel_y = [
            -1.0, -2.0, -1.0,
             0.0,  0.0,  0.0,
             1.0,  2.0,  1.0,
        ];
        
        let gx = self.apply_3x3_kernel_to_grayscale(&sobel_x);
        let gy = self.apply_3x3_kernel_to_grayscale(&sobel_y);
        
        // 计算梯度幅度
        for i in 0..self.width * self.height {
            let idx = (i * 4) as usize;
            let magnitude = ((gx[idx] as f32).powi(2) + (gy[idx] as f32).powi(2)).sqrt();
            let value = magnitude.min(255.0) as u8;
            
            self.data[idx] = value;     // R
            self.data[idx + 1] = value; // G
            self.data[idx + 2] = value; // B
            // Alpha 保持不变
        }
        
        console_log!("边缘检测处理完成");
    }
    
    fn apply_3x3_kernel(&mut self, kernel: &[f32; 9]) {
        let mut result = self.data.clone();
        
        for y in 1..(self.height - 1) {
            for x in 1..(self.width - 1) {
                for channel in 0..3 { // 跳过 Alpha 通道
                    let mut sum = 0.0;
                    
                    for ky in 0..3 {
                        for kx in 0..3 {
                            let pixel_y = y + ky - 1;
                            let pixel_x = x + kx - 1;
                            let idx = ((pixel_y * self.width + pixel_x) * 4 + channel) as usize;
                            sum += self.data[idx] as f32 * kernel[ky * 3 + kx];
                        }
                    }
                    
                    let result_idx = ((y * self.width + x) * 4 + channel) as usize;
                    result[result_idx] = sum.round().max(0.0).min(255.0) as u8;
                }
            }
        }
        
        self.data = result;
    }
    
    fn apply_3x3_kernel_to_grayscale(&self, kernel: &[f32; 9]) -> Vec<u8> {
        let mut result = vec![0u8; self.data.len()];
        
        for y in 1..(self.height - 1) {
            for x in 1..(self.width - 1) {
                let mut sum = 0.0;
                
                for ky in 0..3 {
                    for kx in 0..3 {
                        let pixel_y = y + ky - 1;
                        let pixel_x = x + kx - 1;
                        let idx = ((pixel_y * self.width + pixel_x) * 4) as usize;
                        sum += self.data[idx] as f32 * kernel[ky * 3 + kx];
                    }
                }
                
                let result_idx = ((y * self.width + x) * 4) as usize;
                let value = sum.abs().min(255.0) as u8;
                result[result_idx] = value;
                result[result_idx + 1] = value;
                result[result_idx + 2] = value;
                result[result_idx + 3] = self.data[result_idx + 3]; // 保持 Alpha
            }
        }
        
        result
    }
    
    // 亮度调整
    pub fn adjust_brightness(&mut self, delta: i32) {
        for i in (0..self.data.len()).step_by(4) {
            for channel in 0..3 {
                let new_value = (self.data[i + channel] as i32 + delta)
                    .max(0)
                    .min(255) as u8;
                self.data[i + channel] = new_value;
            }
        }
        console_log!("亮度调整完成，变化值: {}", delta);
    }
    
    // 对比度调整
    pub fn adjust_contrast(&mut self, factor: f32) {
        for i in (0..self.data.len()).step_by(4) {
            for channel in 0..3 {
                let pixel = self.data[i + channel] as f32;
                let new_value = ((pixel - 128.0) * factor + 128.0)
                    .round()
                    .max(0.0)
                    .min(255.0) as u8;
                self.data[i + channel] = new_value;
            }
        }
        console_log!("对比度调整完成，因子: {}", factor);
    }
    
    // 转换为灰度
    pub fn to_grayscale(&mut self) {
        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;
            
            // 使用标准 RGB 到灰度的转换公式
            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;
        }
        console_log!("灰度转换完成");
    }
    
    // 图像旋转（90度的倍数）
    pub fn rotate_90_clockwise(&mut self) {
        let old_width = self.width;
        let old_height = self.height;
        let mut new_data = vec![0u8; self.data.len()];
        
        for y in 0..old_height {
            for x in 0..old_width {
                let old_idx = ((y * old_width + x) * 4) as usize;
                let new_x = old_height - 1 - y;
                let new_y = x;
                let new_idx = ((new_y * old_height + new_x) * 4) as usize;
                
                for channel in 0..4 {
                    new_data[new_idx + channel] = self.data[old_idx + channel];
                }
            }
        }
        
        self.width = old_height;
        self.height = old_width;
        self.data = new_data;
        
        console_log!("图像顺时针旋转90度完成");
    }
    
    // 图像缩放（双线性插值）
    pub fn resize(&mut self, new_width: u32, new_height: u32) {
        let mut new_data = vec![0u8; (new_width * new_height * 4) as usize];
        
        let x_ratio = self.width as f32 / new_width as f32;
        let y_ratio = self.height as f32 / new_height as f32;
        
        for y in 0..new_height {
            for x in 0..new_width {
                let src_x = x as f32 * x_ratio;
                let src_y = y as f32 * y_ratio;
                
                let x1 = src_x.floor() as u32;
                let y1 = src_y.floor() as u32;
                let x2 = (x1 + 1).min(self.width - 1);
                let y2 = (y1 + 1).min(self.height - 1);
                
                let fx = src_x - x1 as f32;
                let fy = src_y - y1 as f32;
                
                for channel in 0..4 {
                    let p1 = self.data[((y1 * self.width + x1) * 4 + channel) as usize] as f32;
                    let p2 = self.data[((y1 * self.width + x2) * 4 + channel) as usize] as f32;
                    let p3 = self.data[((y2 * self.width + x1) * 4 + channel) as usize] as f32;
                    let p4 = self.data[((y2 * self.width + x2) * 4 + channel) as usize] as f32;
                    
                    let interpolated = p1 * (1.0 - fx) * (1.0 - fy) +
                                     p2 * fx * (1.0 - fy) +
                                     p3 * (1.0 - fx) * fy +
                                     p4 * fx * fy;
                    
                    let new_idx = ((y * new_width + x) * 4 + channel) as usize;
                    new_data[new_idx] = interpolated.round() as u8;
                }
            }
        }
        
        self.width = new_width;
        self.height = new_height;
        self.data = new_data;
        
        console_log!("图像缩放完成，新尺寸: {}x{}", new_width, new_height);
    }
}

// 批量处理器
#[wasm_bindgen]
pub struct BatchProcessor {
    images: Vec<ImageProcessor>,
}

#[wasm_bindgen]
impl BatchProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> BatchProcessor {
        BatchProcessor {
            images: Vec::new(),
        }
    }
    
    pub fn add_image(&mut self, image: ImageProcessor) {
        self.images.push(image);
    }
    
    pub fn apply_brightness_to_all(&mut self, delta: i32) {
        for image in &mut self.images {
            image.adjust_brightness(delta);
        }
        console_log!("批量亮度调整完成，处理了 {} 张图像", self.images.len());
    }
    
    pub fn apply_blur_to_all(&mut self, radius: f32) {
        for image in &mut self.images {
            image.gaussian_blur(radius);
        }
        console_log!("批量模糊处理完成，处理了 {} 张图像", self.images.len());
    }
    
    pub fn get_image(&self, index: usize) -> Option<ImageProcessor> {
        self.images.get(index).cloned()
    }
    
    pub fn get_image_count(&self) -> usize {
        self.images.len()
    }
}
}

3. 科学计算应用 (20分)

题目：开发一个基于 WebAssembly 的科学计算平台，要求实现：

1. 矩阵运算（加法、乘法、求逆）
2. 数值积分（梯形法则、辛普森法则）
3. 线性方程组求解（高斯消元法）
4. 统计分析功能（均值、方差、回归分析）

#![allow(unused)]
fn main() {
// src/lib.rs
use wasm_bindgen::prelude::*;
use std::f64::consts::PI;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// 矩阵结构
#[wasm_bindgen]
#[derive(Clone, Debug)]
pub struct Matrix {
    rows: usize,
    cols: usize,
    data: Vec<f64>,
}

#[wasm_bindgen]
impl Matrix {
    #[wasm_bindgen(constructor)]
    pub fn new(rows: usize, cols: usize) -> Matrix {
        Matrix {
            rows,
            cols,
            data: vec![0.0; rows * cols],
        }
    }
    
    pub fn from_array(rows: usize, cols: usize, data: Vec<f64>) -> Matrix {
        if data.len() != rows * cols {
            panic!("数据长度与矩阵维度不匹配");
        }
        Matrix { rows, cols, data }
    }
    
    #[wasm_bindgen(getter)]
    pub fn rows(&self) -> usize { self.rows }
    
    #[wasm_bindgen(getter)]
    pub fn cols(&self) -> usize { self.cols }
    
    #[wasm_bindgen(getter)]
    pub fn data(&self) -> Vec<f64> { self.data.clone() }
    
    pub fn get(&self, row: usize, col: usize) -> f64 {
        if row >= self.rows || col >= self.cols {
            panic!("矩阵索引越界");
        }
        self.data[row * self.cols + col]
    }
    
    pub fn set(&mut self, row: usize, col: usize, value: f64) {
        if row >= self.rows || col >= self.cols {
            panic!("矩阵索引越界");
        }
        self.data[row * self.cols + col] = value;
    }
    
    // 矩阵加法
    pub fn add(&self, other: &Matrix) -> Result<Matrix, String> {
        if self.rows != other.rows || self.cols != other.cols {
            return Err("矩阵维度不匹配".to_string());
        }
        
        let mut result = Matrix::new(self.rows, self.cols);
        for i in 0..self.data.len() {
            result.data[i] = self.data[i] + other.data[i];
        }
        
        Ok(result)
    }
    
    // 矩阵乘法
    pub fn multiply(&self, other: &Matrix) -> Result<Matrix, String> {
        if self.cols != other.rows {
            return Err("矩阵维度不匹配，无法相乘".to_string());
        }
        
        let mut result = Matrix::new(self.rows, other.cols);
        
        for i in 0..self.rows {
            for j in 0..other.cols {
                let mut sum = 0.0;
                for k in 0..self.cols {
                    sum += self.get(i, k) * other.get(k, j);
                }
                result.set(i, j, sum);
            }
        }
        
        Ok(result)
    }
    
    // 矩阵转置
    pub fn transpose(&self) -> Matrix {
        let mut result = Matrix::new(self.cols, self.rows);
        
        for i in 0..self.rows {
            for j in 0..self.cols {
                result.set(j, i, self.get(i, j));
            }
        }
        
        result
    }
    
    // 高斯消元法求逆矩阵
    pub fn inverse(&self) -> Result<Matrix, String> {
        if self.rows != self.cols {
            return Err("只能计算方阵的逆矩阵".to_string());
        }
        
        let n = self.rows;
        let mut augmented = Matrix::new(n, 2 * n);
        
        // 构造增广矩阵 [A|I]
        for i in 0..n {
            for j in 0..n {
                augmented.set(i, j, self.get(i, j));
                augmented.set(i, j + n, if i == j { 1.0 } else { 0.0 });
            }
        }
        
        // 前向消元
        for i in 0..n {
            // 寻找主元
            let mut max_row = i;
            for k in (i + 1)..n {
                if augmented.get(k, i).abs() > augmented.get(max_row, i).abs() {
                    max_row = k;
                }
            }
            
            // 交换行
            if max_row != i {
                for j in 0..(2 * n) {
                    let temp = augmented.get(i, j);
                    augmented.set(i, j, augmented.get(max_row, j));
                    augmented.set(max_row, j, temp);
                }
            }
            
            // 检查奇异性
            if augmented.get(i, i).abs() < 1e-10 {
                return Err("矩阵是奇异的，无法求逆".to_string());
            }
            
            // 归一化主元行
            let pivot = augmented.get(i, i);
            for j in 0..(2 * n) {
                augmented.set(i, j, augmented.get(i, j) / pivot);
            }
            
            // 消元
            for k in 0..n {
                if k != i {
                    let factor = augmented.get(k, i);
                    for j in 0..(2 * n) {
                        let new_val = augmented.get(k, j) - factor * augmented.get(i, j);
                        augmented.set(k, j, new_val);
                    }
                }
            }
        }
        
        // 提取逆矩阵
        let mut inverse = Matrix::new(n, n);
        for i in 0..n {
            for j in 0..n {
                inverse.set(i, j, augmented.get(i, j + n));
            }
        }
        
        Ok(inverse)
    }
    
    // 计算行列式
    pub fn determinant(&self) -> Result<f64, String> {
        if self.rows != self.cols {
            return Err("只能计算方阵的行列式".to_string());
        }
        
        let mut matrix = self.clone();
        let n = self.rows;
        let mut det = 1.0;
        
        for i in 0..n {
            // 寻找主元
            let mut max_row = i;
            for k in (i + 1)..n {
                if matrix.get(k, i).abs() > matrix.get(max_row, i).abs() {
                    max_row = k;
                }
            }
            
            // 交换行（改变行列式符号）
            if max_row != i {
                for j in 0..n {
                    let temp = matrix.get(i, j);
                    matrix.set(i, j, matrix.get(max_row, j));
                    matrix.set(max_row, j, temp);
                }
                det *= -1.0;
            }
            
            let pivot = matrix.get(i, i);
            if pivot.abs() < 1e-10 {
                return Ok(0.0); // 奇异矩阵
            }
            
            det *= pivot;
            
            // 消元
            for k in (i + 1)..n {
                let factor = matrix.get(k, i) / pivot;
                for j in i..n {
                    let new_val = matrix.get(k, j) - factor * matrix.get(i, j);
                    matrix.set(k, j, new_val);
                }
            }
        }
        
        Ok(det)
    }
}

// 数值积分器
#[wasm_bindgen]
pub struct NumericalIntegrator;

#[wasm_bindgen]
impl NumericalIntegrator {
    // 梯形法则
    pub fn trapezoidal_rule(
        coefficients: Vec<f64>, // 多项式系数
        a: f64,                  // 积分下限
        b: f64,                  // 积分上限
        n: u32,                  // 分割数
    ) -> f64 {
        let h = (b - a) / n as f64;
        let mut sum = 0.0;
        
        // 计算多项式值的函数
        let polynomial = |x: f64| -> f64 {
            coefficients.iter().enumerate()
                .map(|(i, &coeff)| coeff * x.powi(i as i32))
                .sum()
        };
        
        sum += polynomial(a) + polynomial(b);
        
        for i in 1..n {
            let x = a + i as f64 * h;
            sum += 2.0 * polynomial(x);
        }
        
        sum * h / 2.0
    }
    
    // 辛普森法则
    pub fn simpson_rule(
        coefficients: Vec<f64>,
        a: f64,
        b: f64,
        n: u32,
    ) -> f64 {
        if n % 2 != 0 {
            panic!("辛普森法则要求 n 为偶数");
        }
        
        let h = (b - a) / n as f64;
        let mut sum = 0.0;
        
        let polynomial = |x: f64| -> f64 {
            coefficients.iter().enumerate()
                .map(|(i, &coeff)| coeff * x.powi(i as i32))
                .sum()
        };
        
        sum += polynomial(a) + polynomial(b);
        
        for i in 1..n {
            let x = a + i as f64 * h;
            let factor = if i % 2 == 0 { 2.0 } else { 4.0 };
            sum += factor * polynomial(x);
        }
        
        sum * h / 3.0
    }
    
    // 自适应积分
    pub fn adaptive_simpson(
        coefficients: Vec<f64>,
        a: f64,
        b: f64,
        tolerance: f64,
    ) -> f64 {
        Self::adaptive_simpson_recursive(&coefficients, a, b, tolerance, 0)
    }
    
    fn adaptive_simpson_recursive(
        coefficients: &[f64],
        a: f64,
        b: f64,
        tolerance: f64,
        depth: u32,
    ) -> f64 {
        if depth > 50 {
            return Self::simpson_rule(coefficients.to_vec(), a, b, 10);
        }
        
        let c = (a + b) / 2.0;
        let s1 = Self::simpson_rule(coefficients.to_vec(), a, b, 2);
        let s2 = Self::simpson_rule(coefficients.to_vec(), a, c, 2) +
                 Self::simpson_rule(coefficients.to_vec(), c, b, 2);
        
        if (s1 - s2).abs() < tolerance {
            s2
        } else {
            Self::adaptive_simpson_recursive(coefficients, a, c, tolerance / 2.0, depth + 1) +
            Self::adaptive_simpson_recursive(coefficients, c, b, tolerance / 2.0, depth + 1)
        }
    }
}

// 线性方程组求解器
#[wasm_bindgen]
pub struct LinearSolver;

#[wasm_bindgen]
impl LinearSolver {
    // 高斯消元法解线性方程组 Ax = b
    pub fn gaussian_elimination(a: &Matrix, b: Vec<f64>) -> Result<Vec<f64>, String> {
        if a.rows != a.cols {
            return Err("系数矩阵必须是方阵".to_string());
        }
        
        if a.rows != b.len() {
            return Err("系数矩阵和常数向量维度不匹配".to_string());
        }
        
        let n = a.rows;
        let mut aug_matrix = Matrix::new(n, n + 1);
        
        // 构造增广矩阵
        for i in 0..n {
            for j in 0..n {
                aug_matrix.set(i, j, a.get(i, j));
            }
            aug_matrix.set(i, n, b[i]);
        }
        
        // 前向消元
        for i in 0..n {
            // 部分主元选择
            let mut max_row = i;
            for k in (i + 1)..n {
                if aug_matrix.get(k, i).abs() > aug_matrix.get(max_row, i).abs() {
                    max_row = k;
                }
            }
            
            // 交换行
            if max_row != i {
                for j in 0..=n {
                    let temp = aug_matrix.get(i, j);
                    aug_matrix.set(i, j, aug_matrix.get(max_row, j));
                    aug_matrix.set(max_row, j, temp);
                }
            }
            
            // 检查奇异性
            if aug_matrix.get(i, i).abs() < 1e-10 {
                return Err("系数矩阵是奇异的".to_string());
            }
            
            // 消元
            for k in (i + 1)..n {
                let factor = aug_matrix.get(k, i) / aug_matrix.get(i, i);
                for j in i..=n {
                    let new_val = aug_matrix.get(k, j) - factor * aug_matrix.get(i, j);
                    aug_matrix.set(k, j, new_val);
                }
            }
        }
        
        // 回代求解
        let mut x = vec![0.0; n];
        for i in (0..n).rev() {
            let mut sum = aug_matrix.get(i, n);
            for j in (i + 1)..n {
                sum -= aug_matrix.get(i, j) * x[j];
            }
            x[i] = sum / aug_matrix.get(i, i);
        }
        
        Ok(x)
    }
    
    // LU 分解
    pub fn lu_decomposition(matrix: &Matrix) -> Result<(Matrix, Matrix), String> {
        if matrix.rows != matrix.cols {
            return Err("只能对方阵进行 LU 分解".to_string());
        }
        
        let n = matrix.rows;
        let mut l = Matrix::new(n, n);
        let mut u = Matrix::new(n, n);
        
        // 初始化 L 矩阵的对角线为 1
        for i in 0..n {
            l.set(i, i, 1.0);
        }
        
        for i in 0..n {
            // 计算 U 矩阵的第 i 行
            for j in i..n {
                let mut sum = 0.0;
                for k in 0..i {
                    sum += l.get(i, k) * u.get(k, j);
                }
                u.set(i, j, matrix.get(i, j) - sum);
            }
            
            // 计算 L 矩阵的第 i 列
            for j in (i + 1)..n {
                let mut sum = 0.0;
                for k in 0..i {
                    sum += l.get(j, k) * u.get(k, i);
                }
                
                if u.get(i, i).abs() < 1e-10 {
                    return Err("矩阵是奇异的，无法进行 LU 分解".to_string());
                }
                
                l.set(j, i, (matrix.get(j, i) - sum) / u.get(i, i));
            }
        }
        
        Ok((l, u))
    }
}

// 统计分析器
#[wasm_bindgen]
pub struct StatisticalAnalyzer;

#[wasm_bindgen]
impl StatisticalAnalyzer {
    // 计算均值
    pub fn mean(data: &[f64]) -> f64 {
        if data.is_empty() {
            return 0.0;
        }
        data.iter().sum::<f64>() / data.len() as f64
    }
    
    // 计算方差
    pub fn variance(data: &[f64], sample: bool) -> f64 {
        if data.len() <= 1 {
            return 0.0;
        }
        
        let mean = Self::mean(data);
        let sum_squared_diff: f64 = data.iter()
            .map(|x| (x - mean).powi(2))
            .sum();
        
        let denominator = if sample { data.len() - 1 } else { data.len() };
        sum_squared_diff / denominator as f64
    }
    
    // 计算标准差
    pub fn standard_deviation(data: &[f64], sample: bool) -> f64 {
        Self::variance(data, sample).sqrt()
    }
    
    // 计算协方差
    pub fn covariance(x: &[f64], y: &[f64], sample: bool) -> Result<f64, String> {
        if x.len() != y.len() {
            return Err("数据长度不匹配".to_string());
        }
        
        if x.len() <= 1 {
            return Ok(0.0);
        }
        
        let mean_x = Self::mean(x);
        let mean_y = Self::mean(y);
        
        let sum: f64 = x.iter().zip(y.iter())
            .map(|(xi, yi)| (xi - mean_x) * (yi - mean_y))
            .sum();
        
        let denominator = if sample { x.len() - 1 } else { x.len() };
        Ok(sum / denominator as f64)
    }
    
    // 线性回归
    pub fn linear_regression(x: &[f64], y: &[f64]) -> Result<(f64, f64, f64), String> {
        if x.len() != y.len() || x.len() < 2 {
            return Err("数据不足或长度不匹配".to_string());
        }
        
        let n = x.len() as f64;
        let sum_x: f64 = x.iter().sum();
        let sum_y: f64 = y.iter().sum();
        let sum_xy: f64 = x.iter().zip(y.iter()).map(|(xi, yi)| xi * yi).sum();
        let sum_x2: f64 = x.iter().map(|xi| xi * xi).sum();
        
        let denominator = n * sum_x2 - sum_x * sum_x;
        if denominator.abs() < 1e-10 {
            return Err("无法计算回归系数，x 值方差为 0".to_string());
        }
        
        // 计算斜率和截距
        let slope = (n * sum_xy - sum_x * sum_y) / denominator;
        let intercept = (sum_y - slope * sum_x) / n;
        
        // 计算相关系数
        let mean_x = sum_x / n;
        let mean_y = sum_y / n;
        
        let numerator: f64 = x.iter().zip(y.iter())
            .map(|(xi, yi)| (xi - mean_x) * (yi - mean_y))
            .sum();
        
        let sum_sq_x: f64 = x.iter().map(|xi| (xi - mean_x).powi(2)).sum();
        let sum_sq_y: f64 = y.iter().map(|yi| (yi - mean_y).powi(2)).sum();
        
        let correlation = numerator / (sum_sq_x * sum_sq_y).sqrt();
        
        Ok((slope, intercept, correlation))
    }
    
    // 计算直方图
    pub fn histogram(data: &[f64], bins: u32) -> (Vec<f64>, Vec<u32>) {
        if data.is_empty() || bins == 0 {
            return (vec![], vec![]);
        }
        
        let min_val = data.iter().fold(f64::INFINITY, |a, &b| a.min(b));
        let max_val = data.iter().fold(f64::NEG_INFINITY, |a, &b| a.max(b));
        
        let bin_width = (max_val - min_val) / bins as f64;
        let mut bin_edges = vec![0.0; (bins + 1) as usize];
        let mut bin_counts = vec![0u32; bins as usize];
        
        // 计算 bin 边界
        for i in 0..=bins {
            bin_edges[i as usize] = min_val + i as f64 * bin_width;
        }
        
        // 统计每个 bin 的计数
        for &value in data {
            let mut bin_index = ((value - min_val) / bin_width) as usize;
            if bin_index >= bins as usize {
                bin_index = bins as usize - 1; // 处理边界情况
            }
            bin_counts[bin_index] += 1;
        }
        
        (bin_edges, bin_counts)
    }
}
}

// 测试科学计算功能
async function testScientificComputing() {
    const { Matrix, NumericalIntegrator, LinearSolver, StatisticalAnalyzer } = 
          await import('./pkg/scientific_computing.js');
    
    console.log('=== 矩阵运算测试 ===');
    
    // 创建测试矩阵
    const matrixA = Matrix.from_array(2, 2, [1, 2, 3, 4]);
    const matrixB = Matrix.from_array(2, 2, [5, 6, 7, 8]);
    
    console.log('矩阵 A:', matrixA.data());
    console.log('矩阵 B:', matrixB.data());
    
    // 矩阵加法
    const sum = matrixA.add(matrixB);
    console.log('A + B =', sum.data());
    
    // 矩阵乘法
    const product = matrixA.multiply(matrixB);
    console.log('A × B =', product.data());
    
    // 行列式
    const det = matrixA.determinant();
    console.log('det(A) =', det);
    
    console.log('\n=== 数值积分测试 ===');
    
    // 计算 x^2 在 [0, 1] 上的积分（解析解为 1/3）
    const coeffs = [0, 0, 1]; // x^2
    const integral_trap = NumericalIntegrator.trapezoidal_rule(coeffs, 0, 1, 1000);
    const integral_simp = NumericalIntegrator.simpson_rule(coeffs, 0, 1, 1000);
    
    console.log('∫₀¹ x² dx (梯形法则):', integral_trap);
    console.log('∫₀¹ x² dx (辛普森法则):', integral_simp);
    console.log('解析解:', 1/3);
    
    console.log('\n=== 线性方程组求解测试 ===');
    
    // 求解 2x + 3y = 7, x - y = 1
    const A = Matrix.from_array(2, 2, [2, 3, 1, -1]);
    const b = [7, 1];
    const solution = LinearSolver.gaussian_elimination(A, b);
    console.log('方程组解:', solution);
    
    console.log('\n=== 统计分析测试 ===');
    
    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    console.log('数据:', data);
    console.log('均值:', StatisticalAnalyzer.mean(data));
    console.log('方差:', StatisticalAnalyzer.variance(data, true));
    console.log('标准差:', StatisticalAnalyzer.standard_deviation(data, true));
    
    // 线性回归测试
    const x_data = [1, 2, 3, 4, 5];
    const y_data = [2, 4, 6, 8, 10]; // y = 2x
    const [slope, intercept, correlation] = StatisticalAnalyzer.linear_regression(x_data, y_data);
    console.log(`回归方程: y = ${slope}x + ${intercept}`);
    console.log(`相关系数: ${correlation}`);
}

4. 性能优化综合题 (25分)

题目：针对一个现有的 WebAssembly 应用进行全面性能优化，要求：

1. 进行性能分析和瓶颈识别
2. 实现内存优化策略
3. 应用 SIMD 指令优化
4. 实现多线程优化
5. 进行构建和部署优化

#![allow(unused)]
fn main() {
// src/performance.rs
use wasm_bindgen::prelude::*;
use web_sys::{console, Performance};

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = performance)]
    fn now() -> f64;
    
    #[wasm_bindgen(js_namespace = performance)]
    fn mark(name: &str);
    
    #[wasm_bindgen(js_namespace = performance)]
    fn measure(name: &str, start_mark: &str, end_mark: &str);
}

// 性能监控器
#[wasm_bindgen]
pub struct PerformanceMonitor {
    start_times: std::collections::HashMap<String, f64>,
}

#[wasm_bindgen]
impl PerformanceMonitor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> PerformanceMonitor {
        PerformanceMonitor {
            start_times: std::collections::HashMap::new(),
        }
    }
    
    pub fn start_timer(&mut self, name: &str) {
        let start_time = now();
        self.start_times.insert(name.to_string(), start_time);
        mark(&format!("{}_start", name));
    }
    
    pub fn end_timer(&mut self, name: &str) -> f64 {
        let end_time = now();
        mark(&format!("{}_end", name));
        measure(name, &format!("{}_start", name), &format!("{}_end", name));
        
        if let Some(&start_time) = self.start_times.get(name) {
            let duration = end_time - start_time;
            console::log_1(&format!("⏱️ {}: {:.3}ms", name, duration).into());
            duration
        } else {
            0.0
        }
    }
    
    pub fn memory_usage(&self) -> f64 {
        // 获取当前内存使用情况
        web_sys::js_sys::eval("performance.memory ? performance.memory.usedJSHeapSize : 0")
            .unwrap_or_else(|_| 0.into())
            .as_f64()
            .unwrap_or(0.0)
    }
}

// SIMD 优化的向量运算
#[cfg(target_arch = "wasm32")]
use std::arch::wasm32::*;

#[wasm_bindgen]
pub struct SIMDProcessor;

#[wasm_bindgen]
impl SIMDProcessor {
    // SIMD 优化的向量加法
    pub fn vector_add_simd(a: &[f32], b: &[f32]) -> Vec<f32> {
        assert_eq!(a.len(), b.len());
        let len = a.len();
        let mut result = vec![0.0f32; len];
        
        let simd_len = len & !3; // 4 的倍数
        
        // SIMD 处理
        for i in (0..simd_len).step_by(4) {
            unsafe {
                let va = v128_load(a.as_ptr().add(i) as *const v128);
                let vb = v128_load(b.as_ptr().add(i) as *const v128);
                let vr = f32x4_add(va, vb);
                v128_store(result.as_mut_ptr().add(i) as *mut v128, vr);
            }
        }
        
        // 处理剩余元素
        for i in simd_len..len {
            result[i] = a[i] + b[i];
        }
        
        result
    }
    
    // SIMD 优化的矩阵乘法
    pub fn matrix_multiply_simd(
        a: &[f32], 
        b: &[f32], 
        rows_a: usize, 
        cols_a: usize, 
        cols_b: usize
    ) -> Vec<f32> {
        let mut result = vec![0.0f32; rows_a * cols_b];
        
        for i in 0..rows_a {
            for j in (0..cols_b).step_by(4) {
                let end_j = (j + 4).min(cols_b);
                let mut sum = unsafe { f32x4_splat(0.0) };
                
                for k in 0..cols_a {
                    let a_val = unsafe { f32x4_splat(a[i * cols_a + k]) };
                    
                    if end_j - j == 4 {
                        let b_vals = unsafe {
                            v128_load(&b[k * cols_b + j] as *const f32 as *const v128)
                        };
                        sum = unsafe { f32x4_add(sum, f32x4_mul(a_val, b_vals)) };
                    } else {
                        // 处理边界情况
                        for jj in j..end_j {
                            result[i * cols_b + jj] += a[i * cols_a + k] * b[k * cols_b + jj];
                        }
                    }
                }
                
                if end_j - j == 4 {
                    unsafe {
                        v128_store(
                            &mut result[i * cols_b + j] as *mut f32 as *mut v128, 
                            sum
                        );
                    }
                }
            }
        }
        
        result
    }
    
    // SIMD 优化的图像滤波
    pub fn apply_filter_simd(
        image: &[u8], 
        width: u32, 
        height: u32, 
        kernel: &[f32]
    ) -> Vec<u8> {
        let mut result = vec![0u8; image.len()];
        let kernel_size = (kernel.len() as f32).sqrt() as usize;
        let half_kernel = kernel_size / 2;
        
        for y in half_kernel..(height as usize - half_kernel) {
            for x in (half_kernel..(width as usize - half_kernel)).step_by(4) {
                let end_x = (x + 4).min(width as usize - half_kernel);
                
                for channel in 0..4 { // RGBA
                    let mut sum = unsafe { f32x4_splat(0.0) };
                    
                    for ky in 0..kernel_size {
                        for kx in 0..kernel_size {
                            let iy = y + ky - half_kernel;
                            let kernel_val = unsafe { 
                                f32x4_splat(kernel[ky * kernel_size + kx]) 
                            };
                            
                            if end_x - x == 4 {
                                let mut pixel_vals = [0.0f32; 4];
                                for i in 0..4 {
                                    let ix = x + i + kx - half_kernel;
                                    let idx = (iy * width as usize + ix) * 4 + channel;
                                    pixel_vals[i] = image[idx] as f32;
                                }
                                
                                let pixels = unsafe {
                                    v128_load(pixel_vals.as_ptr() as *const v128)
                                };
                                sum = unsafe { f32x4_add(sum, f32x4_mul(kernel_val, pixels)) };
                            }
                        }
                    }
                    
                    if end_x - x == 4 {
                        let result_vals = [
                            unsafe { f32x4_extract_lane::<0>(sum) },
                            unsafe { f32x4_extract_lane::<1>(sum) },
                            unsafe { f32x4_extract_lane::<2>(sum) },
                            unsafe { f32x4_extract_lane::<3>(sum) },
                        ];
                        
                        for i in 0..4 {
                            let idx = (y * width as usize + x + i) * 4 + channel;
                            result[idx] = result_vals[i].max(0.0).min(255.0) as u8;
                        }
                    }
                }
            }
        }
        
        result
    }
}

// 内存池优化
#[wasm_bindgen]
pub struct MemoryPool {
    pools: std::collections::HashMap<usize, Vec<Vec<u8>>>,
    allocated: usize,
    max_size: usize,
}

#[wasm_bindgen]
impl MemoryPool {
    #[wasm_bindgen(constructor)]
    pub fn new(max_size: usize) -> MemoryPool {
        MemoryPool {
            pools: std::collections::HashMap::new(),
            allocated: 0,
            max_size,
        }
    }
    
    pub fn allocate(&mut self, size: usize) -> Vec<u8> {
        // 查找最接近的 2 的幂
        let pool_size = size.next_power_of_two();
        
        if let Some(pool) = self.pools.get_mut(&pool_size) {
            if let Some(buffer) = pool.pop() {
                return buffer;
            }
        }
        
        // 如果超过最大限制，触发垃圾回收
        if self.allocated + pool_size > self.max_size {
            self.garbage_collect();
        }
        
        self.allocated += pool_size;
        vec![0u8; size]
    }
    
    pub fn deallocate(&mut self, mut buffer: Vec<u8>) {
        let capacity = buffer.capacity();
        let pool_size = capacity.next_power_of_two();
        
        // 清零缓冲区（可选，用于安全性）
        buffer.fill(0);
        buffer.resize(pool_size, 0);
        
        self.pools.entry(pool_size).or_insert_with(Vec::new).push(buffer);
    }
    
    fn garbage_collect(&mut self) {
        // 清理最大的池
        if let Some(max_size) = self.pools.keys().max().copied() {
            if let Some(pool) = self.pools.get_mut(&max_size) {
                let removed = pool.len() / 2;
                pool.drain(0..removed);
                self.allocated -= removed * max_size;
            }
        }
    }
    
    #[wasm_bindgen(getter)]
    pub fn allocated(&self) -> usize {
        self.allocated
    }
    
    #[wasm_bindgen(getter)]
    pub fn pool_count(&self) -> usize {
        self.pools.len()
    }
}

// 多线程工作任务
#[wasm_bindgen]
pub struct WorkerTask {
    id: u32,
    data: Vec<f32>,
    result: Option<Vec<f32>>,
}

#[wasm_bindgen]
impl WorkerTask {
    #[wasm_bindgen(constructor)]
    pub fn new(id: u32, data: Vec<f32>) -> WorkerTask {
        WorkerTask {
            id,
            data,
            result: None,
        }
    }
    
    #[wasm_bindgen(getter)]
    pub fn id(&self) -> u32 { self.id }
    
    #[wasm_bindgen(getter)]
    pub fn data(&self) -> Vec<f32> { self.data.clone() }
    
    pub fn process_data(&mut self, operation: &str) {
        match operation {
            "square" => {
                self.result = Some(self.data.iter().map(|x| x * x).collect());
            },
            "sqrt" => {
                self.result = Some(self.data.iter().map(|x| x.sqrt()).collect());
            },
            "normalize" => {
                let max_val = self.data.iter().fold(0.0f32, |a, &b| a.max(b));
                if max_val > 0.0 {
                    self.result = Some(self.data.iter().map(|x| x / max_val).collect());
                } else {
                    self.result = Some(self.data.clone());
                }
            },
            _ => {
                self.result = Some(self.data.clone());
            }
        }
    }
    
    #[wasm_bindgen(getter)]
    pub fn result(&self) -> Option<Vec<f32>> {
        self.result.clone()
    }
    
    pub fn is_complete(&self) -> bool {
        self.result.is_some()
    }
}
}

# Cargo.toml 优化配置
[package]
name = "optimized-wasm-app"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
web-sys = "0.3"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
  "Performance",
  "Window",
]

# 发布版本优化
[profile.release]
lto = true                    # 链接时优化
codegen-units = 1            # 单个代码生成单元
opt-level = "s"              # 优化大小
panic = "abort"              # 禁用展开
overflow-checks = false      # 禁用溢出检查

# WASM 特定优化
[package.metadata.wasm-pack.profile.release]
wasm-opt = ["-Oz", "--enable-simd"]  # 使用 wasm-opt 进一步优化

// performance-optimization.js
class WASMPerformanceOptimizer {
    constructor() {
        this.wasmModule = null;
        this.workerPool = [];
        this.taskQueue = [];
        this.isInitialized = false;
    }
    
    async initialize() {
        // 预加载和编译 WASM 模块
        const wasmResponse = await fetch('./pkg/optimized_wasm_app.wasm');
        const wasmBytes = await wasmResponse.arrayBuffer();
        
        // 使用 WebAssembly.compile 预编译
        this.compiledModule = await WebAssembly.compile(wasmBytes);
        
        // 实例化主模块
        const { optimized_wasm_app } = await import('./pkg/optimized_wasm_app.js');
        this.wasmModule = optimized_wasm_app;
        
        // 初始化 Worker 池
        await this.initializeWorkerPool();
        
        this.isInitialized = true;
        console.log('🚀 WASM 性能优化器初始化完成');
    }
    
    async initializeWorkerPool() {
        const workerCount = navigator.hardwareConcurrency || 4;
        
        for (let i = 0; i < workerCount; i++) {
            const worker = new Worker('./wasm-worker.js');
            
            // 在 Worker 中预实例化 WASM 模块
            worker.postMessage({
                type: 'INIT',
                compiledModule: this.compiledModule
            });
            
            worker.onmessage = (event) => {
                this.handleWorkerMessage(event, i);
            };
            
            this.workerPool.push({
                worker,
                busy: false,
                id: i
            });
        }
        
        console.log(`🔧 初始化了 ${workerCount} 个 Worker`);
    }
    
    // 使用 Worker 池进行并行处理
    async processInParallel(data, operation) {
        return new Promise((resolve, reject) => {
            const chunkSize = Math.ceil(data.length / this.workerPool.length);
            const chunks = [];
            
            // 将数据分块
            for (let i = 0; i < data.length; i += chunkSize) {
                chunks.push(data.slice(i, i + chunkSize));
            }
            
            let completedTasks = 0;
            const results = new Array(chunks.length);
            
            chunks.forEach((chunk, index) => {
                const availableWorker = this.workerPool.find(w => !w.busy);
                
                if (availableWorker) {
                    availableWorker.busy = true;
                    availableWorker.worker.postMessage({
                        type: 'PROCESS',
                        taskId: index,
                        data: chunk,
                        operation
                    });
                    
                    const originalOnMessage = availableWorker.worker.onmessage;
                    availableWorker.worker.onmessage = (event) => {
                        if (event.data.type === 'RESULT' && event.data.taskId === index) {
                            results[index] = event.data.result;
                            completedTasks++;
                            availableWorker.busy = false;
                            
                            if (completedTasks === chunks.length) {
                                resolve(results.flat());
                            }
                            
                            // 恢复原始消息处理器
                            availableWorker.worker.onmessage = originalOnMessage;
                        }
                    };
                } else {
                    // 如果没有可用的 Worker，加入队列
                    this.taskQueue.push({ chunk, index, operation, resolve, reject });
                }
            });
        });
    }
    
    // 内存优化的批处理
    processLargeDataset(data, batchSize = 10000) {
        const monitor = new this.wasmModule.PerformanceMonitor();
        const memoryPool = new this.wasmModule.MemoryPool(1024 * 1024 * 100); // 100MB
        
        monitor.start_timer('large_dataset_processing');
        
        const results = [];
        
        for (let i = 0; i < data.length; i += batchSize) {
            const batch = data.slice(i, i + batchSize);
            
            // 从内存池分配缓冲区
            const buffer = memoryPool.allocate(batch.length * 4); // 4 bytes per float
            
            // 处理批次
            const batchResult = this.wasmModule.process_batch(batch);
            results.push(...batchResult);
            
            // 释放缓冲区回内存池
            memoryPool.deallocate(buffer);
            
            // 定期强制垃圾回收
            if (i % (batchSize * 10) === 0) {
                if (window.gc) {
                    window.gc();
                }
            }
        }
        
        const duration = monitor.end_timer('large_dataset_processing');
        const memoryUsage = monitor.memory_usage();
        
        console.log(`📊 处理 ${data.length} 个元素耗时: ${duration.toFixed(2)}ms`);
        console.log(`💾 内存使用: ${(memoryUsage / 1024 / 1024).toFixed(2)}MB`);
        
        return results;
    }
    
    // SIMD 优化的向量运算
    optimizedVectorOperations(vectorA, vectorB, operation) {
        const simdProcessor = new this.wasmModule.SIMDProcessor();
        const monitor = new this.wasmModule.PerformanceMonitor();
        
        monitor.start_timer(`simd_${operation}`);
        
        let result;
        switch (operation) {
            case 'add':
                result = simdProcessor.vector_add_simd(vectorA, vectorB);
                break;
            case 'multiply_matrix':
                // 假设 vectorA 和 vectorB 是矩阵数据
                const rows = Math.sqrt(vectorA.length);
                const cols = Math.sqrt(vectorB.length);
                result = simdProcessor.matrix_multiply_simd(
                    vectorA, vectorB, rows, rows, cols
                );
                break;
            default:
                throw new Error(`不支持的操作: ${operation}`);
        }
        
        const duration = monitor.end_timer(`simd_${operation}`);
        console.log(`⚡ SIMD ${operation} 操作完成，耗时: ${duration.toFixed(2)}ms`);
        
        return result;
    }
    
    // 性能基准测试
    async runBenchmarks() {
        console.log('🏃‍♂️ 开始性能基准测试...');
        
        const testSizes = [1000, 10000, 100000];
        const results = {};
        
        for (const size of testSizes) {
            console.log(`\n📏 测试数据大小: ${size}`);
            
            // 生成测试数据
            const testDataA = new Float32Array(size);
            const testDataB = new Float32Array(size);
            
            for (let i = 0; i < size; i++) {
                testDataA[i] = Math.random();
                testDataB[i] = Math.random();
            }
            
            // JavaScript 原生实现
            const jsStart = performance.now();
            const jsResult = new Float32Array(size);
            for (let i = 0; i < size; i++) {
                jsResult[i] = testDataA[i] + testDataB[i];
            }
            const jsTime = performance.now() - jsStart;
            
            // WASM 标准实现
            const wasmStart = performance.now();
            const wasmResult = this.wasmModule.vector_add_standard(testDataA, testDataB);
            const wasmTime = performance.now() - wasmStart;
            
            // WASM SIMD 实现
            const simdStart = performance.now();
            const simdResult = this.optimizedVectorOperations(testDataA, testDataB, 'add');
            const simdTime = performance.now() - simdStart;
            
            results[size] = {
                javascript: jsTime,
                wasm: wasmTime,
                wasm_simd: simdTime,
                speedup_wasm: jsTime / wasmTime,
                speedup_simd: jsTime / simdTime
            };
            
            console.log(`  JS: ${jsTime.toFixed(2)}ms`);
            console.log(`  WASM: ${wasmTime.toFixed(2)}ms (${(jsTime/wasmTime).toFixed(1)}x)`);
            console.log(`  WASM+SIMD: ${simdTime.toFixed(2)}ms (${(jsTime/simdTime).toFixed(1)}x)`);
        }
        
        return results;
    }
    
    // 内存使用监控
    startMemoryMonitoring() {
        setInterval(() => {
            if (performance.memory) {
                const memInfo = {
                    used: performance.memory.usedJSHeapSize,
                    total: performance.memory.totalJSHeapSize,
                    limit: performance.memory.jsHeapSizeLimit
                };
                
                console.log(`💾 内存使用: ${(memInfo.used/1024/1024).toFixed(1)}MB / ${(memInfo.total/1024/1024).toFixed(1)}MB`);
                
                // 内存使用超过阈值时警告
                if (memInfo.used / memInfo.limit > 0.8) {
                    console.warn('⚠️ 内存使用率过高，建议进行垃圾回收');
                }
            }
        }, 5000);
    }
}

// Worker 脚本 (wasm-worker.js)
const workerScript = `
let wasmModule = null;

self.onmessage = async function(event) {
    const { type, compiledModule, taskId, data, operation } = event.data;
    
    if (type === 'INIT') {
        try {
            // 在 Worker 中实例化预编译的 WASM 模块
            const wasmInstance = await WebAssembly.instantiate(compiledModule);
            const { optimized_wasm_app } = await import('./pkg/optimized_wasm_app.js');
            wasmModule = optimized_wasm_app;
            
            self.postMessage({ type: 'READY' });
        } catch (error) {
            self.postMessage({ type: 'ERROR', error: error.message });
        }
    } else if (type === 'PROCESS' && wasmModule) {
        try {
            const task = new wasmModule.WorkerTask(taskId, data);
            task.process_data(operation);
            const result = task.result();
            
            self.postMessage({
                type: 'RESULT',
                taskId,
                result
            });
        } catch (error) {
            self.postMessage({
                type: 'ERROR',
                taskId,
                error: error.message
            });
        }
    }
};
`;

// 创建 Worker 脚本的 Blob URL
const workerBlob = new Blob([workerScript], { type: 'application/javascript' });
const workerURL = URL.createObjectURL(workerBlob);

// 使用示例
async function runOptimizationDemo() {
    const optimizer = new WASMPerformanceOptimizer();
    await optimizer.initialize();
    
    // 启动内存监控
    optimizer.startMemoryMonitoring();
    
    // 运行基准测试
    const benchmarkResults = await optimizer.runBenchmarks();
    console.table(benchmarkResults);
    
    // 测试并行处理
    const largeData = new Float32Array(1000000);
    for (let i = 0; i < largeData.length; i++) {
        largeData[i] = Math.random();
    }
    
    const parallelResult = await optimizer.processInParallel(largeData, 'square');
    console.log(`🔄 并行处理 ${largeData.length} 个元素完成`);
}

// 启动演示
runOptimizationDemo();

# .github/workflows/optimize-build.yml
name: 优化构建和部署

on:
  push:
    branches: [ main ]

jobs:
  optimize-build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: 安装 Rust
      uses: actions-rs/toolchain@v1
      with:
        toolchain: stable
        target: wasm32-unknown-unknown
    
    - name: 安装 wasm-pack
      run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
    
    - name: 安装 wasm-opt
      run: |
        wget https://github.com/WebAssembly/binaryen/releases/download/version_108/binaryen-version_108-x86_64-linux.tar.gz
        tar -xzf binaryen-version_108-x86_64-linux.tar.gz
        sudo cp binaryen-version_108/bin/* /usr/local/bin/
    
    - name: 构建 WASM (发布版本)
      run: |
        wasm-pack build --target web --out-dir pkg --release
        
    - name: 进一步优化 WASM
      run: |
        wasm-opt -Oz --enable-simd -o pkg/optimized_wasm_app_bg.wasm pkg/optimized_wasm_app_bg.wasm
        wasm-strip pkg/optimized_wasm_app_bg.wasm
    
    - name: 压缩资源
      run: |
        gzip -k pkg/*.wasm
        gzip -k pkg/*.js
    
    - name: 生成性能报告
      run: |
        ls -lh pkg/
        echo "WASM 文件大小:" >> performance-report.txt
        ls -lh pkg/*.wasm >> performance-report.txt
    
    - name: 部署到 GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./

评分标准

总分：100分 及格线：60分

🎯 核心要点：

• 掌握大型 WebAssembly 项目的架构设计
• 熟练使用性能优化技术和工具
• 理解实际生产环境的部署要求
• 能够进行综合性能分析和调优

附录A 常用 WAT 指令参考

本附录提供 WebAssembly 文本格式 (WAT) 的完整指令参考，按功能分类整理，便于开发时快速查阅。

A.1 模块结构语法

A.1.1 模块定义

(module
  ;; 类型定义
  (type $func_type (func (param i32) (result i32)))
  
  ;; 导入声明
  (import "env" "memory" (memory 1))
  (import "console" "log" (func $log (param i32)))
  
  ;; 函数定义
  (func $name (param $p1 i32) (result i32) ...)
  
  ;; 表定义
  (table $table 10 funcref)
  
  ;; 内存定义
  (memory 1 2)
  
  ;; 全局变量
  (global $counter (mut i32) (i32.const 0))
  
  ;; 导出声明
  (export "function_name" (func $name))
  (export "memory" (memory 0))
  
  ;; 起始函数
  (start $init)
  
  ;; 元素段（初始化表）
  (elem (i32.const 0) $func1 $func2)
  
  ;; 数据段（初始化内存）
  (data (i32.const 0) "Hello World"))

A.1.2 函数定义语法

;; 完整形式
(func $name (param $arg1 i32) (param $arg2 f32) (result i64)
  (local $temp i32)
  ;; 函数体
  local.get $arg1
  i64.extend_i32_s)

;; 简化形式
(func $name (param i32 f32) (result i64)
  ;; 使用索引访问参数：local.get 0, local.get 1
  local.get 0
  i64.extend_i32_s)

;; 多返回值（WebAssembly 2.0+）
(func $swap (param i32 i32) (result i32 i32)
  local.get 1
  local.get 0)

A.2 数据类型和常量

A.2.1 基本数据类型

A.2.2 常量定义

;; 整数常量
i32.const 42              ;; 十进制
i32.const 0x2A            ;; 十六进制
i32.const 0o52            ;; 八进制
i32.const 0b101010        ;; 二进制
i32.const -123            ;; 负数

i64.const 1234567890123456789
i64.const 0x112210F47DE98115

;; 浮点数常量
f32.const 3.14159         ;; 标准形式
f32.const 1.23e-4         ;; 科学记数法
f32.const 0x1.921FB6p+1   ;; 十六进制浮点数
f32.const inf             ;; 正无穷
f32.const -inf            ;; 负无穷
f32.const nan             ;; NaN
f32.const nan:0x400000    ;; 带载荷的 NaN

f64.const 2.718281828459045
f64.const 0x1.5BF0A8B145769p+1

A.3 算术指令

A.3.1 整数算术指令

基本算术运算

;; i32 算术指令
i32.add         ;; 加法：a + b
i32.sub         ;; 减法：a - b  
i32.mul         ;; 乘法：a * b
i32.div_s       ;; 有符号除法：a / b
i32.div_u       ;; 无符号除法：a / b
i32.rem_s       ;; 有符号取余：a % b
i32.rem_u       ;; 无符号取余：a % b

;; i64 算术指令（同 i32）
i64.add         i64.sub         i64.mul
i64.div_s       i64.div_u
i64.rem_s       i64.rem_u

;; 一元运算
i32.clz         ;; 前导零计数
i32.ctz         ;; 后导零计数
i32.popcnt      ;; 位计数（汉明重量）
i32.eqz         ;; 等于零测试 (i32 → i32)

i64.clz         i64.ctz         i64.popcnt      i64.eqz

位运算指令

;; 按位逻辑运算
i32.and         ;; 按位与：a & b
i32.or          ;; 按位或：a | b
i32.xor         ;; 按位异或：a ^ b

;; 移位运算
i32.shl         ;; 左移：a << b
i32.shr_s       ;; 算术右移：a >> b (保持符号)
i32.shr_u       ;; 逻辑右移：a >>> b (补零)
i32.rotl        ;; 循环左移
i32.rotr        ;; 循环右移

;; i64 位运算（同 i32）
i64.and         i64.or          i64.xor
i64.shl         i64.shr_s       i64.shr_u
i64.rotl        i64.rotr

A.3.2 浮点算术指令

;; f32/f64 基本算术
f32.add         f64.add         ;; 加法
f32.sub         f64.sub         ;; 减法
f32.mul         f64.mul         ;; 乘法
f32.div         f64.div         ;; 除法

;; 数学函数
f32.abs         f64.abs         ;; 绝对值
f32.neg         f64.neg         ;; 取负
f32.ceil        f64.ceil        ;; 向上取整
f32.floor       f64.floor       ;; 向下取整
f32.trunc       f64.trunc       ;; 截断取整
f32.nearest     f64.nearest     ;; 四舍五入到最近整数
f32.sqrt        f64.sqrt        ;; 平方根

;; 最值运算
f32.min         f64.min         ;; 最小值
f32.max         f64.max         ;; 最大值
f32.copysign    f64.copysign    ;; 复制符号位

A.4 比较指令

A.4.1 整数比较

;; i32 比较指令（返回 i32：1 为真，0 为假）
i32.eq          ;; 相等：a == b
i32.ne          ;; 不等：a != b
i32.lt_s        ;; 有符号小于：a < b
i32.lt_u        ;; 无符号小于：a < b
i32.gt_s        ;; 有符号大于：a > b
i32.gt_u        ;; 无符号大于：a > b
i32.le_s        ;; 有符号小于等于：a <= b
i32.le_u        ;; 无符号小于等于：a <= b
i32.ge_s        ;; 有符号大于等于：a >= b
i32.ge_u        ;; 无符号大于等于：a >= b

;; i64 比较指令（同 i32）
i64.eq          i64.ne
i64.lt_s        i64.lt_u        i64.gt_s        i64.gt_u
i64.le_s        i64.le_u        i64.ge_s        i64.ge_u

A.4.2 浮点比较

;; f32/f64 比较指令（返回 i32）
f32.eq          f64.eq          ;; 相等
f32.ne          f64.ne          ;; 不等
f32.lt          f64.lt          ;; 小于
f32.gt          f64.gt          ;; 大于
f32.le          f64.le          ;; 小于等于
f32.ge          f64.ge          ;; 大于等于

A.5 类型转换指令

A.5.1 整数类型转换

;; 扩展和截断
i64.extend_i32_s        ;; i32 → i64 (有符号扩展)
i64.extend_i32_u        ;; i32 → i64 (无符号扩展)
i32.wrap_i64            ;; i64 → i32 (截断低32位)

;; 截断扩展（符号扩展）
i32.extend8_s           ;; i8 → i32 (有符号扩展)
i32.extend16_s          ;; i16 → i32 (有符号扩展)
i64.extend8_s           ;; i8 → i64 (有符号扩展)
i64.extend16_s          ;; i16 → i64 (有符号扩展)
i64.extend32_s          ;; i32 → i64 (有符号扩展)

A.5.2 浮点类型转换

;; 浮点精度转换
f64.promote_f32         ;; f32 → f64 (提升精度)
f32.demote_f64          ;; f64 → f32 (降低精度)

;; 整数与浮点数转换
f32.convert_i32_s       ;; i32 → f32 (有符号)
f32.convert_i32_u       ;; i32 → f32 (无符号)
f32.convert_i64_s       ;; i64 → f32 (有符号)
f32.convert_i64_u       ;; i64 → f32 (无符号)
f64.convert_i32_s       ;; i32 → f64 (有符号)
f64.convert_i32_u       ;; i32 → f64 (无符号)
f64.convert_i64_s       ;; i64 → f64 (有符号)
f64.convert_i64_u       ;; i64 → f64 (无符号)

;; 浮点数到整数转换
i32.trunc_f32_s         ;; f32 → i32 (有符号截断)
i32.trunc_f32_u         ;; f32 → i32 (无符号截断)
i32.trunc_f64_s         ;; f64 → i32 (有符号截断)
i32.trunc_f64_u         ;; f64 → i32 (无符号截断)
i64.trunc_f32_s         ;; f32 → i64 (有符号截断)
i64.trunc_f32_u         ;; f32 → i64 (无符号截断)
i64.trunc_f64_s         ;; f64 → i64 (有符号截断)
i64.trunc_f64_u         ;; f64 → i64 (无符号截断)

;; 饱和截断（避免溢出异常）
i32.trunc_sat_f32_s     ;; f32 → i32 (有符号饱和)
i32.trunc_sat_f32_u     ;; f32 → i32 (无符号饱和)
i32.trunc_sat_f64_s     ;; f64 → i32 (有符号饱和)
i32.trunc_sat_f64_u     ;; f64 → i32 (无符号饱和)
i64.trunc_sat_f32_s     ;; f32 → i64 (有符号饱和)
i64.trunc_sat_f32_u     ;; f32 → i64 (无符号饱和)
i64.trunc_sat_f64_s     ;; f64 → i64 (有符号饱和)
i64.trunc_sat_f64_u     ;; f64 → i64 (无符号饱和)

A.5.3 重新解释类型

;; 位模式重新解释（不改变位表示）
i32.reinterpret_f32     ;; f32 → i32 (位模式转换)
i64.reinterpret_f64     ;; f64 → i64 (位模式转换)
f32.reinterpret_i32     ;; i32 → f32 (位模式转换)
f64.reinterpret_i64     ;; i64 → f64 (位模式转换)

A.6 局部变量和栈操作

A.6.1 局部变量操作

;; 获取局部变量/参数
local.get $name         ;; 按名称获取
local.get 0             ;; 按索引获取（0是第一个参数）

;; 设置局部变量
local.set $name         ;; 按名称设置
local.set 0             ;; 按索引设置

;; 设置并获取局部变量
local.tee $name         ;; 设置变量并保留栈顶值
local.tee 0             ;; 按索引操作

A.6.2 全局变量操作

;; 获取全局变量
global.get $name        ;; 按名称获取
global.get 0            ;; 按索引获取

;; 设置全局变量（仅限可变全局变量）
global.set $name        ;; 按名称设置
global.set 0            ;; 按索引设置

A.6.3 栈操作指令

drop                    ;; 丢弃栈顶值
select                  ;; 条件选择：condition ? a : b
                        ;; 栈：[condition] [false_val] [true_val] → [result]

A.7 控制流指令

A.7.1 基本控制结构

;; 无条件块
(block $label
  ;; 代码块
  br $label)            ;; 跳出块

;; 循环块
(loop $label
  ;; 循环体
  br $label)            ;; 跳回循环开始

;; 条件分支
(if (result i32)        ;; 可选返回类型
  ;; 条件表达式
  (then
    ;; then 分支)
  (else
    ;; else 分支))        ;; else 分支可选

A.7.2 跳转指令

br $label               ;; 无条件跳转到标签
br_if $label            ;; 条件跳转：如果栈顶非零则跳转
br_table $l1 $l2 $default   ;; 表跳转（switch 语句）
return                  ;; 函数返回
unreachable             ;; 标记不可达代码（触发 trap）

A.7.3 函数调用

call $function_name     ;; 直接函数调用
call_indirect (type $sig) $table   ;; 间接函数调用（通过函数表）

A.8 内存操作指令

A.8.1 内存加载指令

;; 基本加载指令
i32.load                ;; 加载32位整数
i64.load                ;; 加载64位整数  
f32.load                ;; 加载32位浮点数
f64.load                ;; 加载64位浮点数

;; 带偏移和对齐的加载
i32.load offset=4 align=4
i64.load offset=8 align=8

;; 部分加载（扩展）
i32.load8_s             ;; 加载8位有符号扩展到32位
i32.load8_u             ;; 加载8位无符号扩展到32位
i32.load16_s            ;; 加载16位有符号扩展到32位
i32.load16_u            ;; 加载16位无符号扩展到32位
i64.load8_s             ;; 加载8位有符号扩展到64位
i64.load8_u             ;; 加载8位无符号扩展到64位
i64.load16_s            ;; 加载16位有符号扩展到64位
i64.load16_u            ;; 加载16位无符号扩展到64位
i64.load32_s            ;; 加载32位有符号扩展到64位
i64.load32_u            ;; 加载32位无符号扩展到64位

A.8.2 内存存储指令

;; 基本存储指令
i32.store               ;; 存储32位整数
i64.store               ;; 存储64位整数
f32.store               ;; 存储32位浮点数
f64.store               ;; 存储64位浮点数

;; 带偏移和对齐的存储
i32.store offset=4 align=4
i64.store offset=8 align=8

;; 部分存储（截断）
i32.store8              ;; 存储32位整数的低8位
i32.store16             ;; 存储32位整数的低16位
i64.store8              ;; 存储64位整数的低8位
i64.store16             ;; 存储64位整数的低16位
i64.store32             ;; 存储64位整数的低32位

A.8.3 内存管理指令

memory.size             ;; 获取内存大小（以页为单位，1页=64KB）
memory.grow             ;; 增长内存大小，返回之前的大小

;; 批量内存操作（bulk memory operations）
memory.init $data_segment    ;; 从数据段初始化内存
data.drop $data_segment      ;; 丢弃数据段
memory.copy                  ;; 复制内存区域  
memory.fill                  ;; 填充内存区域

A.9 表操作指令

A.9.1 基本表操作

table.get $table        ;; 获取表元素
table.set $table        ;; 设置表元素
table.size $table       ;; 获取表大小
table.grow $table       ;; 增长表大小
table.fill $table       ;; 填充表
table.copy $dest $src   ;; 复制表元素
table.init $table $elem ;; 从元素段初始化表
elem.drop $elem         ;; 丢弃元素段

A.10 原子操作指令（线程扩展）

A.10.1 原子内存操作

;; 原子加载/存储
i32.atomic.load         ;; 原子加载32位
i64.atomic.load         ;; 原子加载64位
i32.atomic.store        ;; 原子存储32位
i64.atomic.store        ;; 原子存储64位

;; 读-修改-写操作
i32.atomic.rmw.add      ;; 原子加法
i32.atomic.rmw.sub      ;; 原子减法
i32.atomic.rmw.and      ;; 原子与运算
i32.atomic.rmw.or       ;; 原子或运算
i32.atomic.rmw.xor      ;; 原子异或运算
i32.atomic.rmw.xchg     ;; 原子交换

;; 比较并交换
i32.atomic.rmw.cmpxchg  ;; 原子比较并交换

;; 内存屏障
memory.atomic.notify    ;; 通知等待线程
memory.atomic.wait32    ;; 等待32位值变化
memory.atomic.wait64    ;; 等待64位值变化
atomic.fence            ;; 内存屏障

A.11 SIMD 指令（向量扩展）

A.11.1 向量操作

;; v128 类型常量
v128.const i32x4 1 2 3 4        ;; 创建4个i32向量
v128.const f32x4 1.0 2.0 3.0 4.0 ;; 创建4个f32向量

;; 向量加载/存储
v128.load                       ;; 加载128位向量
v128.load8x8_s                  ;; 加载8个i8，扩展到i16
v128.load16x4_s                 ;; 加载4个i16，扩展到i32
v128.load32x2_s                 ;; 加载2个i32，扩展到i64
v128.store                      ;; 存储128位向量

;; 向量算术运算
i32x4.add                       ;; 4个i32并行加法
i32x4.sub                       ;; 4个i32并行减法
i32x4.mul                       ;; 4个i32并行乘法
f32x4.add                       ;; 4个f32并行加法
f32x4.sqrt                      ;; 4个f32并行平方根

;; 向量比较
i32x4.eq                        ;; 4个i32并行相等比较
f32x4.lt                        ;; 4个f32并行小于比较

;; 向量选择和混合
v128.bitselect                  ;; 按位选择
i8x16.shuffle                   ;; 字节shuffle重排

A.12 异常处理指令（异常扩展）

A.12.1 异常操作

;; 异常标签定义
(tag $my_exception (param i32))

;; 异常处理块
(try (result i32)
  ;; 可能抛出异常的代码
  (throw $my_exception (i32.const 42))
  (catch $my_exception
    ;; 异常处理代码
    drop    ;; 丢弃异常参数
    i32.const -1))

;; 异常指令
throw $tag                      ;; 抛出异常
rethrow $label                  ;; 重新抛出异常

A.13 常用代码模式

A.13.1 条件表达式模式

;; 三元运算符模式
(if (result i32)
  ;; 条件
  (then ;; 真值)
  (else ;; 假值))

;; 使用 select 的简化版本
(select
  ;; 真值
  ;; 假值
  ;; 条件)

A.13.2 循环模式

;; 计数循环
(local $i i32)
(local.set $i (i32.const 0))
(loop $loop
  ;; 循环体
  
  ;; 递增计数器
  (local.set $i (i32.add (local.get $i) (i32.const 1)))
  
  ;; 条件检查
  (br_if $loop (i32.lt_s (local.get $i) (i32.const 10))))

;; while 循环模式
(loop $while
  (if (;; 条件)
    (then
      ;; 循环体
      (br $while))))

;; do-while 循环模式
(loop $do_while
  ;; 循环体
  
  (br_if $do_while (;; 条件)))

A.13.3 函数指针和回调模式

;; 定义函数类型
(type $callback (func (param i32) (result i32)))

;; 函数表
(table $callbacks 10 funcref)

;; 回调调用
(func $call_callback (param $index i32) (param $value i32) (result i32)
  (call_indirect (type $callback)
    (local.get $value)
    (local.get $index)))

A.13.4 错误处理模式

;; 返回错误码
(func $safe_divide (param $a i32) (param $b i32) (result i32)
  (if (result i32)
    (i32.eqz (local.get $b))
    (then (i32.const -1))  ;; 错误码
    (else (i32.div_s (local.get $a) (local.get $b)))))

;; 使用全局错误标志
(global $error_flag (mut i32) (i32.const 0))

(func $operation_with_error_flag
  ;; 重置错误标志
  (global.set $error_flag (i32.const 0))
  
  ;; 操作...
  ;; 如果出错
  (global.set $error_flag (i32.const 1)))

A.14 性能优化提示

A.14.1 指令选择优化

;; 优先使用高效指令
;; 好：使用移位代替乘法/除法（当可能时）
(i32.shl (local.get $x) (i32.const 3))  ;; x * 8

;; 避免：
(i32.mul (local.get $x) (i32.const 8))

;; 好：使用位运算检查奇偶
(i32.and (local.get $x) (i32.const 1))  ;; x % 2

;; 避免：
(i32.rem_s (local.get $x) (i32.const 2))

A.14.2 内存访问优化

;; 好：按对齐边界访问
i32.load align=4        ;; 4字节对齐
i64.load align=8        ;; 8字节对齐

;; 避免：未对齐访问
i32.load align=1        ;; 可能较慢

;; 好：批量操作
memory.copy             ;; 比循环复制更快
memory.fill             ;; 比循环填充更快

A.14.3 控制流优化

;; 好：减少跳转
(if (local.get $condition)
  (then
    ;; 直接计算))

;; 避免：过多嵌套
(if (local.get $a)
  (then
    (if (local.get $b)
      (then
        (if (local.get $c)
          ;; 过度嵌套)))))

A.15 调试和开发技巧

A.15.1 调试辅助模式

;; 使用 unreachable 标记错误路径
(if (i32.lt_s (local.get $index) (i32.const 0))
  (then
    unreachable))  ;; 触发 trap，便于调试

;; 使用导入函数进行调试输出
(import "debug" "log_i32" (func $log (param i32)))

(func $debug_example (param $value i32)
  ;; 记录参数值
  (call $log (local.get $value))
  
  ;; 继续处理...)

A.15.2 代码组织建议

;; 使用有意义的函数和变量名
(func $calculate_fibonacci (param $n i32) (result i32)
  (local $prev i32)
  (local $curr i32)
  ;; 清晰的实现)

;; 添加注释说明复杂逻辑
;; 计算 x 的平方根（牛顿法）
(func $sqrt_newton (param $x f64) (result f64)
  ;; 实现...)

;; 将相关功能分组到同一模块
(module
  ;; 数学函数组
  (func $add ...)
  (func $multiply ...)
  (func $power ...)
  
  ;; 字符串处理组
  (func $strlen ...)
  (func $strcmp ...)
  (func $strcpy ...))

📖 参考说明：

• 所有指令都区分大小写
• 标签名（如 $name）是可选的，也可以使用数字索引
• 某些高级指令需要特定的 WebAssembly 提案支持
• 性能特性可能因不同的 WebAssembly 运行时而异

🔗 相关章节：

• 第4章 WebAssembly 文本格式 (WAT)
• 第5章 内存管理
• 第6章 控制流

附录B 工具链完整指南

本附录提供 WebAssembly 开发工具链的完整指南，涵盖从基础工具安装到高级调试和性能优化的全套工具。无论你是初学者还是高级开发者，这份指南都将帮助你构建高效的 WebAssembly 开发环境。

B.1 工具链总览

B.1.1 工具分类

WebAssembly 工具链可以分为以下几个主要类别：

核心编译工具：

• WABT - WebAssembly Binary Toolkit（官方工具集）
• Emscripten - C/C++ 到 WebAssembly 编译器
• wasm-pack - Rust 到 WebAssembly 工具
• AssemblyScript - TypeScript-like 语言到 WebAssembly

运行时环境：

• Wasmtime - 独立 WebAssembly 运行时
• Wasmer - 通用 WebAssembly 运行时
• WAMR - 嵌入式 WebAssembly 运行时
• Node.js - 内置 WebAssembly 支持

优化和分析工具：

• Binaryen - WebAssembly 优化器
• wasm-opt - 优化工具
• Twiggy - 代码尺寸分析器
• wasm-objdump - 二进制分析工具

调试和开发工具：

• Chrome DevTools - 浏览器调试器
• VSCode - 代码编辑器和插件
• LLDB - 低级调试器
• wasm-strip - 符号表剥离工具

B.1.2 推荐工具组合

初学者组合：

# 基础工具
- WABT (wat2wasm, wasm2wat)
- Emscripten (C/C++ 编译)
- VSCode + WebAssembly 插件
- Chrome 浏览器 (调试)

Rust 开发者组合：

# Rust 生态
- wasm-pack
- wasm-bindgen
- cargo-generate
- wee_alloc

性能优化组合：

# 性能工具
- Binaryen (wasm-opt)
- Twiggy (尺寸分析)
- Chrome DevTools (性能分析)
- Wasmtime (基准测试)

B.2 核心工具安装

B.2.1 WABT (WebAssembly Binary Toolkit)

WABT 是 WebAssembly 官方工具集，提供二进制和文本格式之间的转换功能。

Ubuntu/Debian 安装：

# 使用包管理器
sudo apt-get update
sudo apt-get install wabt

# 验证安装
wat2wasm --version
wasm2wat --version

macOS 安装：

# 使用 Homebrew
brew install wabt

# 验证安装
wat2wasm --version
wasm2wat --version

Windows 安装：

# 使用 Chocolatey
choco install wabt

# 或下载预编译二进制文件
# 从 https://github.com/WebAssembly/wabt/releases 下载

从源码编译：

# 克隆仓库
git clone --recursive https://github.com/WebAssembly/wabt
cd wabt

# 创建构建目录
mkdir build && cd build

# 配置和编译
cmake ..
make -j$(nproc)

# 安装
sudo make install

主要工具说明：

• wat2wasm: WAT 文本格式转 WASM 二进制格式
• wasm2wat: WASM 二进制格式转 WAT 文本格式
• wasm-validate: 验证 WASM 文件有效性
• wasm-objdump: 查看 WASM 文件结构和内容
• wasm-interp: WebAssembly 解释器
• wasm-decompile: 反编译为高级语言风格代码

B.2.2 Emscripten

Emscripten 是将 C/C++ 代码编译为 WebAssembly 的完整工具链。

安装 Emscripten SDK：

# 下载 emsdk
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# 安装最新稳定版
./emsdk install latest
./emsdk activate latest

# 设置环境变量（临时）
source ./emsdk_env.sh

# 永久设置环境变量
echo 'source /path/to/emsdk/emsdk_env.sh' >> ~/.bashrc

Windows 安装：

# 下载 emsdk
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# 安装和激活
emsdk.bat install latest
emsdk.bat activate latest

# 设置环境变量
emsdk_env.bat

验证安装：

# 检查版本
emcc --version
em++ --version
node --version

# 测试编译
echo 'int main() { return 42; }' > test.c
emcc test.c -o test.html

配置选项：

# 查看可用版本
./emsdk list

# 安装特定版本
./emsdk install 3.1.45
./emsdk activate 3.1.45

# 设置上游工具链
./emsdk install tot
./emsdk activate tot

B.2.3 Rust 工具链

安装 Rust：

# 安装 Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 重新加载环境
source ~/.cargo/env

# 添加 WebAssembly 目标
rustup target add wasm32-unknown-unknown
rustup target add wasm32-wasi

安装 wasm-pack：

# 从官方脚本安装
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 或使用 cargo 安装
cargo install wasm-pack

# 验证安装
wasm-pack --version

安装辅助工具：

# wasm-bindgen CLI
cargo install wasm-bindgen-cli

# cargo-generate (项目模板)
cargo install cargo-generate

# Twiggy (代码尺寸分析)
cargo install twiggy

B.2.4 WebAssembly 运行时

Wasmtime：

# macOS/Linux
curl https://wasmtime.dev/install.sh -sSf | bash

# 手动安装
wget https://github.com/bytecodealliance/wasmtime/releases/latest/download/wasmtime-v*-x86_64-linux.tar.xz
tar -xf wasmtime-*.tar.xz
sudo cp wasmtime-*/wasmtime /usr/local/bin/

# 验证安装
wasmtime --version

Wasmer：

# 安装脚本
curl https://get.wasmer.io -sSfL | sh

# 手动安装
wget https://github.com/wasmerio/wasmer/releases/latest/download/wasmer-linux-amd64.tar.gz
tar -xzf wasmer-linux-amd64.tar.gz
sudo cp bin/wasmer /usr/local/bin/

# 验证安装
wasmer --version

B.2.5 Node.js 环境

安装 Node.js：

# 使用 nvm (推荐)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install node
nvm use node

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# macOS
brew install node

# 验证安装
node --version
npm --version

WebAssembly 相关包：

# 安装常用 WASM 包
npm install -g @wasmer/cli
npm install -g wasmtime
npm install -g wasm-pack

# 开发依赖
npm install --save-dev webpack webpack-cli
npm install --save-dev @wasm-tool/wasm-pack-plugin

B.3 编译工具链详解

B.3.1 Emscripten 编译选项

基本编译命令：

# 简单编译
emcc source.c -o output.html

# 仅生成 WASM 和 JS
emcc source.c -o output.js

# 仅生成 WASM
emcc source.c -o output.wasm

# 多文件编译
emcc main.c utils.c -o app.html

常用编译选项：

# 优化级别
emcc source.c -O0  # 无优化，快速编译
emcc source.c -O1  # 基本优化
emcc source.c -O2  # 标准优化（推荐）
emcc source.c -O3  # 最大优化
emcc source.c -Os  # 尺寸优化
emcc source.c -Oz  # 最大尺寸优化

# 导出函数
emcc source.c -o output.js \
  -s EXPORTED_FUNCTIONS='["_main", "_add", "_multiply"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

# 内存设置
emcc source.c -o output.js \
  -s INITIAL_MEMORY=16777216 \    # 16MB 初始内存
  -s ALLOW_MEMORY_GROWTH=1 \      # 允许内存增长
  -s MAXIMUM_MEMORY=67108864      # 64MB 最大内存

# 调试选项
emcc source.c -o output.js \
  -g4 \                           # 包含调试信息
  -s ASSERTIONS=1 \               # 运行时断言
  -s SAFE_HEAP=1 \                # 内存安全检查
  --source-map-base http://localhost:8000/

高级编译选项：

# 自定义 HTML 模板
emcc source.c -o output.html --shell-file custom_shell.html

# 预加载文件
emcc source.c -o output.js --preload-file assets/

# 嵌入文件
emcc source.c -o output.js --embed-file config.txt

# 链接库
emcc source.c -o output.js -lm  # 链接数学库

# 使用现代 JS 特性
emcc source.c -o output.js \
  -s ENVIRONMENT='web' \
  -s EXPORT_ES6=1 \
  -s MODULARIZE=1 \
  -s USE_ES6_IMPORT_META=0

B.3.2 wasm-pack 使用

创建 Rust 项目：

# 使用模板创建项目
cargo generate --git https://github.com/rustwasm/wasm-pack-template

# 或手动创建
cargo new --lib my-wasm-project
cd my-wasm-project

配置 Cargo.toml：

[package]
name = "my-wasm-project"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
  "Document",
  "Element",
  "HtmlElement",
  "Window",
]

[dependencies.js-sys]
version = "0.3"

编译命令：

# 标准编译（适合打包工具）
wasm-pack build

# 针对浏览器
wasm-pack build --target web

# 针对 Node.js
wasm-pack build --target nodejs

# 针对打包工具
wasm-pack build --target bundler

# 开发模式（包含调试信息）
wasm-pack build --dev

# 生产模式（优化）
wasm-pack build --release

# 指定输出目录
wasm-pack build --out-dir pkg-custom

# 设置范围
wasm-pack build --scope my-org

发布到 npm：

# 构建包
wasm-pack build --target bundler

# 发布到 npm
wasm-pack publish

B.3.3 AssemblyScript 工具链

安装 AssemblyScript：

# 全局安装
npm install -g assemblyscript

# 项目级安装
npm install --save-dev assemblyscript

# 初始化项目
npx asinit .

编译 AssemblyScript：

# 编译为 WASM
npx asc assembly/index.ts --binaryFile build/optimized.wasm --optimize

# 生成文本格式
npx asc assembly/index.ts --textFile build/optimized.wat

# 调试版本
npx asc assembly/index.ts --binaryFile build/debug.wasm --debug

# 启用运行时检查
npx asc assembly/index.ts --binaryFile build/untouched.wasm --runtime stub

B.4 优化工具

B.4.1 Binaryen 工具套件

安装 Binaryen：

# Ubuntu/Debian
sudo apt-get install binaryen

# macOS
brew install binaryen

# 从源码编译
git clone https://github.com/WebAssembly/binaryen.git
cd binaryen
cmake . && make

# 验证安装
wasm-opt --version

wasm-opt 优化：

# 基本优化
wasm-opt input.wasm -O -o output.wasm

# 尺寸优化
wasm-opt input.wasm -Oz -o output.wasm

# 速度优化
wasm-opt input.wasm -O3 -o output.wasm

# 查看优化后的差异
wasm-opt input.wasm -O --print

# 详细优化选项
wasm-opt input.wasm \
  --duplicate-function-elimination \
  --remove-unused-functions \
  --remove-unused-module-elements \
  --vacuum \
  -o output.wasm

其他 Binaryen 工具：

# 验证 WASM 文件
wasm-validate input.wasm

# 生成调用图
wasm-metadce input.wasm --graph-file callgraph.dot

# 测量模块大小
wasm-reduce input.wasm --output reduced.wasm

# 二进制到文本转换
wasm-dis input.wasm -o output.wat

# 文本到二进制转换
wasm-as input.wat -o output.wasm

B.4.2 Twiggy 代码分析

安装和使用 Twiggy：

# 安装
cargo install twiggy

# 分析 WASM 文件大小
twiggy top my-app.wasm

# 生成详细报告
twiggy top my-app.wasm --max-items 20

# 分析函数调用
twiggy dominators my-app.wasm

# 生成可视化报告
twiggy top my-app.wasm --format json > report.json

Twiggy 输出示例：

Shallow Bytes │ Shallow % │ Item
──────────────┼───────────┼────────────────────────────
          9949 ┊    19.65% ┊ data[0]
          3251 ┊     6.42% ┊ "function names" subsection
          1249 ┊     2.47% ┊ add
          1200 ┊     2.37% ┊ multiply
          1130 ┊     2.23% ┊ subtract
           970 ┊     1.92% ┊ divide

B.5 调试工具

B.5.1 浏览器调试

Chrome DevTools WASM 调试：

// 启用 WASM 调试
// 在 Chrome 中打开：chrome://flags/
// 启用：WebAssembly Debugging

// 加载 WASM 模块
WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(result => {
    // 设置断点和调试
    console.log(result);
  });

Source Maps 配置：

# Emscripten 生成 source map
emcc source.c -o output.js -g4 --source-map-base http://localhost:8000/

# Rust 生成调试信息
wasm-pack build --dev

# 在浏览器中查看源码
# DevTools -> Sources -> 查看原始 C/Rust 代码

B.5.2 命令行调试

使用 wasmtime 调试：

# 运行 WASM 模块
wasmtime run module.wasm

# 启用调试器
wasmtime run --gdb-port 1234 module.wasm

# 连接 GDB
gdb
(gdb) target remote localhost:1234
(gdb) break main
(gdb) continue

使用 LLDB 调试：

# 使用 LLDB 调试 WASM
lldb
(lldb) target create module.wasm
(lldb) breakpoint set --name main
(lldb) run

B.5.3 日志和性能分析

性能分析工具：

# 使用 wasmtime 性能分析
wasmtime run --profile module.wasm

# 生成火焰图
wasmtime run --profile=jitdump module.wasm
perf record -g ./script
perf script | stackcollapse-perf.pl | flamegraph.pl > profile.svg

内存分析：

// 监控 WASM 内存使用
const memory = new WebAssembly.Memory({ initial: 1 });
console.log('Memory pages:', memory.buffer.byteLength / 65536);

// 检查内存增长
setInterval(() => {
  console.log('Current memory:', memory.buffer.byteLength);
}, 1000);

B.6 构建系统集成

B.6.1 Webpack 集成

安装 Webpack 插件：

npm install --save-dev @wasm-tool/wasm-pack-plugin
npm install --save-dev html-webpack-plugin

webpack.config.js 配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin');

module.exports = {
  entry: './js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new WasmPackPlugin({
      crateDirectory: path.resolve(__dirname, '.')
    }),
  ],
  experiments: {
    asyncWebAssembly: true,
  },
};

B.6.2 Rollup 集成

安装 Rollup 插件：

npm install --save-dev rollup
npm install --save-dev @rollup/plugin-wasm
npm install --save-dev rollup-plugin-rust

rollup.config.js 配置：

import wasm from '@rollup/plugin-wasm';
import rust from 'rollup-plugin-rust';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  plugins: [
    rust({
      serverPath: '/pkg/',
    }),
    wasm({
      sync: ['**/my-module.wasm']
    })
  ]
};

B.6.3 Vite 集成

vite.config.js 配置：

import { defineConfig } from 'vite';
import wasmPack from 'vite-plugin-wasm-pack';

export default defineConfig({
  plugins: [
    wasmPack('./my-wasm-project')
  ],
  server: {
    fs: {
      allow: ['..']
    }
  }
});

B.6.4 CMake 集成

CMakeLists.txt 配置：

cmake_minimum_required(VERSION 3.16)
project(MyWasmProject)

# 设置 Emscripten 工具链
set(CMAKE_TOOLCHAIN_FILE ${EMSCRIPTEN}/cmake/Modules/Platform/Emscripten.cmake)

# 添加可执行文件
add_executable(myapp main.c utils.c)

# 设置编译选项
set_target_properties(myapp PROPERTIES
    COMPILE_FLAGS "-O2"
    LINK_FLAGS "-O2 -s EXPORTED_FUNCTIONS='[\"_main\"]' -s EXPORTED_RUNTIME_METHODS='[\"ccall\"]'"
)

构建脚本：

#!/bin/bash
mkdir -p build
cd build
emcmake cmake ..
emmake make

B.7 IDE 和编辑器配置

B.7.1 Visual Studio Code

安装扩展：

# 通过命令行安装扩展
code --install-extension ms-vscode.wasm
code --install-extension rust-lang.rust-analyzer
code --install-extension ms-vscode.cpptools

settings.json 配置：

{
  "rust-analyzer.cargo.target": "wasm32-unknown-unknown",
  "rust-analyzer.checkOnSave.allTargets": false,
  "files.associations": {
    "*.wat": "wasm",
    "*.wast": "wasm"
  },
  "emmet.includeLanguages": {
    "wat": "html"
  }
}

tasks.json 配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "wasm-pack build",
      "type": "shell",
      "command": "wasm-pack",
      "args": ["build", "--target", "web"],
      "group": "build",
      "problemMatcher": []
    },
    {
      "label": "emcc compile",
      "type": "shell",
      "command": "emcc",
      "args": ["${file}", "-o", "${fileDirname}/${fileBasenameNoExtension}.html"],
      "group": "build"
    }
  ]
}

launch.json 配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch WASM in Browser",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

B.7.2 WebStorm/CLion

配置 Emscripten：

File -> Settings -> Build, Execution, Deployment -> CMake
- Add new profile: "Emscripten"
- CMake options: -DCMAKE_TOOLCHAIN_FILE=/path/to/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake

文件类型关联：

File -> Settings -> Editor -> File Types
- Add pattern "*.wat" to "WebAssembly Text"
- Add pattern "*.wasm" to "Binary files"

B.7.3 Vim/Neovim

安装插件：

" 使用 vim-plug
Plug 'rhysd/vim-wasm'
Plug 'rust-lang/rust.vim'
Plug 'neoclide/coc.nvim'

" WebAssembly 语法高亮
autocmd BufNewFile,BufRead *.wat set filetype=wasm
autocmd BufNewFile,BufRead *.wast set filetype=wasm

B.8 测试框架

B.8.1 Web 端测试

使用 Jest 测试：

# 安装测试依赖
npm install --save-dev jest
npm install --save-dev jest-environment-node

jest.config.js：

module.exports = {
  testEnvironment: 'node',
  transform: {},
  testMatch: ['**/*.test.js'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
};

测试示例：

// math.test.js
import init, { add, multiply } from '../pkg/my_wasm_project.js';

beforeAll(async () => {
  await init();
});

test('addition works', () => {
  expect(add(2, 3)).toBe(5);
});

test('multiplication works', () => {
  expect(multiply(4, 5)).toBe(20);
});

B.8.2 Rust 单元测试

配置 wasm-bindgen-test：

[dev-dependencies]
wasm-bindgen-test = "0.3"

测试代码：

#![allow(unused)]
fn main() {
// lib.rs
#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::*;

    wasm_bindgen_test_configure!(run_in_browser);

    #[wasm_bindgen_test]
    fn test_add() {
        assert_eq!(add(2, 3), 5);
    }
}
}

运行测试：

# 在 Node.js 中运行
wasm-pack test --node

# 在浏览器中运行
wasm-pack test --chrome --headless

# 在 Firefox 中运行
wasm-pack test --firefox --headless

B.8.3 C/C++ 测试

使用 Emscripten 测试：

// test.c
#include <assert.h>
#include <emscripten.h>

int add(int a, int b) {
    return a + b;
}

int main() {
    assert(add(2, 3) == 5);
    assert(add(-1, 1) == 0);
    emscripten_force_exit(0);
    return 0;
}

编译和运行测试：

# 编译测试
emcc test.c -o test.js -s ASSERTIONS=1

# 运行测试
node test.js

B.9 性能工具

B.9.1 基准测试

使用 Criterion.rs：

[dev-dependencies]
criterion = { version = "0.4", features = ["html_reports"] }

基准测试代码：

// benches/my_benchmark.rs
use criterion::{black_box, criterion_group, criterion_main, Criterion};
use my_wasm_project::add;

fn criterion_benchmark(c: &mut Criterion) {
    c.bench_function("add", |b| b.iter(|| add(black_box(20), black_box(20))));
}

criterion_group!(benches, criterion_benchmark);
criterion_main!(benches);

运行基准测试：

cargo bench

B.9.2 内存分析

使用 wee_alloc：

[dependencies]
wee_alloc = "0.4.5"

// lib.rs
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

监控内存使用：

// 监控 WebAssembly 内存
function monitorWasmMemory(wasmMemory) {
    const initialSize = wasmMemory.buffer.byteLength;
    console.log(`Initial WASM memory: ${initialSize} bytes`);
    
    setInterval(() => {
        const currentSize = wasmMemory.buffer.byteLength;
        console.log(`Current WASM memory: ${currentSize} bytes`);
    }, 1000);
}

B.9.3 性能分析

Chrome DevTools Profiling：

// 性能测试包装器
function benchmark(fn, iterations = 1000) {
    const start = performance.now();
    for (let i = 0; i < iterations; i++) {
        fn();
    }
    const end = performance.now();
    return end - start;
}

// 使用示例
const wasmTime = benchmark(() => wasmAdd(1000, 2000));
const jsTime = benchmark(() => jsAdd(1000, 2000));
console.log(`WASM: ${wasmTime}ms, JS: ${jsTime}ms`);

B.10 部署工具

B.10.1 Web 优化

压缩和优化：

# 使用 gzip 压缩
gzip -k -9 output.wasm

# 使用 Brotli 压缩
brotli -q 11 output.wasm

# wasm-opt 优化
wasm-opt input.wasm -Oz --enable-bulk-memory -o output.wasm

服务器配置：

# Nginx 配置
location ~* \.wasm$ {
    add_header Content-Type application/wasm;
    add_header Cross-Origin-Embedder-Policy require-corp;
    add_header Cross-Origin-Opener-Policy same-origin;
    gzip_static on;
    expires 1y;
}

B.10.2 CDN 部署

上传到 CDN：

# AWS S3
aws s3 cp dist/ s3://my-bucket/wasm-app/ --recursive \
  --content-type "application/wasm" \
  --content-encoding gzip

# Google Cloud Storage
gsutil -m cp -r dist/ gs://my-bucket/wasm-app/
gsutil -m setmeta -h "Content-Type:application/wasm" gs://my-bucket/wasm-app/*.wasm

设置 CORS：

{
  "cors": [
    {
      "origin": ["*"],
      "method": ["GET"],
      "responseHeader": ["Content-Type", "Cross-Origin-Embedder-Policy"],
      "maxAgeSeconds": 3600
    }
  ]
}

B.11 故障排除

B.11.1 常见问题

编译错误：

# 问题：wat2wasm 命令未找到
# 解决：检查 WABT 是否正确安装
which wat2wasm
export PATH=$PATH:/usr/local/bin

# 问题：emcc 命令未找到
# 解决：激活 Emscripten 环境
source /path/to/emsdk/emsdk_env.sh

# 问题：Rust 目标未安装
# 解决：添加 WebAssembly 目标
rustup target add wasm32-unknown-unknown

运行时错误：

// 问题：CORS 错误
// 解决：设置正确的 HTTP 头
fetch('module.wasm', {
    headers: {
        'Cross-Origin-Embedder-Policy': 'require-corp'
    }
});

// 问题：内存不足
// 解决：增加初始内存大小
const memory = new WebAssembly.Memory({ 
    initial: 256,  // 16MB
    maximum: 1024  // 64MB
});

B.11.2 性能问题

优化建议：

# 启用所有优化
wasm-opt input.wasm -O4 --enable-bulk-memory --enable-simd -o output.wasm

# 移除调试信息
wasm-strip input.wasm

# 分析代码大小
twiggy top input.wasm --max-items 50

内存优化：

// 使用 wee_alloc 减少内存占用
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

// 避免不必要的分配
#[wasm_bindgen]
pub fn process_slice(data: &[u8]) -> u32 {
    // 直接处理，避免复制
    data.iter().map(|&x| x as u32).sum()
}

B.11.3 调试技巧

启用详细日志：

# Emscripten 详细输出
emcc -v source.c -o output.js

# wasm-pack 详细输出
wasm-pack build --log-level info

# 环境变量调试
RUST_LOG=debug wasm-pack build

使用断言和检查：

// Rust 中的断言
debug_assert!(value > 0, "Value must be positive");

// wasm-bindgen 类型检查
#[wasm_bindgen]
pub fn safe_divide(a: f64, b: f64) -> Result<f64, JsValue> {
    if b == 0.0 {
        Err(JsValue::from_str("Division by zero"))
    } else {
        Ok(a / b)
    }
}

B.12 工具链更新和维护

B.12.1 版本管理

跟踪工具版本：

# 创建版本记录脚本
cat > check_versions.sh << 'EOF'
#!/bin/bash
echo "=== WebAssembly Toolchain Versions ==="
echo "WABT: $(wat2wasm --version 2>&1 | head -1)"
echo "Emscripten: $(emcc --version 2>&1 | head -1)"
echo "wasm-pack: $(wasm-pack --version)"
echo "Rust: $(rustc --version)"
echo "Node.js: $(node --version)"
echo "Wasmtime: $(wasmtime --version)"
EOF

chmod +x check_versions.sh

更新脚本：

# 更新 Emscripten
cd /path/to/emsdk
./emsdk update
./emsdk install latest
./emsdk activate latest

# 更新 Rust 工具链
rustup update
cargo install --force wasm-pack

# 更新 WABT
# Ubuntu/Debian
sudo apt-get update && sudo apt-get upgrade wabt

# macOS
brew upgrade wabt

B.12.2 环境一致性

Docker 化开发环境：

# Dockerfile
FROM ubuntu:22.04

# 安装基础工具
RUN apt-get update && apt-get install -y \
    curl git build-essential cmake python3 nodejs npm \
    && rm -rf /var/lib/apt/lists/*

# 安装 Rust
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
ENV PATH="/root/.cargo/bin:${PATH}"
RUN rustup target add wasm32-unknown-unknown

# 安装 Emscripten
RUN git clone https://github.com/emscripten-core/emsdk.git /opt/emsdk
WORKDIR /opt/emsdk
RUN ./emsdk install latest && ./emsdk activate latest
ENV PATH="/opt/emsdk:${PATH}"

# 安装 wasm-pack
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 工作目录
WORKDIR /workspace

使用 Nix 管理环境：

# shell.nix
{ pkgs ? import <nixpkgs> {} }:

pkgs.mkShell {
  buildInputs = with pkgs; [
    # WebAssembly tools
    wabt
    binaryen
    emscripten
    wasmtime
    
    # Rust toolchain
    rustc
    cargo
    
    # Node.js environment
    nodejs
    nodePackages.npm
    
    # Development tools
    cmake
    pkg-config
  ];
  
  shellHook = ''
    echo "WebAssembly development environment ready!"
    echo "Available tools:"
    echo "  - wat2wasm, wasm2wat (WABT)"
    echo "  - emcc, em++ (Emscripten)"
    echo "  - wasmtime (Runtime)"
    echo "  - wasm-opt (Binaryen)"
  '';
}

通过遵循本附录的指南，你将能够构建一个完整、高效的 WebAssembly 开发环境。无论是简单的学习项目还是复杂的生产应用，这些工具都将为你的 WebAssembly 开发之路提供强有力的支持。

附录C 性能基准测试

本附录提供全面的 WebAssembly 性能基准测试指南，涵盖测试方法论、基准测试套件、性能分析工具和优化策略。通过系统性的性能测试，你可以准确评估和优化 WebAssembly 应用的性能表现。

C.1 基准测试方法论

C.1.1 基准测试原则

建立科学的基准测试需要遵循以下核心原则：

可重复性原则:

// 基准测试环境标准化
class BenchmarkEnvironment {
    constructor() {
        this.iterations = 1000;
        this.warmupRounds = 100;
        this.measurementRounds = 1000;
        this.gcBetweenTests = true;
    }
    
    // 环境信息收集
    getEnvironmentInfo() {
        return {
            userAgent: navigator.userAgent,
            platform: navigator.platform,
            hardwareConcurrency: navigator.hardwareConcurrency,
            memory: performance.memory ? {
                usedJSHeapSize: performance.memory.usedJSHeapSize,
                totalJSHeapSize: performance.memory.totalJSHeapSize,
                jsHeapSizeLimit: performance.memory.jsHeapSizeLimit
            } : null,
            timestamp: Date.now()
        };
    }
    
    // 预热阶段
    async warmup(testFunction) {
        console.log('开始预热阶段...');
        for (let i = 0; i < this.warmupRounds; i++) {
            await testFunction();
            if (this.gcBetweenTests && global.gc) {
                global.gc(); // 触发垃圾回收
            }
        }
        console.log('预热完成');
    }
}

统计显著性原则:

// 统计分析工具
class StatisticsAnalyzer {
    static calculateStats(measurements) {
        const sorted = measurements.sort((a, b) => a - b);
        const n = sorted.length;
        
        return {
            count: n,
            min: sorted[0],
            max: sorted[n - 1],
            mean: sorted.reduce((a, b) => a + b) / n,
            median: n % 2 === 0 ? 
                (sorted[n/2 - 1] + sorted[n/2]) / 2 : 
                sorted[Math.floor(n/2)],
            percentile95: sorted[Math.floor(n * 0.95)],
            percentile99: sorted[Math.floor(n * 0.99)],
            standardDeviation: this.calculateStdDev(sorted),
            coefficientOfVariation: null // 后续计算
        };
    }
    
    static calculateStdDev(values) {
        const mean = values.reduce((a, b) => a + b) / values.length;
        const squaredDiffs = values.map(value => Math.pow(value - mean, 2));
        const avgSquaredDiff = squaredDiffs.reduce((a, b) => a + b) / values.length;
        return Math.sqrt(avgSquaredDiff);
    }
    
    // 异常值检测
    static detectOutliers(values) {
        const stats = this.calculateStats(values);
        const threshold = stats.standardDeviation * 2; // 2σ 原则
        
        return values.filter(value => 
            Math.abs(value - stats.mean) > threshold
        );
    }
}

C.1.2 基准测试框架

高精度计时框架:

// 高精度基准测试框架
class PrecisionBenchmark {
    constructor(name, options = {}) {
        this.name = name;
        this.options = {
            iterations: options.iterations || 1000,
            warmupIterations: options.warmupIterations || 100,
            minTime: options.minTime || 1000, // 最小测试时间 (ms)
            maxTime: options.maxTime || 10000, // 最大测试时间 (ms)
            ...options
        };
        this.results = [];
    }
    
    // 执行基准测试
    async run(testFunction) {
        console.log(`开始基准测试: ${this.name}`);
        
        // 预热
        await this.warmup(testFunction);
        
        // 正式测试
        const measurements = await this.measure(testFunction);
        
        // 分析结果
        const stats = StatisticsAnalyzer.calculateStats(measurements);
        const outliers = StatisticsAnalyzer.detectOutliers(measurements);
        
        return {
            name: this.name,
            measurements,
            statistics: stats,
            outliers,
            environment: new BenchmarkEnvironment().getEnvironmentInfo()
        };
    }
    
    async measure(testFunction) {
        const measurements = [];
        const startTime = performance.now();
        let iterations = 0;
        
        while (performance.now() - startTime < this.options.maxTime && 
               iterations < this.options.iterations) {
            
            // 单次测量
            const start = performance.now();
            await testFunction();
            const end = performance.now();
            
            measurements.push(end - start);
            iterations++;
            
            // 周期性垃圾回收
            if (iterations % 100 === 0 && global.gc) {
                global.gc();
            }
        }
        
        return measurements;
    }
    
    async warmup(testFunction) {
        for (let i = 0; i < this.options.warmupIterations; i++) {
            await testFunction();
        }
    }
}

C.2 基准测试套件

C.2.1 微基准测试

算术运算基准测试:

;; 整数运算基准测试 WAT 代码
(module
  ;; 32位整数加法测试
  (func $i32_add_benchmark (param $iterations i32) (result i32)
    (local $i i32)
    (local $result i32)
    (local.set $result (i32.const 0))
    (local.set $i (i32.const 0))
    
    (loop $loop
      ;; 执行加法运算
      (local.set $result 
        (i32.add 
          (local.get $result)
          (i32.add (local.get $i) (i32.const 1))))
      
      ;; 递增计数器
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      
      ;; 检查循环条件
      (br_if $loop (i32.lt_u (local.get $i) (local.get $iterations)))
    )
    
    (local.get $result)
  )
  
  ;; 64位整数乘法测试
  (func $i64_mul_benchmark (param $iterations i32) (result i64)
    (local $i i32)
    (local $result i64)
    (local.set $result (i64.const 1))
    (local.set $i (i32.const 0))
    
    (loop $loop
      (local.set $result 
        (i64.mul 
          (local.get $result)
          (i64.extend_i32_u (local.get $i))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br_if $loop (i32.lt_u (local.get $i) (local.get $iterations)))
    )
    
    (local.get $result)
  )
  
  ;; 浮点数运算测试
  (func $f64_math_benchmark (param $iterations i32) (result f64)
    (local $i i32)
    (local $x f64)
    (local $result f64)
    (local.set $result (f64.const 0.0))
    (local.set $i (i32.const 0))
    
    (loop $loop
      (local.set $x (f64.convert_i32_s (local.get $i)))
      (local.set $result 
        (f64.add 
          (local.get $result)
          (f64.mul 
            (f64.sqrt (local.get $x))
            (f64.sin (local.get $x)))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br_if $loop (i32.lt_u (local.get $i) (local.get $iterations)))
    )
    
    (local.get $result)
  )
  
  (export "i32_add_benchmark" (func $i32_add_benchmark))
  (export "i64_mul_benchmark" (func $i64_mul_benchmark))
  (export "f64_math_benchmark" (func $f64_math_benchmark))
)

JavaScript 对比测试:

// JavaScript 版本的相同算法
class ArithmeticBenchmarks {
    static i32AddBenchmark(iterations) {
        let result = 0;
        for (let i = 0; i < iterations; i++) {
            result += i + 1;
        }
        return result;
    }
    
    static i64MulBenchmark(iterations) {
        let result = 1n; // BigInt
        for (let i = 0; i < iterations; i++) {
            result *= BigInt(i);
        }
        return result;
    }
    
    static f64MathBenchmark(iterations) {
        let result = 0.0;
        for (let i = 0; i < iterations; i++) {
            const x = i;
            result += Math.sqrt(x) * Math.sin(x);
        }
        return result;
    }
}

// 基准测试执行器
class ArithmeticBenchmarkRunner {
    constructor() {
        this.wasmModule = null;
    }
    
    async loadWasm() {
        // 假设已编译好的 WASM 文件
        const wasmBytes = await fetch('./arithmetic-benchmarks.wasm')
            .then(response => response.arrayBuffer());
        const wasmModule = await WebAssembly.instantiate(wasmBytes);
        this.wasmModule = wasmModule.instance.exports;
    }
    
    async runComparison() {
        const iterations = 1000000;
        const benchmark = new PrecisionBenchmark('Arithmetic Comparison');
        
        // WASM 测试
        const wasmResults = await benchmark.run(async () => {
            this.wasmModule.i32_add_benchmark(iterations);
            this.wasmModule.i64_mul_benchmark(iterations);
            this.wasmModule.f64_math_benchmark(iterations);
        });
        
        // JavaScript 测试
        const jsResults = await benchmark.run(async () => {
            ArithmeticBenchmarks.i32AddBenchmark(iterations);
            ArithmeticBenchmarks.i64MulBenchmark(iterations);
            ArithmeticBenchmarks.f64MathBenchmark(iterations);
        });
        
        return {
            wasm: wasmResults,
            javascript: jsResults,
            speedup: jsResults.statistics.mean / wasmResults.statistics.mean
        };
    }
}

C.2.2 内存操作基准测试

内存访问模式测试:

;; 内存访问基准测试
(module
  (memory $mem 10) ;; 10 页内存 (640KB)
  
  ;; 顺序访问测试
  (func $sequential_access (param $size i32) (result i32)
    (local $i i32)
    (local $sum i32)
    (local.set $sum (i32.const 0))
    (local.set $i (i32.const 0))
    
    (loop $loop
      ;; 读取并累加
      (local.set $sum 
        (i32.add 
          (local.get $sum)
          (i32.load (local.get $i))))
      
      ;; 移动到下个 4 字节对齐位置
      (local.set $i (i32.add (local.get $i) (i32.const 4)))
      (br_if $loop (i32.lt_u (local.get $i) (local.get $size)))
    )
    
    (local.get $sum)
  )
  
  ;; 随机访问测试
  (func $random_access (param $size i32) (param $iterations i32) (result i32)
    (local $i i32)
    (local $addr i32)
    (local $sum i32)
    (local.set $sum (i32.const 0))
    (local.set $i (i32.const 0))
    
    (loop $loop
      ;; 生成伪随机地址 (简单的线性同余生成器)
      (local.set $addr 
        (i32.and 
          (i32.mul (local.get $i) (i32.const 1664525))
          (i32.sub (local.get $size) (i32.const 4))))
      
      ;; 确保 4 字节对齐
      (local.set $addr 
        (i32.and (local.get $addr) (i32.const 0xfffffffc)))
      
      ;; 读取并累加
      (local.set $sum 
        (i32.add 
          (local.get $sum)
          (i32.load (local.get $addr))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br_if $loop (i32.lt_u (local.get $i) (local.get $iterations)))
    )
    
    (local.get $sum)
  )
  
  ;; 内存复制测试
  (func $memory_copy (param $src i32) (param $dst i32) (param $size i32)
    (local $i i32)
    (local.set $i (i32.const 0))
    
    (loop $loop
      ;; 复制一个字节
      (i32.store8 
        (i32.add (local.get $dst) (local.get $i))
        (i32.load8_u (i32.add (local.get $src) (local.get $i))))
      
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br_if $loop (i32.lt_u (local.get $i) (local.get $size)))
    )
  )
  
  ;; 内存初始化
  (func $init_memory (param $pattern i32)
    (local $addr i32)
    (local.set $addr (i32.const 0))
    
    (loop $loop
      (i32.store (local.get $addr) (local.get $pattern))
      (local.set $addr (i32.add (local.get $addr) (i32.const 4)))
      (br_if $loop (i32.lt_u (local.get $addr) (i32.const 65536))) ;; 64KB
    )
  )
  
  (export "memory" (memory $mem))
  (export "sequential_access" (func $sequential_access))
  (export "random_access" (func $random_access))
  (export "memory_copy" (func $memory_copy))
  (export "init_memory" (func $init_memory))
)

内存基准测试套件:

class MemoryBenchmarkSuite {
    constructor() {
        this.wasmModule = null;
        this.testDataSize = 64 * 1024; // 64KB
    }
    
    async initialize() {
        // 加载 WASM 模块
        const wasmBytes = await fetch('./memory-benchmarks.wasm')
            .then(response => response.arrayBuffer());
        const wasmModule = await WebAssembly.instantiate(wasmBytes);
        this.wasmModule = wasmModule.instance.exports;
        
        // 初始化测试数据
        this.wasmModule.init_memory(0x12345678);
    }
    
    // 缓存友好的顺序访问测试
    async testSequentialAccess() {
        const benchmark = new PrecisionBenchmark('Sequential Memory Access');
        
        return await benchmark.run(() => {
            this.wasmModule.sequential_access(this.testDataSize);
        });
    }
    
    // 缓存不友好的随机访问测试
    async testRandomAccess() {
        const benchmark = new PrecisionBenchmark('Random Memory Access');
        
        return await benchmark.run(() => {
            this.wasmModule.random_access(this.testDataSize, 1000);
        });
    }
    
    // 内存带宽测试
    async testMemoryBandwidth() {
        const benchmark = new PrecisionBenchmark('Memory Bandwidth');
        const srcOffset = 0;
        const dstOffset = this.testDataSize / 2;
        const copySize = this.testDataSize / 4;
        
        return await benchmark.run(() => {
            this.wasmModule.memory_copy(srcOffset, dstOffset, copySize);
        });
    }
    
    // 与 JavaScript 的对比测试
    async runJavaScriptComparison() {
        // 获取 WASM 内存视图
        const memory = new Uint32Array(this.wasmModule.memory.buffer);
        
        // JavaScript 顺序访问
        const jsSequential = new PrecisionBenchmark('JS Sequential Access');
        const jsSeqResults = await jsSequential.run(() => {
            let sum = 0;
            for (let i = 0; i < this.testDataSize / 4; i++) {
                sum += memory[i];
            }
            return sum;
        });
        
        // JavaScript 随机访问
        const jsRandom = new PrecisionBenchmark('JS Random Access');
        const jsRandomResults = await jsRandom.run(() => {
            let sum = 0;
            for (let i = 0; i < 1000; i++) {
                const addr = (i * 1664525) % (this.testDataSize / 4);
                sum += memory[addr];
            }
            return sum;
        });
        
        return {
            jsSequential: jsSeqResults,
            jsRandom: jsRandomResults
        };
    }
    
    // 生成性能报告
    async generateReport() {
        const wasmSeq = await this.testSequentialAccess();
        const wasmRand = await this.testRandomAccess();
        const wasmBandwidth = await this.testMemoryBandwidth();
        const jsResults = await this.runJavaScriptComparison();
        
        return {
            wasm: {
                sequential: wasmSeq,
                random: wasmRand,
                bandwidth: wasmBandwidth
            },
            javascript: jsResults,
            performance: {
                sequentialSpeedup: jsResults.jsSequential.statistics.mean / wasmSeq.statistics.mean,
                randomSpeedup: jsResults.jsRandom.statistics.mean / wasmRand.statistics.mean
            }
        };
    }
}

C.3 计算密集型基准测试

C.3.1 数学运算基准测试

矩阵运算基准测试:

;; 矩阵乘法基准测试
(module
  (memory $mem 1) ;; 1 页内存 (64KB)
  
  ;; 矩阵乘法 C = A * B (NxN 矩阵)
  (func $matrix_multiply (param $n i32) (param $a_offset i32) (param $b_offset i32) (param $c_offset i32)
    (local $i i32) (local $j i32) (local $k i32)
    (local $sum f64) (local $a_val f64) (local $b_val f64)
    (local $a_idx i32) (local $b_idx i32) (local $c_idx i32)
    
    ;; 外层循环 i
    (local.set $i (i32.const 0))
    (loop $i_loop
      ;; 中层循环 j
      (local.set $j (i32.const 0))
      (loop $j_loop
        ;; 初始化累加器
        (local.set $sum (f64.const 0.0))
        
        ;; 内层循环 k (实际的乘法累加)
        (local.set $k (i32.const 0))
        (loop $k_loop
          ;; 计算 A[i][k] 的地址和值
          (local.set $a_idx 
            (i32.add 
              (local.get $a_offset)
              (i32.mul 
                (i32.add 
                  (i32.mul (local.get $i) (local.get $n))
                  (local.get $k))
                (i32.const 8)))) ;; f64 = 8 字节
          (local.set $a_val (f64.load (local.get $a_idx)))
          
          ;; 计算 B[k][j] 的地址和值
          (local.set $b_idx 
            (i32.add 
              (local.get $b_offset)
              (i32.mul 
                (i32.add 
                  (i32.mul (local.get $k) (local.get $n))
                  (local.get $j))
                (i32.const 8))))
          (local.set $b_val (f64.load (local.get $b_idx)))
          
          ;; 累加 A[i][k] * B[k][j]
          (local.set $sum 
            (f64.add 
              (local.get $sum)
              (f64.mul (local.get $a_val) (local.get $b_val))))
          
          ;; k++
          (local.set $k (i32.add (local.get $k) (i32.const 1)))
          (br_if $k_loop (i32.lt_u (local.get $k) (local.get $n)))
        ) ;; end k_loop
        
        ;; 存储 C[i][j] = sum
        (local.set $c_idx 
          (i32.add 
            (local.get $c_offset)
            (i32.mul 
              (i32.add 
                (i32.mul (local.get $i) (local.get $n))
                (local.get $j))
              (i32.const 8))))
        (f64.store (local.get $c_idx) (local.get $sum))
        
        ;; j++
        (local.set $j (i32.add (local.get $j) (i32.const 1)))
        (br_if $j_loop (i32.lt_u (local.get $j) (local.get $n)))
      ) ;; end j_loop
      
      ;; i++
      (local.set $i (i32.add (local.get $i) (i32.const 1)))
      (br_if $i_loop (i32.lt_u (local.get $i) (local.get $n)))
    ) ;; end i_loop
  )
  
  ;; 快速傅里叶变换 (简化版)
  (func $fft_radix2 (param $n i32) (param $real_offset i32) (param $imag_offset i32)
    (local $levels i32) (local $level i32)
    (local $step i32) (local $group_size i32) (local $group i32) (local $pair i32)
    (local $angle f64) (local $cos_val f64) (local $sin_val f64)
    (local $real1 f64) (local $imag1 f64) (local $real2 f64) (local $imag2 f64)
    (local $temp_real f64) (local $temp_imag f64)
    (local $idx1 i32) (local $idx2 i32)
    
    ;; 计算级数 (log2(n))
    (local.set $levels (i32.const 0))
    (local.set $step (local.get $n))
    (loop $count_levels
      (local.set $step (i32.shr_u (local.get $step) (i32.const 1)))
      (local.set $levels (i32.add (local.get $levels) (i32.const 1)))
      (br_if $count_levels (i32.gt_u (local.get $step) (i32.const 1)))
    )
    
    ;; 主 FFT 循环
    (local.set $level (i32.const 0))
    (local.set $group_size (i32.const 2))
    (loop $level_loop
      (local.set $group (i32.const 0))
      (loop $group_loop
        (local.set $pair (i32.const 0))
        (loop $pair_loop
          ;; 计算旋转因子
          (local.set $angle 
            (f64.mul 
              (f64.const -6.283185307179586) ;; -2π
              (f64.div 
                (f64.convert_i32_u (local.get $pair))
                (f64.convert_i32_u (local.get $group_size)))))
          (local.set $cos_val (f64.call_indirect (local.get $angle))) ;; 需要cos函数
          (local.set $sin_val (f64.call_indirect (local.get $angle))) ;; 需要sin函数
          
          ;; 计算数据索引
          (local.set $idx1 
            (i32.add (local.get $group) (local.get $pair)))
          (local.set $idx2 
            (i32.add (local.get $idx1) (i32.shr_u (local.get $group_size) (i32.const 1))))
          
          ;; 读取数据
          (local.set $real1 (f64.load (i32.add (local.get $real_offset) (i32.mul (local.get $idx1) (i32.const 8)))))
          (local.set $imag1 (f64.load (i32.add (local.get $imag_offset) (i32.mul (local.get $idx1) (i32.const 8)))))
          (local.set $real2 (f64.load (i32.add (local.get $real_offset) (i32.mul (local.get $idx2) (i32.const 8)))))
          (local.set $imag2 (f64.load (i32.add (local.get $imag_offset) (i32.mul (local.get $idx2) (i32.const 8)))))
          
          ;; 蝶形运算
          (local.set $temp_real 
            (f64.sub 
              (f64.mul (local.get $real2) (local.get $cos_val))
              (f64.mul (local.get $imag2) (local.get $sin_val))))
          (local.set $temp_imag 
            (f64.add 
              (f64.mul (local.get $real2) (local.get $sin_val))
              (f64.mul (local.get $imag2) (local.get $cos_val))))
          
          ;; 更新数据
          (f64.store 
            (i32.add (local.get $real_offset) (i32.mul (local.get $idx2) (i32.const 8)))
            (f64.sub (local.get $real1) (local.get $temp_real)))
          (f64.store 
            (i32.add (local.get $imag_offset) (i32.mul (local.get $idx2) (i32.const 8)))
            (f64.sub (local.get $imag1) (local.get $temp_imag)))
          (f64.store 
            (i32.add (local.get $real_offset) (i32.mul (local.get $idx1) (i32.const 8)))
            (f64.add (local.get $real1) (local.get $temp_real)))
          (f64.store 
            (i32.add (local.get $imag_offset) (i32.mul (local.get $idx1) (i32.const 8)))
            (f64.add (local.get $imag1) (local.get $temp_imag)))
          
          ;; pair++
          (local.set $pair (i32.add (local.get $pair) (i32.const 1)))
          (br_if $pair_loop (i32.lt_u (local.get $pair) (i32.shr_u (local.get $group_size) (i32.const 1))))
        ) ;; end pair_loop
        
        ;; group += group_size
        (local.set $group (i32.add (local.get $group) (local.get $group_size)))
        (br_if $group_loop (i32.lt_u (local.get $group) (local.get $n)))
      ) ;; end group_loop
      
      ;; group_size *= 2, level++
      (local.set $group_size (i32.shl (local.get $group_size) (i32.const 1)))
      (local.set $level (i32.add (local.get $level) (i32.const 1)))
      (br_if $level_loop (i32.lt_u (local.get $level) (local.get $levels)))
    ) ;; end level_loop
  )
  
  (export "memory" (memory $mem))
  (export "matrix_multiply" (func $matrix_multiply))
  (export "fft_radix2" (func $fft_radix2))
)

C.3.2 图像处理基准测试

图像滤波器实现:

// 图像处理基准测试套件
class ImageProcessingBenchmarks {
    constructor() {
        this.wasmModule = null;
        this.testImage = null;
        this.canvas = null;
        this.context = null;
    }
    
    async initialize() {
        // 创建测试图像
        this.createTestImage(512, 512);
        
        // 加载 WASM 模块 (假设包含图像处理函数)
        await this.loadWasmModule();
    }
    
    createTestImage(width, height) {
        // 创建 Canvas 和测试图像
        this.canvas = document.createElement('canvas');
        this.canvas.width = width;
        this.canvas.height = height;
        this.context = this.canvas.getContext('2d');
        
        // 生成测试图案
        const imageData = this.context.createImageData(width, height);
        const data = imageData.data;
        
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                const index = (y * width + x) * 4;
                // 创建渐变和噪声图案
                const gradient = (x + y) / (width + height) * 255;
                const noise = Math.random() * 50 - 25;
                
                data[index] = Math.max(0, Math.min(255, gradient + noise));     // R
                data[index + 1] = Math.max(0, Math.min(255, gradient * 0.8));  // G  
                data[index + 2] = Math.max(0, Math.min(255, gradient * 0.6));  // B
                data[index + 3] = 255; // A
            }
        }
        
        this.testImage = imageData;
        this.context.putImageData(imageData, 0, 0);
    }
    
    // JavaScript 高斯模糊实现
    applyGaussianBlurJS(imageData, radius) {
        const { width, height, data } = imageData;
        const output = new ImageData(width, height);
        const outputData = output.data;
        
        // 生成高斯核
        const kernel = this.generateGaussianKernel(radius);
        const kernelSize = kernel.length;
        const halfKernel = Math.floor(kernelSize / 2);
        
        // 应用模糊
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                let r = 0, g = 0, b = 0, a = 0;
                let kernelSum = 0;
                
                for (let ky = -halfKernel; ky <= halfKernel; ky++) {
                    for (let kx = -halfKernel; kx <= halfKernel; kx++) {
                        const px = Math.max(0, Math.min(width - 1, x + kx));
                        const py = Math.max(0, Math.min(height - 1, y + ky));
                        const kernelValue = kernel[ky + halfKernel][kx + halfKernel];
                        const pixelIndex = (py * width + px) * 4;
                        
                        r += data[pixelIndex] * kernelValue;
                        g += data[pixelIndex + 1] * kernelValue;
                        b += data[pixelIndex + 2] * kernelValue;
                        a += data[pixelIndex + 3] * kernelValue;
                        kernelSum += kernelValue;
                    }
                }
                
                const outputIndex = (y * width + x) * 4;
                outputData[outputIndex] = r / kernelSum;
                outputData[outputIndex + 1] = g / kernelSum;
                outputData[outputIndex + 2] = b / kernelSum;
                outputData[outputIndex + 3] = a / kernelSum;
            }
        }
        
        return output;
    }
    
    generateGaussianKernel(radius) {
        const size = radius * 2 + 1;
        const kernel = Array(size).fill().map(() => Array(size).fill(0));
        const sigma = radius / 3;
        const twoSigmaSquare = 2 * sigma * sigma;
        const center = radius;
        
        let sum = 0;
        for (let y = 0; y < size; y++) {
            for (let x = 0; x < size; x++) {
                const distance = (x - center) ** 2 + (y - center) ** 2;
                const value = Math.exp(-distance / twoSigmaSquare);
                kernel[y][x] = value;
                sum += value;
            }
        }
        
        // 归一化
        for (let y = 0; y < size; y++) {
            for (let x = 0; x < size; x++) {
                kernel[y][x] /= sum;
            }
        }
        
        return kernel;
    }
    
    // 边缘检测 (Sobel 算子)
    applySobelEdgeDetectionJS(imageData) {
        const { width, height, data } = imageData;
        const output = new ImageData(width, height);
        const outputData = output.data;
        
        // Sobel 算子
        const sobelX = [[-1, 0, 1], [-2, 0, 2], [-1, 0, 1]];
        const sobelY = [[-1, -2, -1], [0, 0, 0], [1, 2, 1]];
        
        for (let y = 1; y < height - 1; y++) {
            for (let x = 1; x < width - 1; x++) {
                let gx = 0, gy = 0;
                
                // 应用 Sobel 算子
                for (let ky = -1; ky <= 1; ky++) {
                    for (let kx = -1; kx <= 1; kx++) {
                        const pixelIndex = ((y + ky) * width + (x + kx)) * 4;
                        const gray = (data[pixelIndex] + data[pixelIndex + 1] + data[pixelIndex + 2]) / 3;
                        
                        gx += gray * sobelX[ky + 1][kx + 1];
                        gy += gray * sobelY[ky + 1][kx + 1];
                    }
                }
                
                const magnitude = Math.sqrt(gx * gx + gy * gy);
                const outputIndex = (y * width + x) * 4;
                
                outputData[outputIndex] = magnitude;     // R
                outputData[outputIndex + 1] = magnitude; // G
                outputData[outputIndex + 2] = magnitude; // B
                outputData[outputIndex + 3] = 255;       // A
            }
        }
        
        return output;
    }
    
    // 基准测试执行
    async runImageProcessingBenchmarks() {
        const results = {};
        
        // 高斯模糊基准测试
        const blurBenchmark = new PrecisionBenchmark('Gaussian Blur', { iterations: 10 });
        results.gaussianBlur = await blurBenchmark.run(() => {
            return this.applyGaussianBlurJS(this.testImage, 3);
        });
        
        // 边缘检测基准测试
        const edgeBenchmark = new PrecisionBenchmark('Sobel Edge Detection', { iterations: 20 });
        results.edgeDetection = await edgeBenchmark.run(() => {
            return this.applySobelEdgeDetectionJS(this.testImage);
        });
        
        // 如果有 WASM 版本，进行对比
        if (this.wasmModule) {
            results.wasmComparison = await this.runWasmComparison();
        }
        
        return results;
    }
    
    async runWasmComparison() {
        // 假设 WASM 模块有对应的图像处理函数
        // 这里需要将图像数据传递给 WASM 内存
        const wasmResults = {};
        
        // WASM 高斯模糊测试
        const wasmBlurBenchmark = new PrecisionBenchmark('WASM Gaussian Blur', { iterations: 10 });
        wasmResults.gaussianBlur = await wasmBlurBenchmark.run(() => {
            // 调用 WASM 函数 (伪代码)
            // this.wasmModule.gaussian_blur(imageDataPointer, width, height, radius);
        });
        
        return wasmResults;
    }
}

C.4 I/O 和 DOM 基准测试

C.4.1 DOM 操作基准测试

DOM 创建和修改测试:

// DOM 操作基准测试套件
class DOMBenchmarkSuite {
    constructor() {
        this.testContainer = null;
        this.setupContainer();
    }
    
    setupContainer() {
        this.testContainer = document.createElement('div');
        this.testContainer.id = 'benchmark-container';
        this.testContainer.style.cssText = `
            position: absolute;
            top: -10000px;
            left: -10000px;
            width: 1000px;
            height: 1000px;
            overflow: hidden;
        `;
        document.body.appendChild(this.testContainer);
    }
    
    // DOM 元素创建基准测试
    async testDOMCreation() {
        const benchmark = new PrecisionBenchmark('DOM Element Creation');
        
        return await benchmark.run(() => {
            const fragment = document.createDocumentFragment();
            
            for (let i = 0; i < 1000; i++) {
                const div = document.createElement('div');
                div.className = `test-element-${i}`;
                div.textContent = `Element ${i}`;
                div.style.cssText = `
                    width: ${Math.random() * 100}px;
                    height: ${Math.random() * 100}px;
                    background-color: hsl(${Math.random() * 360}, 50%, 50%);
                `;
                fragment.appendChild(div);
            }
            
            this.testContainer.appendChild(fragment);
            
            // 清理
            this.testContainer.innerHTML = '';
        });
    }
    
    // DOM 查询基准测试
    async testDOMQuery() {
        // 首先创建测试结构
        this.createTestStructure();
        
        const benchmark = new PrecisionBenchmark('DOM Query Operations');
        
        return await benchmark.run(() => {
            // 各种查询操作
            const byId = document.getElementById('test-element-500');
            const byClass = document.getElementsByClassName('test-class');
            const byTag = document.getElementsByTagName('div');
            const byQuery = document.querySelector('.test-class[data-index="250"]');
            const byQueryAll = document.querySelectorAll('.test-class:nth-child(odd)');
            
            // 返回结果确保操作不被优化掉
            return {
                byId: byId?.id,
                byClassCount: byClass.length,
                byTagCount: byTag.length,
                byQuery: byQuery?.getAttribute('data-index'),
                byQueryAllCount: byQueryAll.length
            };
        });
    }
    
    createTestStructure() {
        const fragment = document.createDocumentFragment();
        
        for (let i = 0; i < 1000; i++) {
            const div = document.createElement('div');
            div.id = `test-element-${i}`;
            div.className = 'test-class';
            div.setAttribute('data-index', i.toString());
            div.textContent = `Test Element ${i}`;
            fragment.appendChild(div);
        }
        
        this.testContainer.appendChild(fragment);
    }
    
    // DOM 样式修改基准测试
    async testStyleModification() {
        this.createTestStructure();
        
        const benchmark = new PrecisionBenchmark('DOM Style Modification');
        const elements = this.testContainer.querySelectorAll('.test-class');
        
        return await benchmark.run(() => {
            elements.forEach((element, index) => {
                // 直接样式修改
                element.style.transform = `translateX(${index % 100}px)`;
                element.style.opacity = Math.random().toString();
                element.style.backgroundColor = `hsl(${index % 360}, 50%, 50%)`;
                
                // 类名切换
                if (index % 2 === 0) {
                    element.classList.add('even-element');
                } else {
                    element.classList.add('odd-element');
                }
            });
        });
    }
    
    // 事件处理基准测试
    async testEventHandling() {
        this.createTestStructure();
        
        let eventCount = 0;
        const eventHandler = (e) => {
            eventCount++;
            e.target.style.backgroundColor = 'red';
        };
        
        // 添加事件监听器
        const elements = this.testContainer.querySelectorAll('.test-class');
        elements.forEach(element => {
            element.addEventListener('click', eventHandler);
        });
        
        const benchmark = new PrecisionBenchmark('Event Handling');
        
        const result = await benchmark.run(() => {
            // 模拟点击事件
            elements.forEach(element => {
                const clickEvent = new MouseEvent('click', {
                    bubbles: true,
                    cancelable: true,
                    view: window
                });
                element.dispatchEvent(clickEvent);
            });
        });
        
        // 清理事件监听器
        elements.forEach(element => {
            element.removeEventListener('click', eventHandler);
        });
        
        return {
            ...result,
            eventsProcessed: eventCount
        };
    }
    
    // 布局和重排基准测试
    async testLayoutThrashing() {
        this.createTestStructure();
        
        const benchmark = new PrecisionBenchmark('Layout Thrashing');
        const elements = this.testContainer.querySelectorAll('.test-class');
        
        return await benchmark.run(() => {
            elements.forEach(element => {
                // 强制布局重计算的操作
                element.style.width = Math.random() * 200 + 'px';
                const width = element.offsetWidth; // 强制布局
                
                element.style.height = Math.random() * 200 + 'px';
                const height = element.offsetHeight; // 强制布局
                
                element.style.marginLeft = Math.random() * 50 + 'px';
                const margin = element.offsetLeft; // 强制布局
            });
        });
    }
    
    // 运行完整的 DOM 基准测试套件
    async runFullSuite() {
        const results = {
            domCreation: await this.testDOMCreation(),
            domQuery: await this.testDOMQuery(),
            styleModification: await this.testStyleModification(),
            eventHandling: await this.testEventHandling(),
            layoutThrashing: await this.testLayoutThrashing()
        };
        
        // 清理
        this.cleanup();
        
        return results;
    }
    
    cleanup() {
        if (this.testContainer && this.testContainer.parentNode) {
            this.testContainer.parentNode.removeChild(this.testContainer);
        }
    }
}

C.4.2 网络 I/O 基准测试

网络请求性能测试:

// 网络 I/O 基准测试套件
class NetworkBenchmarkSuite {
    constructor() {
        this.testEndpoints = {
            small: './test-data/small.json',    // ~1KB
            medium: './test-data/medium.json',  // ~100KB
            large: './test-data/large.json'     // ~1MB
        };
    }
    
    // Fetch API 性能测试
    async testFetchPerformance() {
        const results = {};
        
        for (const [size, url] of Object.entries(this.testEndpoints)) {
            const benchmark = new PrecisionBenchmark(`Fetch ${size} data`);
            
            results[size] = await benchmark.run(async () => {
                const response = await fetch(url);
                const data = await response.json();
                return data;
            });
        }
        
        return results;
    }
    
    // XMLHttpRequest 性能测试
    async testXHRPerformance() {
        const results = {};
        
        for (const [size, url] of Object.entries(this.testEndpoints)) {
            const benchmark = new PrecisionBenchmark(`XHR ${size} data`);
            
            results[size] = await benchmark.run(() => {
                return new Promise((resolve, reject) => {
                    const xhr = new XMLHttpRequest();
                    xhr.open('GET', url);
                    xhr.onload = () => {
                        if (xhr.status === 200) {
                            resolve(JSON.parse(xhr.responseText));
                        } else {
                            reject(new Error(`HTTP ${xhr.status}`));
                        }
                    };
                    xhr.onerror = reject;
                    xhr.send();
                });
            });
        }
        
        return results;
    }
    
    // WebSocket 性能测试
    async testWebSocketPerformance() {
        // 注意：这需要一个支持 WebSocket 的测试服务器
        const benchmark = new PrecisionBenchmark('WebSocket Round Trip');
        
        return new Promise((resolve) => {
            const ws = new WebSocket('ws://localhost:8080/benchmark');
            const measurements = [];
            let messagesSent = 0;
            const totalMessages = 100;
            
            ws.onopen = () => {
                const sendMessage = () => {
                    const start = performance.now();
                    ws.send(JSON.stringify({ 
                        id: messagesSent, 
                        timestamp: start,
                        data: 'benchmark-data'.repeat(100) // ~1.3KB
                    }));
                };
                
                const interval = setInterval(() => {
                    if (messagesSent < totalMessages) {
                        sendMessage();
                        messagesSent++;
                    } else {
                        clearInterval(interval);
                    }
                }, 10);
            };
            
            ws.onmessage = (event) => {
                const end = performance.now();
                const message = JSON.parse(event.data);
                const roundTripTime = end - message.timestamp;
                measurements.push(roundTripTime);
                
                if (measurements.length === totalMessages) {
                    ws.close();
                    const stats = StatisticsAnalyzer.calculateStats(measurements);
                    resolve({
                        name: 'WebSocket Round Trip',
                        measurements,
                        statistics: stats
                    });
                }
            };
        });
    }
    
    // 并发请求性能测试
    async testConcurrentRequests() {
        const concurrencyLevels = [1, 5, 10, 20, 50];
        const results = {};
        
        for (const concurrency of concurrencyLevels) {
            const benchmark = new PrecisionBenchmark(`Concurrent Requests (${concurrency})`);
            
            results[`concurrency_${concurrency}`] = await benchmark.run(async () => {
                const promises = Array(concurrency).fill().map(async () => {
                    const response = await fetch(this.testEndpoints.medium);
                    return await response.json();
                });
                
                const results = await Promise.all(promises);
                return results.length;
            });
        }
        
        return results;
    }
    
    // 请求缓存性能测试
    async testRequestCaching() {
        const cacheUrl = this.testEndpoints.medium;
        
        // 第一次请求 (无缓存)
        const firstRequestBenchmark = new PrecisionBenchmark('First Request (No Cache)');
        const firstRequest = await firstRequestBenchmark.run(async () => {
            const response = await fetch(cacheUrl + '?nocache=' + Date.now());
            return await response.json();
        });
        
        // 缓存的请求
        const cachedRequestBenchmark = new PrecisionBenchmark('Cached Request');
        const cachedRequest = await cachedRequestBenchmark.run(async () => {
            const response = await fetch(cacheUrl);
            return await response.json();
        });
        
        return {
            firstRequest,
            cachedRequest,
            cacheSpeedup: firstRequest.statistics.mean / cachedRequest.statistics.mean
        };
    }
    
    // 数据传输格式对比测试
    async testDataFormats() {
        const formats = {
            json: './test-data/data.json',
            xml: './test-data/data.xml',
            binary: './test-data/data.bin',
            msgpack: './test-data/data.msgpack'
        };
        
        const results = {};
        
        for (const [format, url] of Object.entries(formats)) {
            const benchmark = new PrecisionBenchmark(`${format.toUpperCase()} Format`);
            
            results[format] = await benchmark.run(async () => {
                const response = await fetch(url);
                
                switch (format) {
                    case 'json':
                        return await response.json();
                    case 'xml':
                        const xmlText = await response.text();
                        const parser = new DOMParser();
                        return parser.parseFromString(xmlText, 'text/xml');
                    case 'binary':
                        return await response.arrayBuffer();
                    case 'msgpack':
                        const buffer = await response.arrayBuffer();
                        // 假设有 msgpack 解析库
                        // return msgpack.decode(new Uint8Array(buffer));
                        return buffer;
                    default:
                        return await response.text();
                }
            });
        }
        
        return results;
    }
    
    // 运行完整网络基准测试套件
    async runFullSuite() {
        console.log('开始网络 I/O 基准测试...');
        
        const results = {
            fetch: await this.testFetchPerformance(),
            xhr: await this.testXHRPerformance(),
            concurrent: await this.testConcurrentRequests(),
            caching: await this.testRequestCaching(),
            dataFormats: await this.testDataFormats()
        };
        
        // WebSocket 测试需要服务器支持，可选
        try {
            results.websocket = await this.testWebSocketPerformance();
        } catch (error) {
            console.warn('WebSocket 测试跳过:', error.message);
        }
        
        return results;
    }
}

C.5 性能分析工具

C.5.1 浏览器性能 API

详细性能监控工具:

// 浏览器性能监控工具
class BrowserPerformanceProfiler {
    constructor() {
        this.observer = null;
        this.performanceEntries = [];
        this.memorySnapshots = [];
        this.setupPerformanceObserver();
    }
    
    setupPerformanceObserver() {
        if ('PerformanceObserver' in window) {
            this.observer = new PerformanceObserver((list) => {
                const entries = list.getEntries();
                this.performanceEntries.push(...entries);
            });
            
            // 监控各种性能指标
            try {
                this.observer.observe({ entryTypes: ['measure', 'mark', 'navigation', 'resource', 'paint'] });
            } catch (e) {
                // 降级处理
                this.observer.observe({ entryTypes: ['measure', 'mark'] });
            }
        }
    }
    
    // 添加自定义性能标记
    mark(name) {
        if ('performance' in window && 'mark' in performance) {
            performance.mark(name);
        }
    }
    
    // 测量两个标记之间的时间
    measure(name, startMark, endMark) {
        if ('performance' in window && 'measure' in performance) {
            performance.measure(name, startMark, endMark);
        }
    }
    
    // 获取导航性能信息
    getNavigationTiming() {
        if (!('performance' in window) || !performance.getEntriesByType) {
            return null;
        }
        
        const navigation = performance.getEntriesByType('navigation')[0];
        if (!navigation) return null;
        
        return {
            // DNS 查询时间
            dnsLookup: navigation.domainLookupEnd - navigation.domainLookupStart,
            
            // TCP 连接时间
            tcpConnect: navigation.connectEnd - navigation.connectStart,
            
            // SSL 握手时间 (如果是 HTTPS)
            sslHandshake: navigation.secureConnectionStart > 0 ? 
                navigation.connectEnd - navigation.secureConnectionStart : 0,
            
            // 请求响应时间
            requestResponse: navigation.responseEnd - navigation.requestStart,
            
            // DOM 解析时间
            domParsing: navigation.domInteractive - navigation.responseEnd,
            
            // DOM 内容加载完成
            domContentLoaded: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
            
            // 页面完全加载时间
            pageLoad: navigation.loadEventEnd - navigation.loadEventStart,
            
            // 总的页面加载时间
            totalTime: navigation.loadEventEnd - navigation.navigationStart
        };
    }
    
    // 获取资源加载性能
    getResourceTiming() {
        if (!('performance' in window) || !performance.getEntriesByType) {
            return [];
        }
        
        const resources = performance.getEntriesByType('resource');
        
        return resources.map(resource => ({
            name: resource.name,
            duration: resource.duration,
            size: resource.transferSize || resource.encodedBodySize,
            type: this.getResourceType(resource.name),
            cached: resource.transferSize === 0 && resource.encodedBodySize > 0,
            timing: {
                dns: resource.domainLookupEnd - resource.domainLookupStart,
                tcp: resource.connectEnd - resource.connectStart,
                ssl: resource.secureConnectionStart > 0 ? 
                    resource.connectEnd - resource.secureConnectionStart : 0,
                request: resource.responseStart - resource.requestStart,
                response: resource.responseEnd - resource.responseStart
            }
        }));
    }
    
    getResourceType(url) {
        const extension = url.split('.').pop().toLowerCase();
        const typeMap = {
            'js': 'javascript',
            'css': 'stylesheet',
            'png': 'image',
            'jpg': 'image',
            'jpeg': 'image',
            'gif': 'image',
            'svg': 'image',
            'woff': 'font',
            'woff2': 'font',
            'ttf': 'font',
            'json': 'xhr',
            'wasm': 'wasm'
        };
        return typeMap[extension] || 'other';
    }
    
    // 获取绘制性能信息
    getPaintTiming() {
        if (!('performance' in window) || !performance.getEntriesByType) {
            return null;
        }
        
        const paintEntries = performance.getEntriesByType('paint');
        const result = {};
        
        paintEntries.forEach(entry => {
            result[entry.name] = entry.startTime;
        });
        
        return result;
    }
    
    // 内存使用快照
    takeMemorySnapshot() {
        if (!('performance' in window) || !performance.memory) {
            return null;
        }
        
        const snapshot = {
            timestamp: performance.now(),
            usedJSHeapSize: performance.memory.usedJSHeapSize,
            totalJSHeapSize: performance.memory.totalJSHeapSize,
            jsHeapSizeLimit: performance.memory.jsHeapSizeLimit
        };
        
        this.memorySnapshots.push(snapshot);
        return snapshot;
    }
    
    // 分析内存趋势
    analyzeMemoryTrend() {
        if (this.memorySnapshots.length < 2) {
            return null;
        }
        
        const snapshots = this.memorySnapshots.slice(-10); // 最近10个快照
        const growthRates = [];
        
        for (let i = 1; i < snapshots.length; i++) {
            const prev = snapshots[i - 1];
            const curr = snapshots[i];
            const timeDiff = curr.timestamp - prev.timestamp;
            const memoryDiff = curr.usedJSHeapSize - prev.usedJSHeapSize;
            
            if (timeDiff > 0) {
                growthRates.push(memoryDiff / timeDiff); // bytes/ms
            }
        }
        
        const avgGrowthRate = growthRates.reduce((a, b) => a + b, 0) / growthRates.length;
        
        return {
            averageGrowthRate: avgGrowthRate,
            currentUsage: snapshots[snapshots.length - 1].usedJSHeapSize,
            peakUsage: Math.max(...snapshots.map(s => s.usedJSHeapSize)),
            snapshots: snapshots
        };
    }
    
    // 生成性能报告
    generateReport() {
        const report = {
            timestamp: new Date().toISOString(),
            navigation: this.getNavigationTiming(),
            resources: this.getResourceTiming(),
            paint: this.getPaintTiming(),
            memory: this.analyzeMemoryTrend(),
            customMarks: this.performanceEntries.filter(entry => entry.entryType === 'mark'),
            customMeasures: this.performanceEntries.filter(entry => entry.entryType === 'measure')
        };
        
        return report;
    }
    
    // 清理和销毁
    destroy() {
        if (this.observer) {
            this.observer.disconnect();
        }
        this.performanceEntries = [];
        this.memorySnapshots = [];
    }
}

C.5.2 WebAssembly 特定性能分析

WASM 性能分析工具:

// WebAssembly 性能分析工具
class WasmPerformanceAnalyzer {
    constructor() {
        this.compilationTimes = new Map();
        this.instantiationTimes = new Map();
        this.functionCallTimes = new Map();
        this.memoryUsage = new Map();
    }
    
    // 分析 WASM 模块编译性能
    async analyzeCompilation(wasmBytes, name = 'unknown') {
        const startTime = performance.now();
        
        try {
            const module = await WebAssembly.compile(wasmBytes);
            const endTime = performance.now();
            
            const compilationTime = endTime - startTime;
            this.compilationTimes.set(name, {
                time: compilationTime,
                moduleSize: wasmBytes.byteLength,
                timestamp: Date.now()
            });
            
            return {
                module,
                compilationTime,
                bytesPerMs: wasmBytes.byteLength / compilationTime
            };
        } catch (error) {
            throw new Error(`WASM 编译失败: ${error.message}`);
        }
    }
    
    // 分析 WASM 模块实例化性能
    async analyzeInstantiation(module, importObject = {}, name = 'unknown') {
        const startTime = performance.now();
        
        try {
            const instance = await WebAssembly.instantiate(module, importObject);
            const endTime = performance.now();
            
            const instantiationTime = endTime - startTime;
            this.instantiationTimes.set(name, {
                time: instantiationTime,
                timestamp: Date.now()
            });
            
            return {
                instance,
                instantiationTime
            };
        } catch (error) {
            throw new Error(`WASM 实例化失败: ${error.message}`);
        }
    }
    
    // 分析函数调用性能
    createInstrumentedFunction(wasmFunction, functionName) {
        const analyzer = this;
        
        return function(...args) {
            const startTime = performance.now();
            const result = wasmFunction.apply(this, args);
            const endTime = performance.now();
            
            const callTime = endTime - startTime;
            
            if (!analyzer.functionCallTimes.has(functionName)) {
                analyzer.functionCallTimes.set(functionName, []);
            }
            
            analyzer.functionCallTimes.get(functionName).push({
                time: callTime,
                args: args.length,
                timestamp: startTime
            });
            
            return result;
        };
    }
    
    // 内存使用分析
    analyzeMemoryUsage(wasmInstance, testName) {
        const memory = wasmInstance.exports.memory;
        if (!memory) {
            console.warn('WASM 实例没有导出内存');
            return null;
        }
        
        const memoryInfo = {
            timestamp: performance.now(),
            bufferSize: memory.buffer.byteLength,
            pageCount: memory.buffer.byteLength / 65536, // WASM 页大小
            testName
        };
        
        if (!this.memoryUsage.has(testName)) {
            this.memoryUsage.set(testName, []);
        }
        
        this.memoryUsage.get(testName).push(memoryInfo);
        return memoryInfo;
    }
    
    // WASM 与 JS 性能对比
    async runPerformanceComparison(wasmFunction, jsFunction, testData, iterations = 1000) {
        // 预热
        for (let i = 0; i < 100; i++) {
            wasmFunction(...testData);
            jsFunction(...testData);
        }
        
        // WASM 测试
        const wasmTimes = [];
        for (let i = 0; i < iterations; i++) {
            const start = performance.now();
            wasmFunction(...testData);
            const end = performance.now();
            wasmTimes.push(end - start);
        }
        
        // JavaScript 测试
        const jsTimes = [];
        for (let i = 0; i < iterations; i++) {
            const start = performance.now();
            jsFunction(...testData);
            const end = performance.now();
            jsTimes.push(end - start);
        }
        
        const wasmStats = StatisticsAnalyzer.calculateStats(wasmTimes);
        const jsStats = StatisticsAnalyzer.calculateStats(jsTimes);
        
        return {
            wasm: wasmStats,
            javascript: jsStats,
            speedup: jsStats.mean / wasmStats.mean,
            wasmFaster: wasmStats.mean < jsStats.mean
        };
    }
    
    // 分析编译后的 WASM 代码质量
    analyzeWasmCodeQuality(wasmBytes) {
        // 这是一个简化的分析，实际的分析会更复杂
        const view = new Uint8Array(wasmBytes);
        
        // 检查 WASM 魔数
        const magicNumber = [0x00, 0x61, 0x73, 0x6d];
        const hasMagicNumber = magicNumber.every((byte, index) => view[index] === byte);
        
        // 版本检查
        const version = [view[4], view[5], view[6], view[7]];
        
        // 简单的段分析
        let sectionCount = 0;
        let codeSize = 0;
        let dataSize = 0;
        
        // 这里应该实现完整的 WASM 二进制格式解析
        // 为了简化，我们只做基本检查
        
        return {
            isValid: hasMagicNumber,
            version,
            fileSize: wasmBytes.byteLength,
            sectionCount,
            codeSize,
            dataSize,
            compressionRatio: codeSize / wasmBytes.byteLength
        };
    }
    
    // 生成性能报告
    generatePerformanceReport() {
        const report = {
            timestamp: new Date().toISOString(),
            compilation: Object.fromEntries(this.compilationTimes),
            instantiation: Object.fromEntries(this.instantiationTimes),
            functionCalls: this.analyzeFunctionCallStats(),
            memory: this.analyzeMemoryStats(),
            recommendations: this.generateRecommendations()
        };
        
        return report;
    }
    
    analyzeFunctionCallStats() {
        const stats = {};
        
        for (const [functionName, calls] of this.functionCallTimes) {
            const times = calls.map(call => call.time);
            stats[functionName] = {
                ...StatisticsAnalyzer.calculateStats(times),
                callCount: calls.length,
                totalTime: times.reduce((a, b) => a + b, 0)
            };
        }
        
        return stats;
    }
    
    analyzeMemoryStats() {
        const stats = {};
        
        for (const [testName, snapshots] of this.memoryUsage) {
            const sizes = snapshots.map(snapshot => snapshot.bufferSize);
            stats[testName] = {
                ...StatisticsAnalyzer.calculateStats(sizes),
                snapshotCount: snapshots.length,
                peakMemory: Math.max(...sizes),
                averageMemory: sizes.reduce((a, b) => a + b, 0) / sizes.length
            };
        }
        
        return stats;
    }
    
    generateRecommendations() {
        const recommendations = [];
        
        // 编译时间建议
        for (const [name, data] of this.compilationTimes) {
            if (data.time > 100) { // 超过100ms
                recommendations.push({
                    type: 'compilation',
                    severity: 'warning',
                    message: `模块 "${name}" 编译时间较长 (${data.time.toFixed(2)}ms)，考虑预编译或优化代码`
                });
            }
        }
        
        // 函数调用性能建议
        for (const [functionName, stats] of Object.entries(this.analyzeFunctionCallStats())) {
            if (stats.mean > 10) { // 平均调用时间超过10ms
                recommendations.push({
                    type: 'function_performance',
                    severity: 'warning',
                    message: `函数 "${functionName}" 平均执行时间较长 (${stats.mean.toFixed(2)}ms)，建议优化算法或减少调用频率`
                });
            }
        }
        
        return recommendations;
    }
}

C.6 性能优化策略

C.6.1 基于基准测试的优化

自动化性能优化建议系统:

// 性能优化建议系统
class PerformanceOptimizationAdvisor {
    constructor() {
        this.benchmarkResults = new Map();
        this.optimizationRules = this.initializeOptimizationRules();
    }
    
    initializeOptimizationRules() {
        return [
            {
                name: 'memory_allocation_frequency',
                condition: (results) => {
                    const memoryStats = results.memory?.analyzeMemoryTrend?.();
                    return memoryStats && memoryStats.averageGrowthRate > 1000; // >1KB/ms
                },
                recommendation: {
                    severity: 'high',
                    title: '内存分配频率过高',
                    description: '检测到频繁的内存分配，可能导致性能问题',
                    solutions: [
                        '使用对象池减少 GC 压力',
                        '预分配大块内存',
                        '使用 ArrayBuffer 和 TypedArray',
                        '避免在循环中创建临时对象'
                    ]
                }
            },
            {
                name: 'dom_manipulation_performance',
                condition: (results) => {
                    const domResults = results.dom;
                    return domResults && domResults.layoutThrashing?.statistics.mean > 50;
                },
                recommendation: {
                    severity: 'medium',
                    title: 'DOM 操作性能瓶颈',
                    description: 'DOM 操作导致频繁的布局重计算',
                    solutions: [
                        '批量 DOM 操作',
                        '使用 DocumentFragment',
                        '避免频繁读取布局属性',
                        '使用 CSS transforms 替代位置变更'
                    ]
                }
            },
            {
                name: 'wasm_js_boundary_overhead',
                condition: (results) => {
                    const wasmResults = results.wasm;
                    return wasmResults && wasmResults.speedup < 1.5; // WASM 加速比小于1.5x
                },
                recommendation: {
                    severity: 'medium',
                    title: 'WASM/JS 边界开销过高',
                    description: 'WebAssembly 性能优势不明显，可能由于频繁的边界调用',
                    solutions: [
                        '减少 WASM/JS 调用频率',
                        '批量传递数据',
                        '在 WASM 中实现更多逻辑',
                        '使用 SharedArrayBuffer 共享内存'
                    ]
                }
            },
            {
                name: 'network_request_optimization',
                condition: (results) => {
                    const networkResults = results.network;
                    return networkResults && networkResults.caching?.cacheSpeedup < 3;
                },
                recommendation: {
                    severity: 'low',
                    title: '网络请求缓存效果不佳',
                    description: '缓存带来的性能提升有限',
                    solutions: [
                        '检查缓存头配置',
                        '使用 Service Worker 实现应用级缓存',
                        '实现预加载策略',
                        '压缩响应数据'
                    ]
                }
            }
        ];
    }
    
    // 分析基准测试结果并生成优化建议
    analyzeAndRecommend(benchmarkResults) {
        const recommendations = [];
        
        for (const rule of this.optimizationRules) {
            try {
                if (rule.condition(benchmarkResults)) {
                    recommendations.push({
                        ...rule.recommendation,
                        ruleId: rule.name,
                        timestamp: Date.now()
                    });
                }
            } catch (error) {
                console.warn(`优化规则 "${rule.name}" 执行失败:`, error);
            }
        }
        
        return recommendations;
    }
    
    // 生成性能优化报告
    generateOptimizationReport(benchmarkResults) {
        const recommendations = this.analyzeAndRecommend(benchmarkResults);
        
        // 按严重程度排序
        const sortedRecommendations = recommendations.sort((a, b) => {
            const severityOrder = { high: 3, medium: 2, low: 1 };
            return severityOrder[b.severity] - severityOrder[a.severity];
        });
        
        // 生成具体的优化代码示例
        const codeExamples = this.generateCodeExamples(recommendations);
        
        return {
            summary: {
                totalIssues: recommendations.length,
                highPriority: recommendations.filter(r => r.severity === 'high').length,
                mediumPriority: recommendations.filter(r => r.severity === 'medium').length,
                lowPriority: recommendations.filter(r => r.severity === 'low').length
            },
            recommendations: sortedRecommendations,
            codeExamples,
            timestamp: new Date().toISOString()
        };
    }
    
    generateCodeExamples(recommendations) {
        const examples = {};
        
        recommendations.forEach(rec => {
            switch (rec.ruleId) {
                case 'memory_allocation_frequency':
                    examples[rec.ruleId] = {
                        before: `
// 问题代码：频繁内存分配
function processData(items) {
    for (let item of items) {
        const temp = { processed: item.value * 2 }; // 每次分配新对象
        results.push(temp);
    }
}`,
                        after: `
// 优化代码：对象重用
class DataProcessor {
    constructor() {
        this.tempObject = { processed: 0 }; // 重用对象
    }
    
    processData(items) {
        for (let item of items) {
            this.tempObject.processed = item.value * 2;
            results.push({ ...this.tempObject }); // 只在需要时复制
        }
    }
}`
                    };
                    break;
                    
                case 'dom_manipulation_performance':
                    examples[rec.ruleId] = {
                        before: `
// 问题代码：频繁 DOM 操作
elements.forEach(el => {
    el.style.width = Math.random() * 100 + 'px';
    const width = el.offsetWidth; // 强制布局
    el.style.height = width + 'px';
});`,
                        after: `
// 优化代码：批量操作
const fragment = document.createDocumentFragment();
elements.forEach(el => {
    const clone = el.cloneNode(true);
    const width = Math.random() * 100;
    clone.style.width = width + 'px';
    clone.style.height = width + 'px';
    fragment.appendChild(clone);
});
container.replaceChildren(fragment);`
                    };
                    break;
                    
                case 'wasm_js_boundary_overhead':
                    examples[rec.ruleId] = {
                        before: `
// 问题代码：频繁边界调用
for (let i = 0; i < 1000000; i++) {
    wasmModule.process_single_item(data[i]);
}`,
                        after: `
// 优化代码：批量处理
const batchSize = 1000;
for (let i = 0; i < data.length; i += batchSize) {
    const batch = data.slice(i, i + batchSize);
    wasmModule.process_batch(batch);
}`
                    };
                    break;
            }
        });
        
        return examples;
    }
}

C.6.2 持续性能监控

生产环境性能监控:

// 生产环境性能监控系统
class ProductionPerformanceMonitor {
    constructor(options = {}) {
        this.options = {
            samplingRate: options.samplingRate || 0.1, // 10% 采样
            reportingInterval: options.reportingInterval || 60000, // 1分钟报告一次
            endpointUrl: options.endpointUrl || '/api/performance',
            maxBatchSize: options.maxBatchSize || 100,
            ...options
        };
        
        this.performanceData = [];
        this.isMonitoring = false;
        this.reportingTimer = null;
        
        this.init();
    }
    
    init() {
        // 监控页面加载性能
        this.monitorPageLoad();
        
        // 监控资源加载
        this.monitorResourceLoading();
        
        // 监控运行时性能
        this.monitorRuntimePerformance();
        
        // 监控错误
        this.monitorErrors();
        
        // 启动定期报告
        this.startReporting();
    }
    
    monitorPageLoad() {
        window.addEventListener('load', () => {
            if (Math.random() > this.options.samplingRate) return;
            
            const navigation = performance.getEntriesByType('navigation')[0];
            if (navigation) {
                this.recordMetric('page_load', {
                    timestamp: Date.now(),
                    metrics: {
                        loadTime: navigation.loadEventEnd - navigation.navigationStart,
                        domContentLoaded: navigation.domContentLoadedEventEnd - navigation.navigationStart,
                        firstByte: navigation.responseStart - navigation.navigationStart,
                        domInteractive: navigation.domInteractive - navigation.navigationStart
                    },
                    userAgent: navigator.userAgent,
                    url: window.location.href
                });
            }
        });
    }
    
    monitorResourceLoading() {
        if ('PerformanceObserver' in window) {
            const observer = new PerformanceObserver((list) => {
                if (Math.random() > this.options.samplingRate) return;
                
                const entries = list.getEntries();
                entries.forEach(entry => {
                    if (entry.duration > 1000) { // 只记录加载时间超过1秒的资源
                        this.recordMetric('slow_resource', {
                            timestamp: Date.now(),
                            resource: {
                                name: entry.name,
                                duration: entry.duration,
                                size: entry.transferSize,
                                type: this.getResourceType(entry.name)
                            }
                        });
                    }
                });
            });
            
            observer.observe({ entryTypes: ['resource'] });
        }
    }
    
    monitorRuntimePerformance() {
        // 监控长任务
        if ('PerformanceLongTaskTiming' in window) {
            const observer = new PerformanceObserver((list) => {
                if (Math.random() > this.options.samplingRate) return;
                
                const entries = list.getEntries();
                entries.forEach(entry => {
                    this.recordMetric('long_task', {
                        timestamp: Date.now(),
                        task: {
                            duration: entry.duration,
                            startTime: entry.startTime,
                            name: entry.name
                        }
                    });
                });
            });
            
            observer.observe({ entryTypes: ['longtask'] });
        }
        
        // 监控内存使用
        if (performance.memory) {
            setInterval(() => {
                if (Math.random() > this.options.samplingRate) return;
                
                this.recordMetric('memory_usage', {
                    timestamp: Date.now(),
                    memory: {
                        used: performance.memory.usedJSHeapSize,
                        total: performance.memory.totalJSHeapSize,
                        limit: performance.memory.jsHeapSizeLimit
                    }
                });
            }, 30000); // 每30秒采样一次
        }
    }
    
    monitorErrors() {
        // JavaScript 错误
        window.addEventListener('error', (event) => {
            this.recordMetric('javascript_error', {
                timestamp: Date.now(),
                error: {
                    message: event.message,
                    filename: event.filename,
                    line: event.lineno,
                    column: event.colno,
                    stack: event.error?.stack
                }
            });
        });
        
        // Promise 拒绝
        window.addEventListener('unhandledrejection', (event) => {
            this.recordMetric('promise_rejection', {
                timestamp: Date.now(),
                error: {
                    reason: event.reason?.toString(),
                    stack: event.reason?.stack
                }
            });
        });
    }
    
    recordMetric(type, data) {
        const metric = {
            type,
            ...data,
            sessionId: this.getSessionId(),
            userId: this.getUserId()
        };
        
        this.performanceData.push(metric);
        
        // 如果数据量过大，立即发送
        if (this.performanceData.length >= this.options.maxBatchSize) {
            this.sendMetrics();
        }
    }
    
    startReporting() {
        this.reportingTimer = setInterval(() => {
            if (this.performanceData.length > 0) {
                this.sendMetrics();
            }
        }, this.options.reportingInterval);
    }
    
    async sendMetrics() {
        if (this.performanceData.length === 0) return;
        
        const payload = {
            metrics: [...this.performanceData],
            timestamp: Date.now(),
            userAgent: navigator.userAgent,
            url: window.location.href
        };
        
        this.performanceData = []; // 清空本地数据
        
        try {
            // 使用 navigator.sendBeacon 确保数据能够发送
            if ('sendBeacon' in navigator) {
                const success = navigator.sendBeacon(
                    this.options.endpointUrl,
                    JSON.stringify(payload)
                );
                
                if (!success) {
                    // 降级到 fetch
                    await this.fallbackSend(payload);
                }
            } else {
                await this.fallbackSend(payload);
            }
        } catch (error) {
            console.warn('性能数据发送失败:', error);
            // 可以考虑将数据存储到 localStorage 稍后重试
        }
    }
    
    async fallbackSend(payload) {
        const response = await fetch(this.options.endpointUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload),
            keepalive: true
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
    }
    
    getResourceType(url) {
        const extension = url.split('.').pop()?.toLowerCase();
        const typeMap = {
            'js': 'script',
            'css': 'stylesheet',
            'png': 'image',
            'jpg': 'image',
            'woff': 'font',
            'wasm': 'wasm'
        };
        return typeMap[extension] || 'other';
    }
    
    getSessionId() {
        let sessionId = sessionStorage.getItem('performance-session-id');
        if (!sessionId) {
            sessionId = 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
            sessionStorage.setItem('performance-session-id', sessionId);
        }
        return sessionId;
    }
    
    getUserId() {
        // 返回匿名化的用户标识符
        return localStorage.getItem('anonymous-user-id') || 'anonymous';
    }
    
    // 停止监控
    stop() {
        this.isMonitoring = false;
        if (this.reportingTimer) {
            clearInterval(this.reportingTimer);
        }
        
        // 发送剩余数据
        if (this.performanceData.length > 0) {
            this.sendMetrics();
        }
    }
}

// 使用示例
const monitor = new ProductionPerformanceMonitor({
    samplingRate: 0.05, // 5% 采样率
    endpointUrl: 'https://api.example.com/performance',
    reportingInterval: 30000 // 30秒报告一次
});

C.7 基准测试最佳实践

C.7.1 测试环境标准化

自动化基准测试套件:

// 完整的基准测试套件管理器
class BenchmarkSuiteManager {
    constructor() {
        this.suites = new Map();
        this.results = new Map();
        this.config = this.getDefaultConfig();
    }
    
    getDefaultConfig() {
        return {
            environment: {
                warmupRounds: 100,
                measurementRounds: 1000,
                minTestTime: 1000,
                maxTestTime: 10000,
                gcBetweenTests: true,
                isolateTests: true
            },
            reporting: {
                includeEnvironmentInfo: true,
                includeStatistics: true,
                includeOutliers: true,
                generateCharts: false
            },
            comparison: {
                enableBaseline: true,
                baselineThreshold: 0.05, // 5% 差异阈值
                enableRegression: true
            }
        };
    }
    
    // 注册基准测试套件
    registerSuite(name, suite) {
        this.suites.set(name, suite);
    }
    
    // 运行单个套件
    async runSuite(suiteName, options = {}) {
        const suite = this.suites.get(suiteName);
        if (!suite) {
            throw new Error(`基准测试套件 "${suiteName}" 不存在`);
        }
        
        console.log(`开始运行基准测试套件: ${suiteName}`);
        
        // 环境准备
        await this.prepareEnvironment();
        
        try {
            const results = await suite.runFullSuite();
            this.results.set(suiteName, {
                ...results,
                timestamp: Date.now(),
                environment: this.getEnvironmentInfo()
            });
            
            console.log(`套件 "${suiteName}" 完成`);
            return results;
        } catch (error) {
            console.error(`套件 "${suiteName}" 运行失败:`, error);
            throw error;
        }
    }
    
    // 运行所有套件
    async runAllSuites() {
        const results = {};
        
        for (const [suiteName] of this.suites) {
            try {
                results[suiteName] = await this.runSuite(suiteName);
            } catch (error) {
                results[suiteName] = {
                    error: error.message,
                    timestamp: Date.now()
                };
            }
        }
        
        return results;
    }
    
    // 环境准备
    async prepareEnvironment() {
        // 强制垃圾回收
        if (this.config.environment.gcBetweenTests && global.gc) {
            global.gc();
        }
        
        // 等待系统稳定
        await new Promise(resolve => setTimeout(resolve, 100));
        
        // 检查系统资源
        if (performance.memory) {
            const memoryInfo = performance.memory;
            const memoryUsage = memoryInfo.usedJSHeapSize / memoryInfo.jsHeapSizeLimit;
            
            if (memoryUsage > 0.8) {
                console.warn('内存使用率较高，测试结果可能不准确');
            }
        }
    }
    
    getEnvironmentInfo() {
        return {
            userAgent: navigator.userAgent,
            platform: navigator.platform,
            hardwareConcurrency: navigator.hardwareConcurrency,
            memory: performance.memory ? {
                used: performance.memory.usedJSHeapSize,
                total: performance.memory.totalJSHeapSize,
                limit: performance.memory.jsHeapSizeLimit
            } : null,
            timestamp: Date.now(),
            url: window.location.href
        };
    }
    
    // 结果比较
    compareResults(current, baseline) {
        const comparison = {};
        
        for (const [testName, currentResult] of Object.entries(current)) {
            if (!baseline[testName]) continue;
            
            const baselineResult = baseline[testName];
            
            if (currentResult.statistics && baselineResult.statistics) {
                const currentMean = currentResult.statistics.mean;
                const baselineMean = baselineResult.statistics.mean;
                const changeRatio = (currentMean - baselineMean) / baselineMean;
                
                comparison[testName] = {
                    current: currentMean,
                    baseline: baselineMean,
                    changeRatio,
                    changePercent: changeRatio * 100,
                    isRegression: changeRatio > this.config.comparison.baselineThreshold,
                    isImprovement: changeRatio < -this.config.comparison.baselineThreshold,
                    significance: this.calculateSignificance(currentResult, baselineResult)
                };
            }
        }
        
        return comparison;
    }
    
    calculateSignificance(current, baseline) {
        // 简化的统计显著性检验
        const currentStats = current.statistics;
        const baselineStats = baseline.statistics;
        
        if (!currentStats || !baselineStats) return 'unknown';
        
        // 计算标准误差
        const currentSE = currentStats.standardDeviation / Math.sqrt(currentStats.count);
        const baselineSE = baselineStats.standardDeviation / Math.sqrt(baselineStats.count);
        
        // 计算 t 统计量
        const meanDiff = currentStats.mean - baselineStats.mean;
        const pooledSE = Math.sqrt(currentSE * currentSE + baselineSE * baselineSE);
        const tStat = Math.abs(meanDiff / pooledSE);
        
        // 简化的显著性判断
        if (tStat > 2.58) return 'highly_significant'; // p < 0.01
        if (tStat > 1.96) return 'significant';        // p < 0.05
        if (tStat > 1.65) return 'marginally_significant'; // p < 0.10
        return 'not_significant';
    }
    
    // 生成 HTML 报告
    generateHTMLReport(results, comparison = null) {
        const html = `
<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly 性能基准测试报告</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .header { background: #f5f5f5; padding: 20px; border-radius: 5px; }
        .suite { margin: 20px 0; border: 1px solid #ddd; border-radius: 5px; }
        .suite-header { background: #e9e9e9; padding: 15px; font-weight: bold; }
        .test-result { padding: 15px; border-bottom: 1px solid #eee; }
        .statistics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
        .stat-item { background: #f9f9f9; padding: 10px; border-radius: 3px; }
        .regression { background-color: #ffebee; }
        .improvement { background-color: #e8f5e8; }
        .chart { margin: 10px 0; }
    </style>
</head>
<body>
    <div class="header">
        <h1>WebAssembly 性能基准测试报告</h1>
        <p>生成时间: ${new Date().toLocaleString()}</p>
        <p>测试环境: ${navigator.userAgent}</p>
    </div>
    
    ${Object.entries(results).map(([suiteName, suiteResults]) => `
        <div class="suite">
            <div class="suite-header">${suiteName}</div>
            ${this.generateSuiteHTML(suiteResults, comparison?.[suiteName])}
        </div>
    `).join('')}
    
    ${comparison ? this.generateComparisonHTML(comparison) : ''}
</body>
</html>`;
        
        return html;
    }
    
    generateSuiteHTML(suiteResults, suiteComparison) {
        if (suiteResults.error) {
            return `<div class="test-result">错误: ${suiteResults.error}</div>`;
        }
        
        return Object.entries(suiteResults)
            .filter(([key]) => key !== 'timestamp' && key !== 'environment')
            .map(([testName, testResult]) => {
                const comparisonData = suiteComparison?.[testName];
                const cssClass = comparisonData?.isRegression ? 'regression' : 
                                comparisonData?.isImprovement ? 'improvement' : '';
                
                return `
                <div class="test-result ${cssClass}">
                    <h3>${testName}</h3>
                    ${testResult.statistics ? this.generateStatisticsHTML(testResult.statistics) : ''}
                    ${comparisonData ? this.generateComparisonItemHTML(comparisonData) : ''}
                </div>`;
            }).join('');
    }
    
    generateStatisticsHTML(stats) {
        return `
        <div class="statistics">
            <div class="stat-item">
                <strong>平均值</strong><br>
                ${stats.mean.toFixed(2)}ms
            </div>
            <div class="stat-item">
                <strong>中位数</strong><br>
                ${stats.median.toFixed(2)}ms
            </div>
            <div class="stat-item">
                <strong>最小值</strong><br>
                ${stats.min.toFixed(2)}ms
            </div>
            <div class="stat-item">
                <strong>最大值</strong><br>
                ${stats.max.toFixed(2)}ms
            </div>
            <div class="stat-item">
                <strong>标准差</strong><br>
                ${stats.standardDeviation.toFixed(2)}ms
            </div>
            <div class="stat-item">
                <strong>样本数</strong><br>
                ${stats.count}
            </div>
        </div>`;
    }
    
    generateComparisonItemHTML(comparison) {
        const changeSign = comparison.changePercent >= 0 ? '+' : '';
        const changeColor = comparison.isRegression ? 'red' : 
                           comparison.isImprovement ? 'green' : 'black';
        
        return `
        <div style="margin-top: 10px; padding: 10px; background: #f0f0f0; border-radius: 3px;">
            <strong>与基线比较:</strong>
            <span style="color: ${changeColor};">
                ${changeSign}${comparison.changePercent.toFixed(2)}% 
                (${comparison.current.toFixed(2)}ms vs ${comparison.baseline.toFixed(2)}ms)
            </span>
            <br>
            <small>统计显著性: ${comparison.significance}</small>
        </div>`;
    }
    
    generateComparisonHTML(comparison) {
        return `
        <div class="suite">
            <div class="suite-header">性能对比总结</div>
            <div class="test-result">
                ${Object.entries(comparison).map(([suiteName, suiteComparison]) => `
                    <h3>${suiteName}</h3>
                    ${Object.entries(suiteComparison).map(([testName, comp]) => `
                        <div>${testName}: ${comp.changePercent >= 0 ? '+' : ''}${comp.changePercent.toFixed(2)}%</div>
                    `).join('')}
                `).join('')}
            </div>
        </div>`;
    }
}

// 使用示例
const benchmarkManager = new BenchmarkSuiteManager();

// 注册各种基准测试套件
benchmarkManager.registerSuite('arithmetic', new ArithmeticBenchmarkRunner());
benchmarkManager.registerSuite('memory', new MemoryBenchmarkSuite());
benchmarkManager.registerSuite('dom', new DOMBenchmarkSuite());
benchmarkManager.registerSuite('network', new NetworkBenchmarkSuite());
benchmarkManager.registerSuite('image', new ImageProcessingBenchmarks());

// 运行完整的基准测试
async function runCompleteBenchmark() {
    try {
        console.log('开始运行完整基准测试套件...');
        const results = await benchmarkManager.runAllSuites();
        
        // 生成报告
        const htmlReport = benchmarkManager.generateHTMLReport(results);
        
        // 保存报告
        const blob = new Blob([htmlReport], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `benchmark-report-${Date.now()}.html`;
        a.click();
        
        console.log('基准测试完成，报告已生成');
        return results;
    } catch (error) {
        console.error('基准测试失败:', error);
        throw error;
    }
}

总结

本附录全面介绍了 WebAssembly 性能基准测试的方方面面，从基础的测试方法论到高级的优化策略。通过系统性的性能测试和分析，开发者可以：

1. 建立科学的测试方法 - 使用统计学原理确保测试结果的可靠性
2. 全面评估性能表现 - 覆盖计算、内存、I/O、图形等各个方面
3. 识别性能瓶颈 - 通过专业的分析工具定位问题根源
4. 实施优化策略 - 基于数据驱动的方法进行性能改进
5. 持续监控性能 - 在生产环境中维持应用的最佳性能

记住，性能优化是一个持续的过程。定期运行基准测试，监控性能趋势，并根据实际使用场景调整优化策略，才能确保 WebAssembly 应用始终保持优异的性能表现。

附录

TODO: 待完成内容