Accedi al DOM in WebAssembly

11

Di recente ho iniziato a utilizzare WebAssembly per alcuni dei miei progetti. Lo sto facendo perché ho sentito che Wasm è più veloce di javaScript.
Quando ho effettivamente iniziato il mio primo progetto Wasm, mi sono reso conto che non sapevo come manipolare il DOM in C ++.
C'è un modo per farlo usando Wasm?

webassembly

— SherylHohman
fonte

Manipolare il DOM è metà del viaggio, è inoltre necessario richiamare l'assembly Web da JavaScript.

— amirouche

A meno che le prestazioni dei tuoi script non contino davvero, prenderei in considerazione l'idea di utilizzare JavaScript. La metà dei siti Web che utilizzano l'assemblaggio Web sembra utilizzarlo per scopi dannosi , quindi alcuni utenti già provano a disabilitare l'assemblaggio Web nei propri browser.

— mzuther,

1

Di recente ho iniziato a utilizzare Web Assembly per alcuni dei miei progetti. Lo sto facendo perché ho sentito che wasm è più veloce di javascript.

WebAssembly è più veloce di JavaScript, ma solo per alcuni casi d'uso. Con WebAssembly il tuo browser deve fare meno lavoro per scaricare e compilare il codice, garantendo tempi di avvio più rapidi. Tuttavia, quando le prestazioni di runtime di WebAssembly sono in genere solo 2-3 volte più veloci di JavaScript. Vedi il seguente articolo per un confronto molto buono e pratico:

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

Tuttavia, WebAssembly non ha accesso diretto al DOM, quindi nonostante le sue prestazioni superiori, potresti scoprire che è più lento di JavaScript per il tuo caso d'uso a causa di un sovraccarico di I / O aggiuntivo.

Per questo motivo, attualmente le persone stanno riscontrando il maggior successo con WebAssembly per attività ad alta intensità di algoritmo / calcolo.

mi sono reso conto che non sapevo come manipolare il dom in c ++. C'è un modo per farlo usando wasm?

Per manipolare il DOM devi farlo tramite l'host JavaScript: il tuo modulo WebAssembly deve inviare messaggi a JavaScript "chiedendogli" di manipolare il DOM per suo conto.

Poiché questa è una sfida piuttosto comune, ci sono vari progetti di comunità che hanno soluzioni al problema. Dato che stai usando C ++, questo potrebbe interessarti:

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

In futuro, ciò sarà più facile, proposte come Tipi di interfaccia stanno rendendo più semplice l'interoperabilità con l'ambiente host e potrebbero consentire alle API Web di essere chiamate direttamente da WebAssembly.

— Coline
fonte

1

Sfortunatamente, il DOM è accessibile solo all'interno del thread JavaScript principale del browser. I moduli Service Worker, Web Workers e Web Assembly non avrebbero accesso al DOM. La manipolazione più vicina che otterrai da WASM è manipolare gli oggetti di stato che vengono passati e resi dal thread principale con componenti dell'interfaccia utente basati sullo stato come Preact / React.

La serializzazione JSON viene spesso utilizzata per passare lo stato con postMessage()o canali di trasmissione . Bitpacking o oggetti binari potrebbero essere utilizzati con TransferrableArrayBuffer per messaggi più performanti che evitano il sovraccarico di serializzazione / deserializzazione JSON.

— AnthumChris
fonte

"Sfortunatamente, il DOM è accessibile solo all'interno del thread JavaScript principale del browser" - sebbene ciò sia vero, non è il motivo per cui WebAssembly non può interagire con il DOM.

— ColinE