Wasm编译任务阻塞浏览器主线程，如何实现实时输出与多线程运行？

方案一：使用Web Worker隔离Wasm执行线程 #

Web Worker能让Wasm在独立的后台线程运行，彻底避免阻塞主线程，进度消息通过线程间的消息传递实时同步到UI。

步骤1：调整Rust代码，改用消息传递输出进度 #

不再直接调用JS的out函数，而是通过postMessage向主线程发送进度信息：

use js_sys::Function;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn compile(input: String) {
    // 获取Worker环境的postMessage函数
    let post_message = js_sys::global()
        .get("postMessage")
        .unwrap()
        .dyn_into::<Function>()
        .unwrap();

    // 编译过程中发送进度
    post_message.call1(&JsValue::NULL, &"正在解析输入代码...".into()).unwrap();
    // 执行解析逻辑
    // ...

    post_message.call1(&JsValue::NULL, &"AST生成完成...".into()).unwrap();
    // 执行AST处理逻辑
    // ...

    post_message.call1(&JsValue::NULL, &"编译完成！".into()).unwrap();
}

步骤2：创建Worker脚本加载Wasm #

新建compiler.worker.js，负责初始化Wasm并接收主线程的编译请求：

import init, { compile } from './compiler_wasm.js';

async function initWasm() {
    await init();
    // 接收主线程的编译指令
    self.onmessage = (e) => {
        compile(e.data);
    };
}

initWasm();

步骤3：主线程UI交互逻辑 #

主线程创建Worker实例，接收进度消息并更新UI：

const progressElement = document.getElementById('progress');
const worker = new Worker('compiler.worker.js');

// 接收Worker发来的进度消息
worker.onmessage = (e) => {
    progressElement.textContent += `${e.data}\n`;
};

// 触发编译（传入大输入内容）
worker.postMessage(largeInputContent);

方案二：分块执行编译任务，主动让出主线程 #

如果不想引入Worker，可以将编译逻辑拆分为多个独立的小步骤，每执行完一步就通过requestAnimationFrame让出主线程，让UI有机会更新。

步骤1：Rust侧实现可分步执行的编译器状态机 #

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct Compiler {
    input: String,
    current_step: usize,
    total_steps: usize,
}

#[wasm_bindgen]
impl Compiler {
    #[wasm_bindgen(constructor)]
    pub fn new(input: String) -> Self {
        Compiler {
            input,
            current_step: 0,
            total_steps: 5, // 根据实际编译流程调整步骤数
        }
    }

    // 执行下一步编译，返回当前进度信息，None表示编译完成
    pub fn run_next_step(&mut self) -> Option<String> {
        match self.current_step {
            0 => {
                self.current_step += 1;
                Some("正在解析代码...".into())
                // 此处添加解析逻辑
            }
            1 => {
                self.current_step += 1;
                Some("生成抽象语法树完成...".into())
                // 此处添加AST生成逻辑
            }
            2 => {
                self.current_step += 1;
                Some("执行语义分析...".into())
                // 此处添加语义分析逻辑
            }
            3 => {
                self.current_step += 1;
                Some("生成中间代码...".into())
                // 此处添加中间代码生成逻辑
            }
            4 => {
                self.current_step += 1;
                Some("编译完成！".into())
                // 此处添加最终代码生成逻辑
            }
            _ => None,
        }
    }

    pub fn is_completed(&self) -> bool {
        self.current_step >= self.total_steps
    }
}

步骤2：JS侧循环调用分步编译 #

import init, { Compiler } from './compiler_wasm.js';

async function startCompile(input) {
    await init();
    const compiler = new Compiler(input);
    const progressElement = document.getElementById('progress');

    function executeNextStep() {
        const progressMsg = compiler.run_next_step();
        if (progressMsg) {
            progressElement.textContent += `${progressMsg}\n`;
            if (!compiler.is_completed()) {
                // 让出主线程，等待UI更新后再执行下一步
                requestAnimationFrame(executeNextStep);
            }
        }
    }

    executeNextStep();
}

// 触发编译
startCompile(largeInputContent);

注意事项 #

• 避免频繁的JS-Wasm跨边界同步调用，这类调用会增加性能开销，且容易阻塞主线程，优先用消息传递或分步执行的方式。
• 使用Worker时，若传递大体积数据，可采用Transferable对象（如ArrayBuffer）避免数据复制，提升传输效率。

内容的提问来源于stack exchange，提问作者Joona