WebAssembly(Wasm)在浏览器的运行机制及与JavaScript异步交互问题

一、Wasm二进制文件的执行主体 #

Wasm二进制文件是由JS引擎执行的，但JS引擎会为Wasm配备独立的专用执行模块（比如V8引擎中的Wasm编译器与虚拟机、Firefox SpiderMonkey的Wasm执行组件），并非和JS代码共用同一执行流水线。这些模块会将Wasm二进制编译为接近原生的机器码执行，兼顾性能与安全，但整体仍属于JS引擎的一部分，和JS代码共享浏览器的同一运行时环境。

二、异步JS与Wasm的交互逻辑 #

1. 调用栈与事件队列的共享规则 #

JS和Wasm共享同一个调用栈与事件队列，这是浏览器单线程事件循环的核心约束：

• 当JS调用导出的Wasm函数时，Wasm函数会被压入当前的JS调用栈，执行过程中调用导入的JS函数（无论同步还是异步），JS函数同样会进入这个共享栈。
• 所有异步任务的回调都会被送入同一个JS任务队列，等待调用栈清空后由事件循环调度执行。

2. 异步函数调用的具体执行流程 #

针对你给出的示例代码：
Wasm模块代码：

(import "env" "async_js"
(func $async_js (param i32) (result i32))) 

(func $fnc (result i32)   
  (call $async_js (i32.const 1))
  ;;  other code here  
)

JS调用代码：

wasm.instance.exports.fnc()

执行步骤如下：

1. 调用wasm.instance.exports.fnc()后，Wasm函数$fnc被压入共享调用栈，开始执行Wasm指令。
2. 当执行到(call $async_js (i32.const 1))时，导入的JS异步函数async_js被压入调用栈并执行。
3. async_js内部触发异步操作（如定时器、网络请求）时，会将回调函数注册到JS任务队列，随后自身从调用栈弹出，回到Wasm的$fnc继续执行剩余代码。
4. 当$fnc执行完毕并从调用栈弹出后，浏览器事件循环开始处理任务队列中的回调，此时回调函数被压入调用栈执行，逻辑和普通JS异步回调完全一致。

3. Wasm与JS的切换实现 #

浏览器JS引擎会在Wasm执行模块与JS执行模块之间维护高效的上下文切换机制：

• 当Wasm调用JS函数时，引擎会保存当前Wasm的执行上下文（包括指令指针、寄存器状态、栈帧位置等），切换到JS执行模式；JS函数执行完成后，再恢复Wasm的上下文，继续执行剩余的Wasm指令。
• 这种切换是引擎内部优化过的轻量级操作，不会产生显著的性能开销。

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