JavaScript系列（80）--WebAssembly 基础入门

WebAssembly 基础入门 ????

WebAssembly（简称Wasm）是一种低级的类汇编语言，它具有紧凑的二进制格式，能够以接近原生的性能在现代Web浏览器中运行。让我们深入了解这项革命性的技术。

WebAssembly 概述 ????

???? 小知识：WebAssembly 是一种低级的、二进制的指令格式，专为堆栈式虚拟机设计。它被设计为C/C++等高级语言的编译目标，使得这些语言编写的程序能够在Web平台上以接近原生的速度运行。

基础概念与工具链 ????️

// 1. 加载和实例化WebAssembly模块
async function loadWasmModule() {
    try {
        // 加载.wasm文件
        const response = await fetch('module.wasm');
        const bytes = await response.arrayBuffer();
        
        // 实例化模块
        const { instance } = await WebAssembly.instantiate(bytes);
        
        return instance.exports;
    } catch (error) {
        console.error('Failed to load WASM module:', error);
        throw error;
    }
}

// 2. 使用工具链编译C++代码
/* example.cpp
#include <emscripten/bind.h>

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

EMSCRIPTEN_BINDINGS(module) {
    emscripten::function("fibonacci", &fibonacci);
}
*/

// 编译命令
// emcc example.cpp -o example.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_fibonacci"]'

// 3. 内存管理工具
class WasmMemoryManager {
    constructor(initialPages = 1) {
        this.memory = new WebAssembly.Memory({
            initial: initialPages,
            maximum: 100
        });
        
        this.buffer = new Uint8Array(this.memory.buffer);
    }
    
    allocate(size) {
        // 简单的内存分配
        const ptr = this.currentPtr;
        this.currentPtr += size;
        return ptr;
    }
    
    free(ptr) {
        // 内存释放（简化版）
        // 实际应用中需要更复杂的内存管理
    }
    
    writeString(str) {
        const bytes = new TextEncoder().encode(str);
        const ptr = this.allocate(bytes.length + 1);
        
        this.buffer.set(bytes, ptr);
        this.buffer[ptr + bytes.length] = 0; // null terminator
        
        return ptr;
    }
    
    readString(ptr) {
        let end = ptr;
        while (this.buffer[end] !== 0) end++;
        
        return new TextDecoder().decode(
            this.buffer.slice(ptr, end)
        );
    }
}

性能优化技术 ⚡

// 1. SIMD操作
/* C++代码示例
#include <emscripten/bind.h>
#include <emmintrin.h>

void vectorAdd(float* a, float* b, float* result, int size) {
    for (int i = 0; i < size; i += 4) {
        __m128 va = _mm_load_ps(&a[i]);
        __m128 vb = _mm_load_ps(&b[i]);
        __m128 vr = _mm_add_ps(va, vb);
        _mm_store_ps(&result[i], vr);
    }
}
*/

// 2. 内存对齐
class AlignedMemory {
    constructor() {
        this.memory = new WebAssembly.Memory({
            initial: 1,
            maximum: 10,
            shared: true
        });
    }
    
    allocateAligned(size, alignment = 16) {
        const ptr = (this.currentPtr + alignment - 1) & ~(alignment - 1);
        this.currentPtr = ptr + size;
        return ptr;
    }
}

// 3. 并行计算
class ParallelComputation {
    constructor(wasmModule) {
        this.module = wasmModule;
        this.workers = [];
    }
    
    async initializeWorkers(count) {
        for (let i = 0; i < count; i++) {
            const worker = new Worker('wasm-worker.js');
            await this.initializeWorker(worker);
            this.workers.push(worker);
        }
    }
    
    async initializeWorker(worker) {
        const memory = new WebAssembly.Memory({
            initial: 1,
            maximum: 10,
            shared: true
        });
        
        worker.postMessage({
            type: 'init',
            memory,
            module: this.module
        });
    }
    
    computeParallel(data) {
        const chunkSize = Math.ceil(data.length / this.workers.length);
        
        return Promise.all(this.workers.map((worker, index) => {
            const start = index * chunkSize;
            const end = Math.min(start + chunkSize, data.length);
            
            return new Promise(resolve => {
                worker.onmessage = e => resolve(e.data);
                worker.postMessage({
                    type: 'compute',
                    data: data.slice(start, end)
                });
            });
        }));
    }
}

JavaScript集成 ????

// 1. 函数导出与调用
class WasmModule {
    constructor() {
        this.exports = null;
    }
    
    async initialize() {
        const response = await fetch('module.wasm');
        const bytes = await response.arrayBuffer();
        
        const importObject = {
            env: {
                memory: new WebAssembly.Memory({ initial: 10 }),
                log: console.log,
                performance_now: performance.now.bind(performance)
            }
        };
        
        const { instance } = await WebAssembly.instantiate(bytes, importObject);
        this.exports = instance.exports;
    }
    
    callFunction(name, ...args) {
        if (!this.exports) {
            throw new Error('Module not initialized');
        }
        
        if (typeof this.exports[name] !== 'function') {
            throw new Error(`Function ${name} not found`);
        }
        
        return this.exports[name](...args);
    }
}

// 2. 数据传输
class WasmDataTransfer {
    constructor(module) {
        this.module = module;
        this.memory = module.exports.memory;
    }
    
    writeArray(array) {
        const ptr = this.module.exports.allocate(array.length * 4);
        const view = new Float32Array(this.memory.buffer, ptr, array.length);
        view.set(array);
        return ptr;
    }
    
    readArray(ptr, length) {
        return new Float32Array(
            this.memory.buffer,
            ptr,
            length
        );
    }
    
    writeStruct(data) {
        // 假设结构体定义：struct Point { float x; float y; }
        const ptr = this.module.exports.allocate(8);
        const view = new DataView(this.memory.buffer, ptr);
        
        view.setFloat32(0, data.x, true);
        view.setFloat32(4, data.y, true);
        
        return ptr;
    }
    
    readStruct(ptr) {
        const view = new DataView(this.memory.buffer, ptr);
        
        return {
            x: view.getFloat32(0, true),
            y: view.getFloat32(4, true)
        };
    }
}

// 3. 异步操作
class AsyncWasmOperations {
    constructor(module) {
        this.module = module;
    }
    
    async processLargeData(data) {
        const chunkSize = 1024 * 1024; // 1MB
        const results = [];
        
        for (let i = 0; i < data.length; i += chunkSize) {
            const chunk = data.slice(i, i + chunkSize);
            
            // 让出主线程
            if (i % (chunkSize * 10) === 0) {
                await new Promise(resolve => setTimeout(resolve, 0));
            }
            
            const ptr = this.writeData(chunk);
            const result = this.module.exports.processChunk(ptr, chunk.length);
            results.push(result);
        }
        
        return results;
    }
}

实战应用示例 ????

// 1. 图像处理应用
class WasmImageProcessor {
    constructor() {
        this.module = null;
        this.initialize();
    }
    
    async initialize() {
        const module = await loadWasmModule('image_processor.wasm');
        this.module = module;
    }
    
    async processImage(imageData) {
        const { width, height, data } = imageData;
        
        // 分配内存
        const inputPtr = this.module.exports.allocate(data.length);
        const outputPtr = this.module.exports.allocate(data.length);
        
        // 复制数据
        new Uint8ClampedArray(this.module.exports.memory.buffer)
            .set(data, inputPtr);
        
        // 处理图像
        this.module.exports.processImage(
            inputPtr,
            outputPtr,
            width,
            height
        );
        
        // 读取结果
        const result = new Uint8ClampedArray(
            this.module.exports.memory.buffer,
            outputPtr,
            data.length
        );
        
        return new ImageData(result, width, height);
    }
}

// 2. 3D渲染引擎
class Wasm3DEngine {
    constructor() {
        this.module = null;
        this.memory = null;
        this.vertexBuffer = null;
    }
    
    async initialize() {
        const module = await loadWasmModule('3d_engine.wasm');
        this.module = module;
        this.memory = module.exports.memory;
        
        // 初始化顶点缓冲区
        this.vertexBuffer = new Float32Array(
            this.memory.buffer,
            module.exports.getVertexBufferPtr(),
            module.exports.getVertexBufferSize()
        );
    }
    
    render(scene) {
        // 更新场景数据
        this.updateSceneData(scene);
        
        // 执行渲染
        this.module.exports.render();
        
        // 获取渲染结果
        return this.getFramebuffer();
    }
}

// 3. 物理引擎
class WasmPhysicsEngine {
    constructor() {
        this.module = null;
        this.bodies = new Map();
    }
    
    async initialize() {
        const module = await loadWasmModule('physics.wasm');
        this.module = module;
        
        // 初始化物理世界
        this.module.exports.initWorld(9.81); // 重力加速度
    }
    
    addBody(body) {
        const ptr = this.module.exports.createBody(
            body.mass,
            body.position.x,
            body.position.y,
            body.position.z
        );
        
        this.bodies.set(body.id, ptr);
    }
    
    step(deltaTime) {
        this.module.exports.stepSimulation(deltaTime);
        
        // 更新所有物体的位置
        for (const [id, ptr] of this.bodies) {
            const pos = this.getBodyPosition(ptr);
            this.updateBodyPosition(id, pos);
        }
    }
}

调试与性能分析 ????

// 1. 调试工具
class WasmDebugger {
    constructor(module) {
        this.module = module;
        this.breakpoints = new Set();
    }
    
    addBreakpoint(location) {
        this.breakpoints.add(location);
    }
    
    async startDebugging() {
        const debug = await WebAssembly.debug(this.module);
        
        debug.onBreakpoint = location => {
            console.log(`Breakpoint hit at ${location}`);
            this.inspectState();
        };
    }
    
    inspectMemory(ptr, size) {
        const view = new DataView(this.module.exports.memory.buffer, ptr, size);
        console.log('Memory at', ptr, ':', view);
    }
}

// 2. 性能分析器
class WasmProfiler {
    constructor() {
        this.measurements = new Map();
    }
    
    startMeasure(name) {
        const start = performance.now();
        this.measurements.set(name, { start });