Wasm и JS: партнёры, а не конкуренты

Понимаем разделение труда между JavaScript и WebAssembly.

Граница Wasm/JS — JavaScript отвечает за страницу, события и сеть, а WebAssembly — за вычислительное ядро.

Почему не «или-или»

Соблазн думать, что новая быстрая технология вытеснит старую. Но WebAssembly изначально спроектирован так, чтобы жить рядом с JavaScript, а не вместо него. У этого есть техническая причина: на старте у Wasm вообще нет доступа к окружению браузера. Он не умеет сам нарисовать кнопку, открыть сетевое соединение или прочитать клик мыши. Всё это он делает через импортированные функции, которые ему передаёт JavaScript.

Кто за что отвечает

JavaScript	WebAssembly
DOM, разметка, стили	Математика, циклы, алгоритмы
События, клики, ввод	Обработка изображений, звука
Сеть (fetch), хранилище	Сжатие, шифрование, физика
Связь с экосистемой npm	Переносимое вычислительное ядро

Типичная архитектура приложения

Представим веб-редактор фотографий. Пользователь нажимает «Размыть» — это событие ловит JavaScript. JS берёт пиксели изображения и передаёт их в Wasm-модуль. Wasm быстро прогоняет фильтр размытия по миллионам пикселей и возвращает результат. JS забирает обработанные пиксели и рисует их на экране. Каждый делает то, что умеет лучше.

[Пользователь]
     |
     v
[JavaScript]  <-- ловит клик, рисует UI, работает с DOM
     |  передаёт пиксели
     v
[WebAssembly] <-- быстро считает фильтр
     |  возвращает результат
     v
[JavaScript]  <-- рисует результат на canvas

Как работает под капотом

Когда JS вызывает функцию Wasm, передаются простые числовые аргументы напрямую — это очень быстро. Когда же нужно передать массив пикселей или строку, данные кладутся в общую линейную память Wasm (большой массив байт), а через границу передаётся лишь адрес и длина. JS и Wasm смотрят в одну и ту же память с разных сторон. Эту механику мы подробно разберём дальше в курсе.

Частые ошибки в понимании

«Раз Wasm есть DOM API не нужен» — наоборот, без JS Wasm даже кнопку не нарисует.
«Перенесём весь UI в Wasm для скорости» — UI почти не нагружает процессор, выигрыша не будет, а сложность вырастет.
«Граница между JS и Wasm бесплатна» — нет, у переходов есть стоимость, поэтому массивы данных передают через память пакетами, а не по одному.

Итоги

Wasm не имеет прямого доступа к DOM и сети — это делает JS.
JS — оркестратор и интерфейс, Wasm — вычислительное ядро.
Простые числа передаются напрямую, большие данные — через общую память.