WebAssembly性能优化实践：突破Web应用性能瓶颈

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// JavaScript vs WebAssembly 性能对比

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

// WebAssembly (Rust编译)
// #[no_mangle]
// pub extern "C" fn fibonacci(n: i32) -> i32 {
//     match n {
//         0 => 0,
//         1 => 1,
//         _ => fibonacci(n - 1) + fibonacci(n - 2),
//     }
// }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

class Benchmark {
    constructor(name) {
        this.name = name;
    }

    async run(fn, iterations = 1000) {
        // 预热
        for (let i = 0; i < 100; i++) {
            fn();
        }

        // 测量
        const start = performance.now();
        for (let i = 0; i < iterations; i++) {
            fn();
        }
        const end = performance.now();

        const totalTime = end - start;
        const avgTime = totalTime / iterations;

        console.log(`${this.name}:`);
        console.log(`  总时间: ${totalTime.toFixed(2)}ms`);
        console.log(`  平均: ${avgTime.toFixed(4)}ms`);
        console.log(`  吞吐量: ${(1000 / avgTime).toFixed(0)} ops/s`);

        return {
            totalTime,
            avgTime,
            throughput: 1000 / avgTime
        };
    }
}

// 使用示例
(async () => {
    const jsBenchmark = new Benchmark('JavaScript Fibonacci');
    await jsBenchmark.run(() => fibonacci(35));

    const wasmBenchmark = new Benchmark('WebAssembly Fibonacci');
    await wasmBenchmark.run(() => wasm.exports.fibonacci(35));
})();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// Rust Wasm 内存优化示例
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct MemoryPool {
    buffer: Vec<u8>,
    chunk_size: usize,
    free_list: Vec<usize>,
}

#[wasm_bindgen]
impl MemoryPool {
    #[wasm_bindgen(constructor)]
    pub fn new(capacity: usize, chunk_size: usize) -> Self {
        MemoryPool {
            buffer: vec![0; capacity],
            chunk_size,
            free_list: (0..capacity / chunk_size).collect(),
        }
    }

    pub fn allocate(&mut self) -> Option<usize> {
        self.free_list.pop().map(|index| index * self.chunk_size)
    }

    pub fn deallocate(&mut self, offset: usize) {
        let index = offset / self.chunk_size;
        self.free_list.push(index);
    }

    pub fn get_ptr(&mut self, offset: usize) -> *mut u8 {
        unsafe { self.buffer.as_mut_ptr().add(offset) }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

class WasmMemoryManager {
    constructor(wasmModule) {
        this.memory = wasmModule.exports.memory;
        this.buffer = new ArrayBuffer(this.memory.buffer.byteLength);
    }

    // 直接内存访问
    writeInt32(offset, value) {
        const view = new DataView(this.memory.buffer);
        view.setInt32(offset, value, true); // Little-endian
    }

    readInt32(offset) {
        const view = new DataView(this.memory.buffer);
        return view.getInt32(offset, true);
    }

    // 批量操作
    writeArray(offset, array) {
        const uint8Array = new Uint8Array(this.memory.buffer, offset);
        uint8Array.set(array);
    }

    readArray(offset, length) {
        const uint8Array = new Uint8Array(this.memory.buffer, offset, length);
        return new Uint8Array(uint8Array);
    }

    // 内存增长策略
    growIfNeeded(requiredBytes) {
        const pageSize = 65536; // 64KB
        const currentPages = this.memory.buffer.byteLength / pageSize;
        const requiredPages = Math.ceil(requiredBytes / pageSize);

        if (this.memory.buffer.byteLength < requiredBytes) {
            const growthPages = Math.max(
                requiredPages - currentPages,
                Math.ceil(currentPages * 0.5) // 增长50%
            );
            this.memory.grow(growthPages);
        }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Rust SIMD示例
use std::arch::wasm32::*;

#[no_mangle]
pub unsafe fn add_arrays_simd(a_ptr: *const f32, b_ptr: *const f32, c_ptr: *mut f32, len: usize) {
    const LANE_SIZE: usize = 4; // f32x4

    let mut i = 0;

    // SIMD处理主循环
    while i + LANE_SIZE <= len {
        let a = v128_load(a_ptr.add(i) as *const v128);
        let b = v128_load(b_ptr.add(i) as *const v128);
        let c = f32x4_add(a, b);
        v128_store(c_ptr.add(i) as *mut v128, c);
        i += LANE_SIZE;
    }

    // 处理剩余元素
    while i < len {
        *c_ptr.add(i) = *a_ptr.add(i) + *b_ptr.add(i);
        i += 1;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

class WasmSIMD {
    constructor(wasmModule) {
        this.wasm = wasmModule;
    }

    // 矢量加法
    vectorAdd(a, b) {
        if (a.length !== b.length) {
            throw new Error('Vector length mismatch');
        }

        const result = new Float32Array(a.length);

        // 检查SIMD支持
        if (this.wasm.exports.add_arrays_simd) {
            // 分配Wasm内存
            const aPtr = this._allocateArray(a);
            const bPtr = this._allocateArray(b);
            const cPtr = this._allocateArray(result.length);

            // 调用SIMD函数
            this.wasm.exports.add_arrays_simd(aPtr, bPtr, cPtr, a.length);

            // 读取结果
            const view = new Float32Array(
                this.wasm.exports.memory.buffer,
                cPtr,
                result.length
            );
            result.set(view);
        } else {
            // Fallback到普通加法
            for (let i = 0; i < a.length; i++) {
                result[i] = a[i] + b[i];
            }
        }

        return result;
    }

    _allocateArray(array) {
        const bytes = array.length * array.BYTES_PER_ELEMENT;
        const ptr = this.wasm.exports.malloc(bytes);
        const view = new Uint8Array(this.wasm.exports.memory.buffer, ptr, bytes);
        const source = new Uint8Array(array.buffer);
        view.set(source);
        return ptr;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

// wasm-worker.js
self.importScripts('wasm-module.js');

let wasmInstance = null;

self.onmessage = async (e) => {
    const { type, data } = e.data;

    if (type === 'init') {
        const module = await WebAssembly.compile(data.wasmBytes);
        wasmInstance = await WebAssembly.instantiate(module, data.imports);
        self.postMessage({ type: 'ready' });
    } else if (type === 'compute') {
        const result = wasmInstance.exports[data.function](...data.args);
        self.postMessage({ type: 'result', data: result });
    }
};

// 主线程
class WasmWorkerPool {
    constructor(workerCount, wasmModule) {
        this.workers = [];
        this.taskQueue = [];
        this.wasmModule = wasmModule;

        for (let i = 0; i < workerCount; i++) {
            this._createWorker();
        }
    }

    _createWorker() {
        const worker = new Worker('wasm-worker.js');

        worker.postMessage({
            type: 'init',
            data: { wasmBytes: this.wasmModule }
        });

        worker.onmessage = (e) => {
            const { type, data } = e.data;

            if (type === 'ready' && this.taskQueue.length > 0) {
                const task = this.taskQueue.shift();
                worker.postMessage({
                    type: 'compute',
                    data: task
                });
            } else if (type === 'result') {
                task.resolve(data);
            }
        };

        this.workers.push(worker);
    }

    async execute(functionName, ...args) {
        return new Promise((resolve) => {
            const task = { function: functionName, args, resolve };

            // 查找空闲worker
            const idleWorker = this.workers.find(w => !w.busy);
            if (idleWorker) {
                idleWorker.postMessage({ type: 'compute', data: task });
                idleWorker.busy = true;
            } else {
                this.taskQueue.push(task);
            }
        });
    }

    // 并行映射
    async parallelMap(array, fn) {
        const chunkSize = Math.ceil(array.length / this.workers.length);
        const chunks = [];

        for (let i = 0; i < array.length; i += chunkSize) {
            const chunk = array.slice(i, i + chunkSize);
            chunks.push(chunk);
        }

        const results = await Promise.all(
            chunks.map(chunk => this.execute('process_chunk', chunk))
        );

        return results.flat();
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

class ZeroCopyTransfer {
    constructor() {
        this.pendingTransfers = [];
    }

    // 零拷贝传输
    transferToWasm(array, wasmModule) {
        const bytes = array.length * array.BYTES_PER_ELEMENT;
        const ptr = wasmModule.exports.malloc(bytes);

        // 使用SharedArrayBuffer（如果支持）
        if (typeof SharedArrayBuffer !== 'undefined') {
            const sharedBuffer = new SharedArrayBuffer(bytes);
            const sharedArray = new array.constructor(sharedBuffer);
            sharedArray.set(array);

            return {
                ptr,
                buffer: sharedBuffer,
                transferable: []
            };
        }

        // Fallback: 使用transferable
        const buffer = array.buffer;
        this.pendingTransfers.push(ptr);
        return {
            ptr,
            buffer,
            transferable: [buffer]
        };
    }

    // 从Wasm接收数据
    receiveFromWasm(ptr, length, wasmModule) {
        const buffer = wasmModule.exports.memory.buffer;
        const offset = ptr;
        const uint8Array = new Uint8Array(buffer, offset, length);

        // 复制数据（如果需要transfer）
        const copy = new Uint8Array(length);
        copy.set(uint8Array);

        // 可选：标记内存可释放
        this.markForFree(ptr);

        return copy;
    }

    markForFree(ptr) {
        // 延迟释放策略
        setTimeout(() => {
            // wasmModule.exports.free(ptr);
        }, 0);
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

class WasmStreamProcessor extends TransformStream {
    constructor(wasmModule, processorFn) {
        super({
            transform: async (chunk, controller) => {
                // 写入Wasm内存
                const inputPtr = wasmModule.exports.malloc(chunk.length);
                const inputView = new Uint8Array(wasmModule.exports.memory.buffer);
                inputView.set(chunk, inputPtr);

                // 处理
                const outputPtr = wasmModule.exports[processorFn](inputPtr, chunk.length);

                // 读取结果
                const outputLength = wasmModule.exports.get_result_length(outputPtr);
                const outputView = new Uint8Array(wasmModule.exports.memory.buffer, outputPtr, outputLength);
                const result = new Uint8Array(outputLength);
                result.set(outputView);

                // 清理
                wasmModule.exports.free(inputPtr);
                wasmModule.exports.free(outputPtr);

                controller.enqueue(result);
            }
        });
    }
}

// 使用示例
async function processLargeFile(file) {
    const wasmModule = await loadWasmModule('processor.wasm');
    const processor = new WasmStreamProcessor(wasmModule, 'process_data');

    const stream = file.stream()
        .pipeThrough(processor);

    const reader = stream.getReader();
    const chunks = [];

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
    }

    return chunks;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# Rust优化配置
# .cargo/config.toml

[build]
target = "wasm32-unknown-unknown"

[target.wasm32-unknown-unknown]
rustflags = [
    "-C", "link-arg=-s",                    # 移除调试符号
    "-C", "link-arg=--import-memory",      # 导入内存
    "-C", "opt-level=s",                   # 优化大小
    "-C", "lto=fat",                       # 链接时优化
    "-C", "codegen-units=1",               # 单编译单元（更好优化）
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

class WasmModuleLoader {
    constructor() {
        this.modules = new Map();
        this.loading = new Map();
    }

    async load(moduleName, url) {
        // 缓存检查
        if (this.modules.has(moduleName)) {
            return this.modules.get(moduleName);
        }

        // 避免重复加载
        if (this.loading.has(moduleName)) {
            return this.loading.get(moduleName);
        }

        const promise = this._loadModule(moduleName, url);
        this.loading.set(moduleName, promise);

        const module = await promise;
        this.modules.set(moduleName, module);
        this.loading.delete(moduleName);

        return module;
    }

    async _loadModule(moduleName, url) {
        const response = await fetch(url);
        const buffer = await response.arrayBuffer();
        const module = await WebAssembly.compile(buffer);

        // 创建共享内存
        const memory = new WebAssembly.Memory({
            initial: 256,
            maximum: 32768,
            shared: true
        });

        const instance = await WebAssembly.instantiate(module, {
            env: { memory }
        });

        return instance;
    }

    // 按需加载功能模块
    async loadFeature(featureName) {
        const module = await this.load(
            featureName,
            `/wasm/${featureName}.wasm`
        );
        return module.exports;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

class WasmProfiler {
    constructor(wasmModule) {
        this.wasm = wasmModule;
        this.metrics = new Map();
    }

    wrapFunction(functionName) {
        const original = this.wasm.exports[functionName];

        if (!original) {
            throw new Error(`Function ${functionName} not found`);
        }

        return (...args) => {
            const start = performance.now();
            const memoryBefore = this._getMemoryUsage();

            const result = original.apply(this.wasm.exports, args);

            const end = performance.now();
            const memoryAfter = this._getMemoryUsage();

            this._recordMetric(functionName, {
                duration: end - start,
                memoryDelta: memoryAfter - memoryBefore,
                timestamp: Date.now()
            });

            return result;
        };
    }

    _getMemoryUsage() {
        const pages = this.wasm.exports.memory.buffer.byteLength / 65536;
        return pages;
    }

    _recordMetric(name, metric) {
        if (!this.metrics.has(name)) {
            this.metrics.set(name, []);
        }
        this.metrics.get(name).push(metric);
    }

    getStats(functionName) {
        const metrics = this.metrics.get(functionName);
        if (!metrics) return null;

        const durations = metrics.map(m => m.duration);
        const memoryDeltas = metrics.map(m => m.memoryDelta);

        return {
            count: metrics.length,
            avgDuration: durations.reduce((a, b) => a + b, 0) / durations.length,
            minDuration: Math.min(...durations),
            maxDuration: Math.max(...durations),
            avgMemoryDelta: memoryDeltas.reduce((a, b) => a + b, 0) / memoryDeltas.length
        };
    }

    report() {
        console.table(
            Array.from(this.metrics.keys()).map(name => ({
                function: name,
                ...this.getStats(name)
            }))
        );
    }
}