Greifen Sie in WebAssembly auf das DOM zu

10

Ich habe kürzlich begonnen, WebAssembly für einige meiner Projekte zu verwenden. Ich mache das, weil ich gehört habe, dass Wasm schneller ist als JavaScript.
Als ich mein erstes Wasm-Projekt startete, stellte ich fest, dass ich nicht wusste, wie ich das DOM in C ++ manipulieren sollte.
Gibt es eine Möglichkeit, dies mit Wasm zu tun?

webassembly SherylHohman
quelle
Das Manipulieren des DOM ist die halbe Miete. Sie müssen auch die Webassembly über JavaScript zurückrufen.
Amirouche
Wenn die Leistung Ihrer Skripte nicht wirklich wichtig ist, würde ich in Betracht ziehen, bei JavaScript zu bleiben. Die Hälfte der Websites, die Web Assembly verwenden, scheinen diese für böswillige Zwecke zu verwenden . Einige Benutzer versuchen daher bereits, Web Assembly in ihren Browsern zu deaktivieren.
Mzuther

Antworten:

1

Ich habe kürzlich begonnen, Web Assembly für einige meiner Projekte zu verwenden. Ich mache das, weil ich gehört habe, dass wasm schneller ist als Javascript.

WebAssembly ist schneller als JavaScript, jedoch nur für bestimmte Anwendungsfälle. Mit WebAssembly muss Ihr Browser weniger Arbeit leisten, um Ihren Code herunterzuladen und zu kompilieren, was die Startzeiten verkürzt. Wenn die Laufzeitleistung von WebAssembly jedoch normalerweise nur zwei- bis dreimal schneller ist als die von JavaScript. Im folgenden Artikel finden Sie einen sehr guten und praktischen Vergleich:

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

WebAssembly hat jedoch keinen direkten DOM-Zugriff. Trotz seiner überlegenen Leistung stellen Sie möglicherweise fest, dass es aufgrund des zusätzlichen E / A-Overheads für Ihren Anwendungsfall langsamer als JavaScript ist.

Aus diesem Grund sind WebAssembly derzeit am erfolgreichsten für algorithmische / rechenintensive Aufgaben.

Ich erkannte, dass ich nicht wusste, wie man den Dom in C ++ manipuliert. Gibt es eine Möglichkeit, dies mit wasm zu tun?

Um das DOM zu manipulieren, müssen Sie dies über den JavaScript-Host tun. Ihr WebAssembly-Modul muss Nachrichten an JavaScript senden und es bitten, das DOM in seinem Namen zu manipulieren.

Da dies eine weit verbreitete Herausforderung ist, gibt es verschiedene Community-Projekte, die Lösungen für das Problem bieten. Wenn Sie C ++ verwenden, könnte dieses für Sie von Interesse sein:

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

In Zukunft wird dies einfacher. Vorschläge wie Schnittstellentypen erleichtern die Interaktion mit der Hostumgebung und können den direkten Aufruf von Web-APIs über WebAssembly ermöglichen.

ColinE
quelle
1

Leider kann auf das DOM nur im Haupt-JavaScript-Thread des Browsers zugegriffen werden. Service Worker-, Web Worker- und Web Assembly-Module hätten keinen DOM-Zugriff. Die nächste Manipulation, die Sie von WASM erhalten, besteht darin, Statusobjekte, die an den Hauptthread übergeben und von diesem gerendert werden, mit zustandsbasierten UI-Komponenten wie Preact / React zu bearbeiten .

Die JSON-Serialisierung wird am häufigsten verwendet, um den Status mit postMessage()oder Broadcast-Kanälen zu übergeben . Bitpacking- oder Binärobjekte können mit TransferrableArrayBuffers für leistungsfähigere Nachrichten verwendet werden, die den Aufwand für die JSON-Serialisierung / Deserialisierung vermeiden.

AnthumChris
quelle
"Leider kann auf das DOM nur innerhalb des JavaScript-Hauptthreads des Browsers zugegriffen werden" - dies ist zwar richtig, aber nicht der Grund, warum WebAssembly nicht mit dem DOM interagieren kann.
ColinE