Accéder au DOM dans WebAssembly

11

J'ai récemment commencé à utiliser WebAssembly pour certains de mes projets. Je fais cela parce que j'ai entendu que Wasm est plus rapide que javaScript.
Quand j'ai commencé mon premier projet Wasm, j'ai réalisé que je ne savais pas comment manipuler le DOM en C ++.
Existe-t-il un moyen de le faire en utilisant Wasm?

webassembly

— SherylHohman
source

La manipulation du DOM est la moitié du voyage, vous devez également rappeler l'assembly Web à partir de JavaScript.

— amirouche

À moins que les performances de vos scripts ne comptent vraiment, je considérerais de rester avec JavaScript. La moitié des sites Web qui utilisent l'assemblage Web semblent l' utiliser à des fins malveillantes , donc certains utilisateurs essaient déjà de désactiver l'assemblage Web dans leurs navigateurs.

— mzuther

1

J'ai récemment commencé à utiliser Web Assembly pour certains de mes projets. Je fais cela parce que j'ai entendu dire que le wasm est plus rapide que le javascript.

WebAssembly est plus rapide que JavaScript, mais uniquement pour certains cas d'utilisation. Avec WebAssembly, votre navigateur doit faire moins de travail pour télécharger et compiler votre code, ce qui accélère le démarrage. Cependant, lorsque les performances d'exécution de WebAssembly ne sont généralement que 2 à 3 fois plus rapides que JavaScript. Voir l'article suivant pour une comparaison très bonne et pratique:

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

Cependant, WebAssembly n'a pas d'accès direct DOM, donc malgré ses performances supérieures, vous pouvez constater qu'il est plus lent que JavaScript pour votre cas d'utilisation en raison de la surcharge d'E / S supplémentaire.

Pour cette raison, les utilisateurs rencontrent actuellement le plus de succès avec WebAssembly pour les tâches algorithmiques / intensives en calcul.

j'ai réalisé que je ne savais pas comment manipuler le dom en c ++. Existe-t-il un moyen de le faire en utilisant le wasm?

Pour manipuler le DOM, vous devez le faire via l'hôte JavaScript - votre module WebAssembly doit envoyer des messages à JavaScript pour lui demander de manipuler le DOM en son nom.

Comme il s'agit d'un défi assez courant, il existe divers projets communautaires qui ont des solutions au problème. Comme vous utilisez C ++, celui-ci pourrait vous intéresser:

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

À l'avenir, cela deviendra plus facile, des propositions telles que les types d'interface facilitent l'interopérabilité avec l'environnement hôte et pourraient permettre aux API Web d'être appelées directement à partir de WebAssembly.

— ColinE
source

1

Malheureusement, le DOM n'est accessible que dans le thread JavaScript principal du navigateur. Les modules Service Workers, Web Workers et Web Assembly n'auraient pas accès DOM. La manipulation la plus proche que vous obtiendrez de WASM est de manipuler des objets d'état qui sont passés à et rendus par le thread principal avec des composants d'interface utilisateur basés sur l'état comme Preact / React.

La sérialisation JSON est le plus souvent utilisée pour passer l'état avec postMessage()ou les canaux de diffusion . Les paquets binaires ou les objets binaires peuvent être utilisés avec TransferrableArrayBuffers pour des messages plus performants qui évitent la surcharge de sérialisation / désérialisation JSON.

— AnthumChris
source

"Malheureusement, le DOM n'est accessible que dans le thread JavaScript principal du navigateur" - bien que cela soit vrai, ce n'est pas la raison pour laquelle WebAssembly ne peut pas interagir avec le DOM.

— ColinE