Отримайте доступ до DOM в WebAssembly

Нещодавно я почав використовувати WebAssembly для деяких своїх проектів. Я роблю це, тому що чув, що Wasm швидше, ніж javaScript.
Коли я насправді розпочав свій перший проект Wasm, я зрозумів, що не знаю, як маніпулювати DOM в C ++.
Чи можливо це зробити за допомогою Wasm?

Нещодавно я почав використовувати веб-збори для деяких своїх проектів. Я роблю це, тому що я чув, що wasm швидше, ніж JavaScript.

Веб-збирання швидше, ніж JavaScript, але лише для певних випадків використання. За допомогою WebAssembly вашому браузеру доводиться робити менше роботи для завантаження та компіляції вашого коду, що забезпечує швидший час запуску. Однак, коли виконання WebAssembly виконує, як правило, лише в 2 - 3 рази швидше, ніж JavaScript. Дивіться наступну статтю щодо дуже хорошого та практичного порівняння:

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

Однак WebAssembly не має прямого доступу до DOM, тому, незважаючи на свою покращену ефективність, ви можете виявити, що він працює повільніше, ніж JavaScript для вашого випадку використання через додаткові накладні витрати вводу / виводу.

З цієї причини в даний час люди досягають найбільшого успіху в WebAssembly для виконання алгоритмічних / обчислювальних завдань.

Я зрозумів, що я не знав, як маніпулювати домом у С ++. Чи можна це зробити за допомогою wasm?

Для того, щоб маніпулювати DOM, вам потрібно зробити це через хост JavaScript - ваш модуль WebAssembly повинен надсилати повідомлення в JavaScript, "просити" його маніпулювати DOM від свого імені.

Оскільки це досить поширений виклик, існують різні громадські проекти, які мають вирішення проблеми. Оскільки ви користуєтесь C ++, цей варіант може вас зацікавити:

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

Надалі це стане простішим, такі пропозиції, як типи інтерфейсу , спрощують взаємодію з хост-середовищем і можуть дозволити виклику веб-API безпосередньо з WebAssembly.

На жаль, доступ до DOM можна отримати лише в головному потоці JavaScript браузера. Сервісні працівники, веб-працівники та модулі веб-зборів не матимуть доступу DOM. Найближча маніпуляція, яку ви отримаєте від WASM, - це маніпулювання об'єктами стану, які передаються та передаються головним потоком з компонентами інтерфейсу на основі стану, як Preact / React.

Серіалізація JSON найчастіше використовується для передачі стану з каналамиpostMessage() або широкомовними каналами . Бітпакування або бінарні об'єкти можуть використовуватися з TransferrableArrayBuffers для більш ефективних повідомлень, які уникають накладних серіалізацій / десеріалізації JSON.