在 WebAssembly 中访问 DOM答案

【问题标题】：Access the DOM in WebAssembly在 WebAssembly 中访问 DOM
【发布时间】：2020-04-29 16:33:12
【问题描述】：

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

【问题讨论】：

操作 DOM 是成功的一半，你还需要从 JavaScript 回调 Web 程序集。
除非脚本的性能真的很重要，否则我会考虑坚持使用 JavaScript。使用 Web Assembly 的网站有一半似乎是use it for malicious purposes，因此一些用户已经尝试在他们的浏览器中禁用 Web Assembly。
@mzuther 好像 JS 在这方面有什么不同？
@eduardog3000 虽然绝不是这方面的专家，但我确实认为用户是否完全禁用 Web 程序集（并且可能在事后忘记它）或使用 JS 阻止程序可以在某些网站上轻松查看和禁用。
从安全的角度来看，JavaScript 和 wasm 之间几乎没有区别。但是 wasm 可能会被恶意使用，不是因为 WASM 的安全性较低，而是因为它在某些事情上速度更快。所以如果你想挖掘数字货币，去 WASM 会为你带来更多的钱。

标签： webassembly

【解决方案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

在未来，这将变得更容易，Interface Types 等提议使与主机环境的互操作变得更容易，并且可以允许直接从 WebAssembly 调用 Web API。

【讨论】：

“通常只快 2 到 3 倍”...仅...

【解决方案2】：

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

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

【讨论】：

“不幸的是，DOM 只能在浏览器的主 JavaScript 线程中访问”——虽然确实如此，但这并不是 WebAssembly 无法与 DOM 交互的原因。
wasm 无法与 DOM 交互的原因是什么？
@ColinE wasm 无法与 DOM 交互的原因是什么？

【解决方案3】：

不，但是有 WASM 提案正在为此工作。

【讨论】：