Что такое WebAssembly и какое место занимает React

WebAssembly (WASM) — это двоичный формат инструкций, разработанный для работы в веб-браузерах с производительностью, близкой к нативной. В отличие от JavaScript, высокоуровневого интерпретируемого языка, WASM представляет собой низкоуровневый байтовый код, который движок JavaScript в браузере компилирует и выполняет с минимальными накладными расходами. Благодаря этому его производительность отстаёт от нативного кода всего на 10–20%.

WebAssembly — не язык программирования, на котором пишут непосредственно, а цель компиляции. Такие языки, как Rust, C, C++ и Go, можно компилировать в байтовый код WASM с помощью соответствующих инструментов. Вы пишете на системном языке, компилируете код в WASM и поставляете двоичный модуль в браузер.

WASM работает внутри изолированной виртуальной машины в браузере и подчиняется тем же ограничениям безопасности, что и JavaScript. Он не может напрямую обращаться к DOM, сети или файловой системе — весь такой доступ осуществляется через привязки JavaScript. Изоляция в песочнице гарантирует, что даже код с нативной скоростью не сможет обойти политики безопасности браузера.

WASM и JavaScript созданы для совместной работы, а не для замены друг друга. JavaScript отлично подходит для координации, работы с DOM, обработки событий и вызова API браузера. WASM эффективен для ресурсоёмких алгоритмов. Стандартный подход таков: JavaScript координирует работу приложения, а WASM выполняет тяжёлые вычисления.

WASM использует линейную модель памяти: непрерывный блок байтов, представленный в JavaScript как ArrayBuffer. И WASM, и JavaScript могут читать из этой общей памяти и записывать в неё данные. Передача больших объёмов данных между JavaScript и WASM выполняется записью в этот общий буфер и чтением из него, что позволяет избежать затратной сериализации.

React отвечает за уровень пользовательского интерфейса: отрисовку, управление состоянием и взаимодействие с пользователем. WASM выполняет вычисления, с которыми React не может эффективно справиться в JavaScript. React вызывает функции WASM из обработчиков событий или эффектов, получает результаты и обновляет состояние, чтобы запустить повторную отрисовку. React — это уровень представления, а WASM — вычислительный движок.

WASM подходит для приложений React, которым требуются: обработка изображений или видео (манипуляции с пикселями), синтез и обработка аудио, криптографические операции (хеширование, шифрование), физическое моделирование, игровая логика, сжатие и распаковка данных, а также поиск текста в больших объёмах данных. Во всех этих задачах производительность JavaScript заметно недостаточна.

WASM обеспечивает скорость, близкую к нативной, при вычислениях, ограниченных производительностью CPU, поскольку браузерный компилятор с динамической компиляцией преобразует его в машинный код и выполняет очень мало дополнительной оптимизации. Однако переход через границу между JavaScript и WASM — вызов функции WASM из JS или наоборот — связан с накладными расходами. Сокращайте число таких переходов, объединяя операции обработки данных в пакеты внутри WASM.

И WASM, и веб-воркеры помогают решать проблемы производительности. Веб-воркер переносит вычисления JavaScript из основного потока. WASM ускоряет вычисления в том потоке, в котором выполняется. Оптимальный подход — использовать их вместе: выполнять вычисления WASM в веб-воркере, чтобы основной поток React оставался свободным для обновления интерфейса, пока WASM работает с производительностью, близкой к нативной.

WebAssembly поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) с 2017 года. Базовая спецификация WASM поддерживается практически повсеместно. Более новые расширения — потоки с SharedArrayBuffer, SIMD для векторизованных операций и сборка мусора для языков с управляемой памятью — поддерживаются на разных уровнях, но постепенно стандартизируются и становятся доступными.

Экосистема WASM быстро развивается. Среди заметных вариантов использования в продуктивных системах: Figma (движок отрисовки), Google Earth (трёхмерный глобус), Adobe Photoshop Web (обработка изображений), AutoCAD Web (отрисовка CAD) и многочисленные библиотеки криптографии. Приложения React часто используют WASM для ресурсоёмких вычислений в этих же категориях.

Как WebAssembly выполняется в браузере?

WebAssembly — двоичная цель компиляции, а не язык, для Rust, C, C++ и Go. Он работает с производительностью, близкой к нативной, в изолированной виртуальной машине браузера. WASM и JavaScript дополняют друг друга: JS координирует работу, а WASM выполняет вычисления. React отвечает за уровень интерфейса и вызывает WASM для ресурсоёмких вычислений. Используйте WASM для обработки изображений, криптографии, физического моделирования, работы с аудио и поиска в больших объёмах данных. Сокращайте переходы между JS и WASM, объединяя операции в пакеты внутри WASM.