Acesse o DOM no WebAssembly

11

Recentemente, comecei a usar o WebAssembly em alguns de meus projetos. Estou fazendo isso porque ouvi dizer que o Wasm é mais rápido que o javaScript.
Quando realmente iniciei meu primeiro projeto Wasm, percebi que não sabia como manipular o DOM em C ++.
Existe alguma maneira de fazer isso usando Wasm?

webassembly SherylHohman
fonte
Manipular o DOM é metade da jornada, você também precisa retornar o assembly da Web a partir do JavaScript.
amirouche 14/01
A menos que o desempenho de seus scripts realmente importe, eu consideraria manter o JavaScript. Metade dos sites que usam o assembly da Web parece usá-lo para fins maliciosos ; portanto, alguns usuários já tentam desativar o assembly da Web em seus navegadores.
mzuther 27/01

Respostas:

1

Recentemente, comecei a usar o Web Assembly para alguns dos meus projetos. Estou fazendo isso porque ouvi dizer que o wasm é mais rápido que o javascript.

O WebAssembly é mais rápido que o JavaScript, mas apenas para certos casos de uso. Com o WebAssembly, seu navegador precisa fazer menos trabalho para baixar e compilar seu código, proporcionando tempos de inicialização mais rápidos. No entanto, quando o desempenho em tempo de execução do WebAssembly normalmente é apenas 2 a 3 vezes mais rápido que o JavaScript. Veja o artigo a seguir para uma comparação muito boa e prática:

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

No entanto, o WebAssembly não tem acesso DOM direto; portanto, apesar de seu desempenho superior, você pode achar que é mais lento que o JavaScript para o seu caso de uso devido à sobrecarga extra de E / S.

Por esse motivo, atualmente as pessoas estão obtendo mais sucesso com o WebAssembly para tarefas intensivas em algoritmos / computação.

eu percebi que eu não sabia como manipular o dom em c ++. Existe alguma maneira de fazer isso usando wasm?

Para manipular o DOM, você deve fazer isso através do host JavaScript - seu módulo WebAssembly precisa enviar mensagens para o JavaScript 'pedindo' para manipular o DOM em seu nome.

Como esse é um desafio bastante comum, existem vários projetos comunitários que têm soluções para o problema. Como você está usando C ++, este pode ser do seu interesse:

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

No futuro, isso ficará mais fácil, propostas como Tipos de Interface estão facilitando a interoperabilidade com o ambiente host e podem permitir que APIs da Web sejam chamadas diretamente do WebAssembly.

ColinE
fonte
1

Infelizmente, o DOM só pode ser acessado no principal thread JavaScript do navegador. Os módulos Service Workers, Web Workers e Web Assembly não teriam acesso DOM. A manipulação mais próxima que você obterá do WASM é manipular objetos de estado que são passados ​​e renderizados pelo encadeamento principal com componentes de interface do usuário baseados em estado como Preact / React.

A serialização JSON é usada com mais freqüência para passar o estado com postMessage()ou canais de transmissão . Objetos binários ou de empacotamento de bits podem ser usados ​​com TransferrableArrayBuffers para obter mais mensagens de desempenho que evitam a sobrecarga de serialização / desserialização JSON.

AnthumChris
fonte
"Infelizmente, o DOM só pode ser acessado no principal encadeamento JavaScript do navegador" - embora isso seja verdade, não é a razão pela qual o WebAssembly não pode interagir com o DOM.
ColinE 14/01