在WebAssembly中访问DOM


10

我最近开始对某些项目使用WebAssembly。我这样做是因为听说Wasm比javaScript快。
当我实际上开始我的第一个Wasm项目时,我意识到我不知道如何在C ++中操作DOM。
有什么办法可以使用Wasm做到这一点吗?


操纵DOM只是成功的一半,您还需要从JavaScript回调Web程序集。
amirouche

除非您的脚本的性能真的很重要,否则我会考虑坚持使用JavaScript。一半使用Web程序集的网站似乎出于恶意目的使用它,因此某些用户已经尝试在其浏览器中禁用Web程序集。
mzuther

Answers:


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。


1

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

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


“很遗憾,只能在浏览器的主JavaScript线程中访问DOM”-的确如此,这不是WebAssembly无法与DOM交互的原因。
ColinE
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.