在 WebAssembly 中访问 DOM

Question

我最近开始在我的一些项目中使用 WebAssembly。我这样做是因为我听说 Wasm 比 javaScript 快。
当我真正开始我的第一个 Wasm 项目时，我意识到我不知道如何在 C++ 中操作 DOM。
有没有办法使用 Wasm 来做到这一点？

Answer 1

我最近开始在我的一些项目中使用 Web Assembly。我这样做是因为我听说 wasm 比 javascript 快。

WebAssembly 比 JavaScript 快，但仅适用于某些用例。使用 WebAssembly，您的浏览器可以减少下载和编译代码的工作量，从而加快启动速度。但是，WebAssembly 的运行时性能通常仅比 JavaScript 快 2 到 3 倍。看下面的文章，很好很实用的对比：

https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/

然而，WebAssembly 没有直接的 DOM 访问，因此尽管它具有卓越的性能，但由于额外的 I/O 开销，您可能会发现它在您的用例中比 JavaScript 慢。

出于这个原因，目前人们发现 WebAssembly 在算法/计算密集型任务方面取得了最大的成功。

我意识到我不知道如何在 C++ 中操作 dom。有没有办法使用 wasm 做到这一点？

为了操作 DOM，您必须通过 JavaScript 主机执行此操作 - 您的 WebAssembly 模块必须向 JavaScript 发送消息“要求”它代表其操作 DOM。

由于这是一个相当普遍的挑战，因此有各种社区项目可以解决该问题。当您使用 C++ 时，您可能会对此感兴趣：

https://github.com/mbasso/asm-dom

将来，这将变得更容易，诸如接口类型之类的提议使与主机环境的互操作变得更容易，并且可以允许直接从 WebAssembly 调用 Web API。

Answer 2

不幸的是，DOM 只能在浏览器的主 JavaScript 线程内访问。Service Workers、Web Workers 和 Web Assembly 模块没有 DOM 访问权限。您从 WASM 获得的最接近的操作是使用Preact /React等基于状态的 UI 组件来操作传递到主线程并由主线程渲染的状态对象。

JSON 序列化最常用于通过postMessage()广播通道传递状态。位打包或二进制对象可以与 ArrayBuffers 一起使用，Transferrable以获得更高性能的消息，从而避免 JSON 序列化/反序列化开销。