Всем доброго времени суток. Сегодня с вами я хотел бы обсудить, как можно расширить возможности JavaScript. Первый вопрос, с чего вдруг такие мысли. Я давно работаю front-end разработчиком и последнее время все чаще и чаще я стал сталкиваться с нетривиальными задачами. Пример, получить электронную подпись для документа в браузере или рендеринг 3д моделей для презентации функциональности станков.

Так как я человек любопытный для меня это звучит как вызов - а действительно такое нельзя провернуть в браузере? Как все мы знаем данный функционал просто так не реализуем в браузере, вот и первый спойлер .

Давайте начнем разбираться, если способов с рендерингом много, то вот с подписью  их совсем мало. Поэтому сегодня будем говорить про универсальный способ - WASM.

WebAssembly (WASM) — это современная низкоуровневая технология, позволяющая выполнять код с высокой производительностью в веб-браузерах. Она не заменяет JavaScript, а дополняет его, предоставляя возможности для запуска предварительно скомпилированных программ на различных языках (C, C++, Rust и др.) прямо в браузере.

История создания

WebAssembly появился как результат многолетних попыток улучшить производительность веб-приложений:

  • 2010-е годы: Проблема с производительностью JavaScript для сложных вычислений (игры, CAD, видеомонтаж)

  • 2013: Mozilla начинает проект asm.js - подмножество JavaScript, которое можно эффективно компилировать

  • 2015: Формируется W3C WebAssembly Community Group с участием Google, Microsoft, Mozilla и Apple

  • 2017: Первая версия WebAssembly (MVP) выпущена и поддерживается во всех основных браузерах

  • 2019: WebAssembly становится официальным веб-стандартом W3C

  • 2020-е: Добавление новых возможностей (потоки, SIMD, исключения и др.)

Как работает WebAssembly

Для понимания работы придется приложить достаточно  много фантазии,  но я постарался расписать прям по шагам.

Компиляция и выполнение

  1. Разработка: Код пишется на C/C++, Rust, Go или других языках, поддерживающих компиляцию в WASM

  2. Компиляция: Исходный код компилируется в .wasm файл (бинарный формат)

  3. Загрузка: Браузер загружает .wasm файл через JavaScript API

  4. Компиляция: Браузер компилирует WASM в машинный код конкретного процессора

  5. Выполнение: Скомпилированный код выполняется в песочнице с высокой производительностью

Архитектура

  • Стековая машина: WASM использует стековую модель выполнения (а не регистровую)

  • Типы данных: Поддерживает i32, i64, f32, f64

  • Линейная память: Один непрерывный блок памяти для обмена данными с JS

  • Таблицы: Для хранения ссылок на функции

  • Глобальные переменные: Могут быть изменяемыми или неизменяемыми

Плюсы WebAssembly

  1. Производительность:

    • Близкая к нативной скорость выполнения

    • Предсказуемая производительность (нет JIT-пауз как в JS)

    • Эффективное использование CPU (SIMD, многопоточность)

  2. Переносимость:

    • Работает везде, где есть современный браузер

    • Один бинарный формат для всех платформ

  3. Безопасность:

    • Выполняется в песочнице

    • Память изолирована

    • Нет прямого доступа к DOM/API браузера

  4. Языковая поддержка:

    • Можно использовать множество языков (C/C++, Rust, Go, Kotlin и др.)

    • Возможность переноса существующих библиотек в веб  (например, OpenCV, SQLite)

Минусы WebAssembly

  1. Сложность отладки:

    • Отладка сложнее, чем JavaScript

    • Source maps пока не так хорошо развиты

  2. Размер файлов:

    • .wasm файлы могут быть большими

    • Требуется время на загрузку и компиляцию

  3. Ограниченный доступ к Web API:

    • Нет прямого доступа к DOM

    • Все взаимодействие через JavaScript

  4. Молодость технологии:

    • Некоторые фичи еще в разработке (например, полноценная многопоточность)

    • Меньше инструментов и документации по сравнению с JS

Варианты использования в JavaScript

По себе знаю, что лучше увидеть один раз код, чем прочитать сто раз о том как прекрасно все работает.

1. Интеграция существующих библиотек

// Загрузка и инициализация WASM модуля
WebAssembly.instantiateStreaming(fetch('library.wasm'), importObject)
  .then(obj => {
    // Вызов экспортированных функций
    const result = obj.instance.exports.computeSomething(42);
    console.log(result);
  });

2. Вычислительно сложные задачи

Пример обработки изображений:

async function processImageWasm(imageData) {
  const wasmModule = await WebAssembly.instantiateStreaming(
    fetch('image_processor.wasm')
  );
  
  // Выделение памяти для данных изображения
  const memory = wasmModule.instance.exports.memory;
  const uint8View = new Uint8Array(memory.buffer);
  
  // Копирование данных изображения в память WASM
  uint8View.set(imageData, 0);
  
  // Выполнение обработки
  wasmModule.instance.exports.processImage(
    imageData.width, 
    imageData.height
  );
  
  // Получение результата
  return uint8View.slice(0, imageData.length);
}

3. Игры и графические приложения

// Инициализация игрового движка
const game = await WebAssembly.instantiateStreaming(
  fetch('game_engine.wasm'),
  {
    env: {
      // Функц��и для взаимодействия с JS
      drawSprite: (x, y, spriteId) => { /* ... */ },
      playSound: (soundId) => { /* ... */ }
    }
  }
);

// Основной игровой цикл
function gameLoop() {
  game.instance.exports.update();
  game.instance.exports.render();
  requestAnimationFrame(gameLoop);
}

4. Мультимедийные приложения

Пример аудиообработки:

const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(4096, 1, 1);

let wasmAudioProcessor;

// Инициализация WASM модуля
WebAssembly.instantiateStreaming(fetch('audio_processor.wasm'))
  .then(({instance}) => {
    wasmAudioProcessor = instance.exports;
    
    processor.onaudioprocess = (e) => {
      const input = e.inputBuffer.getChannelData(0);
      const output = e.outputBuffer.getChannelData(0);
      
      // Обработка аудио в WASM
      wasmAudioProcessor.process(
        input.byteOffset,
        output.byteOffset,
        input.length
      );
    };
  });

Нюансы использования

Ниже я попытался  расписать все особенности использования.

1. Взаимодействие с JavaScript

  • Медленный обмен данными: Частые переходы между JS и WASM могут снижать производительность

  • Сериализация: Для сложных структур данных требуется сериализация/десериализация

  • Ограниченные типы: WASM поддерживает только числовые типы, строки нужно передавать как указатели

2. Управление памятью

  • Ручное управление: В большинстве языков (кроме Rust) нужно вручную управлять памятью

  • Memory growth: Память в WASM может расти, но не уменьшаться

  • Утечки памяти: Легко допустить утечки, особенно при интеграции с JS

Пример работы с памятью:

const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('module.wasm')
);

// Получаем память WASM
const memory = wasmModule.instance.exports.memory;

// Создаем view для работы с памятью
const memoryView = new Uint8Array(memory.buffer);

// Записываем строку в память WASM
const str = "Hello WASM!";
const strPtr = wasmModule.instance.exports.allocate_string(str.length);
for (let i = 0; i < str.length; i++) {
  memoryView[strPtr + i] = str.charCodeAt(i);
}

// Вызываем функцию WASM
wasmModule.instance.exports.process_string(strPtr, str.length);

// Освобождаем память
wasmModule.instance.exports.free_string(strPtr);

3. Отладка

  • Ограниченные инструменты: Chrome DevTools поддерживает отладку WASM, но с ограничениями

  • Source maps: Требуют дополнительной настройки

  • Стек вызовов: Может быть сложно сопоставить с исходным кодом

4. Безопасность

  • Песочница: WASM выполняется в песочнице, но уязвимости в компиляторах возможны

  • Поверхность атаки: Большие старые кодовые базы могут содержать уязвимости

  • Side-channel атаки: Возможны Spectre-подобные атаки

5. Оптимизация производительности

  • Холодный старт: Первый запуск может быть медленным из-за компиляции

  • Кэширование: .wasm файлы кэшируются браузером

  • Lazy compilation: Некоторые браузеры используют отложенную компиляцию

Пример оптимизации загрузки:

// Предварительная компиляция при загрузке страницы
let wasmModulePromise;

function preloadWasm() {
  wasmModulePromise = WebAssembly.instantiateStreaming(
    fetch('module.wasm'),
    importObject
  ).catch(err => {
    console.error('WASM preload failed:', err);
  });
}

// Использование при необходимости
async function useWasm() {
  const wasmModule = await wasmModulePromise;
  // ...
}

Заключение

WebAssembly - это мощная технология, которая открывает новые возможности для веб-приложений. Она особенно полезна для:

  • Вычислительно интенсивных задач

  • Портирования существующих приложений и библиотек на C++/Rust в веб

  • Приложений, требующих предсказуемой производительности (игры, CAD, видеоредакторы)

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