WebAssembly в 2026: когда использовать вместо JavaScript и как начать писать на Rust для веба

Представьте: вы пишете сложное веб-приложение. Обработка видео, 3D графика, обработка больших данных. JavaScript тормозит. Вы оптимизируете, переписываете, используете Web Workers. Всё равно медленно. Пользователи жалуются. "Почему в нативном приложении это мгновенно, а в вебе висит?".

Или другой сценарий: у вас есть legacy код на C++. Годы разработки, миллионы строк. Хотите портировать на веб. Переписывать на JavaScript? Год работы, новые баги, потеря оптимизаций. Нереально.

WebAssembly (WASM) решает обе проблемы. Это не "замена JavaScript". Это дополнение для задач, где JavaScript недостаточно быстр или где нужно использовать код на других языках.

В 2026 WebAssembly достиг зрелости. Поддержка во всех браузерах, стабильные инструменты, растущая экосистема. Figma работает на WASM. Google Earth — на WASM. AutoCAD Web — на WASM. Это уже не эксперимент, это production-ready технология.

По данным State of JS 2024, 34% разработчиков используют или экспериментируют с WASM. WebAssembly Community Group: 150+ компаний-участников. npm downloads wasm-bindgen: 2.5M/месяц. GitHub: 18K+ репозиториев с тегом WebAssembly.

Эта статья — практическое руководство. Что такое WASM, когда использовать вместо JS, когда НЕ использовать, как начать с Rust (самый популярный язык для WASM), setup, первый проект, интеграция с JS, performance, реальные кейсы, roadmap. С конкретными примерами кода, бенчмарками, чек-листами.

1. Что такое WebAssembly

Определение

WebAssembly (WASM) — это бинарный формат инструкций для stack-based виртуальной машины. Проще говоря: низкоуровневый язык, близкий к машинному коду, который браузеры могут выполнять напрямую с производительностью близкой к нативной.

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

Вы пишете код на языке высокого уровня (Rust, C++, Go, AssemblyScript). Компилируете в .wasm файл (бинарник). Браузер загружает .wasm и выполняет его.

Пример:

// Rust код
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// Компилируется в .wasm
// JavaScript может вызвать:
import { fibonacci } from './pkg/my_wasm.js';
console.log(fibonacci(10)); // 55

Ключевые особенности

1. Производительность близка к нативной

WASM компилируется в машинный код браузером. Нет интерпретации, как у JavaScript. Типичная производительность: 80-95% от нативного C++.

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

WASM работает в изолированной sandbox среде. Не может напрямую обращаться к DOM, файловой системе, сети. Только через JavaScript API.

3. Портируемость

Один .wasm файл работает на всех платформах: Windows, Mac, Linux, Android, iOS. Не нужна перекомпиляция.

4. Компактность

Бинарный формат меньше текстового JavaScript. Типично: .wasm на 20-40% меньше эквивалентного минифицированного JS.

История

• 2015: Анонс WebAssembly (Mozilla, Google, Microsoft, Apple)

• 2017: MVP (Minimum Viable Product) релиз, поддержка в основных браузерах

• 2019: Стандартизация W3C, WASI (WebAssembly System Interface) для запуска вне браузера

• 2021-2023: Рост экосистемы, появление фреймворков (Yew, Leptos для Rust)

• 2024-2026: Зрелость, production adoption, компоненты (WASM Component Model)

WebAssembly это не:

• Замена JavaScript (это дополнение)

• Язык программирования (это compilation target)

• Только для браузеров (WASI позволяет запускать на серверах, edge, IoT)

«WebAssembly — это не про замену JavaScript. Это про расширение возможностей веба для задач, где JavaScript упирается в потолок» — Лин Кларк, Mozilla

2. WebAssembly vs JavaScript: ключевые отличия

Бенчмарки (типичные результаты)

Важно: WASM быстрее для compute-heavy задач (математика, обработка данных, криптография). Для DOM манипуляций и работы с веб-API JavaScript часто быстрее из-за прямого доступа.

Когда JavaScript быстрее

• Манипуляции DOM (WASM должен вызывать JS для этого)

• Работа с веб-API (fetch, localStorage)

• Обработка JSON (нативный JSON.parse оптимизирован в движках)

• Простые операции с малым объёмом данных (overhead вызова WASM перевешивает выгоду)

Overhead взаимодействия JS ↔ WASM

Передача данных между JS и WASM не бесплатна. Копирование данных в shared memory занимает время. Для маленьких задач этот overhead больше, чем выгода от WASM.

Пример: Функция, которая суммирует два числа. В JS: мгновенно. В WASM: вызов функции + копирование чисел + возврат результата = медленнее, чем в JS.

Правило: WASM эффективен, когда вычисления внутри WASM значительно перевешивают overhead вызова. Обычно это задачи, занимающие >10ms.

3. Когда использовать WASM вместо JavaScript

Use Case 1: Compute-интенсивные задачи

Что: Математические вычисления, симуляции, научные расчёты, криптография.

Примеры:

• Рендеринг 3D графики (без GPU, CPU fallback)

• Физические симуляции (игры, CAD)

• Обработка больших массивов данных

• Machine Learning inference

• Compression/decompression

Почему WASM: 5-10x ускорение для CPU-bound операций.

Use Case 2: Обработка медиа (изображения, видео, аудио)

Что: Фильтры, эффекты, кодирование, декодирование.

Примеры:

• Фото-редакторы (Photopea использует WASM)

• Видео-редакторы в браузере

• Реалтайм аудио-обработка

• Image compression (WebP, AVIF encoding)

Почему WASM: Обработка пикселей/сэмплов в циклах — идеально для WASM. 3-8x быстрее JS.

Use Case 3: Портирование существующего кода (C/C++/Rust)

Что: У вас есть библиотека на C++, которую хотите использовать на вебе.

Примеры:

• Игровые движки (Unity, Unreal портированы через WASM)

• CAD инструменты (AutoCAD Web)

• SQLite в браузере (sql.js)

• FFmpeg для видео (ffmpeg.wasm)

Почему WASM: Переиспользование кода без полной переписки. Компилируете C++ → WASM и готово.

Use Case 4: Криптография и безопасность

Что: Шифрование, хеширование, генерация ключей.

Примеры:

• End-to-end encryption в веб-приложениях

• Password hashing (bcrypt, argon2)

• Blockchain операции

Почему WASM: Производительность (3-6x быстрее JS) + использование проверенных библиотек на Rust/C.

Use Case 5: Игры

Что: 2D/3D игры в браузере.

Примеры:

• Unity WebGL (использует WASM)

• Doom 3 портирован на WASM

• Casual games с физикой

Почему WASM: Производительность для game loop, физики, рендеринга. Возможность использовать game engines на C++.

Use Case 6: Data Science в браузере

Что: Анализ данных, визуализация, ML inference.

Примеры:

• TensorFlow.js (части на WASM)

• Pyodide (Python в браузере через WASM)

• Обработка больших CSV/датасетов

Почему WASM: Ускорение обработки данных. Возможность запустить Python/R код в браузере.

Чек-лист "Нужен ли WASM?"

1. ☐ Задача compute-heavy (много вычислений в циклах)?

2. ☐ Профилирование показало JS bottleneck в вычислениях?

3. ☐ Есть готовый код на C/C++/Rust который хотите портировать?

4. ☐ Нужна производительность близкая к native?

5. ☐ Задача занимает >10ms (чтобы overhead WASM окупился)?

Если ответили "Да" на 2+ вопроса → WASM подходит.

4. Когда НЕ использовать WebAssembly

Антипаттерн 1: Работа с DOM

Проблема: WASM не может напрямую работать с DOM. Нужен JS glue code.

Пример плохого использования: Писать UI framework полностью на WASM. Каждое обновление DOM = вызов JS → медленнее обычного JS.

Решение: Используйте JS для UI, WASM для логики/вычислений.

Антипаттерн 2: Частые мелкие вызовы

Проблема: Overhead вызова JS → WASM. Для мелких функций накладные расходы больше выгоды.

Пример: Функция сложения двух чисел в WASM. В JS это мгновенно. WASM вызов + копирование = медленнее.

Решение: Батчите вызовы. Передавайте массивы данных, обрабатывайте всё внутри WASM, возвращайте результат.

Антипаттерн 3: Простая бизнес-логика

Проблема: WASM сложнее писать/дебажить. Для простых задач это overkill.

Пример: Валидация форм, простые условия, работа с API.

Решение: Оставайтесь на JS. WASM для сложных вычислений, не для CRUD.

Антипаттерн 4: Когда размер важнее скорости

Проблема: WASM runtime + wasm-bindgen glue code добавляют ~100-300KB к бандлу. Для мобильных пользователей это overhead.

Пример: Простое приложение, где вся логика 50KB JS. Добавление WASM → +200KB → дольше загрузка.

Решение: Используйте WASM только если выгода от производительности перевешивает увеличение размера.

Антипаттерн 5: Прототипы и MVP

Проблема: WASM требует setup, компиляции, более сложный workflow. Замедляет итерации.

Решение: Для MVP используйте JS. Когда профилирование покажет bottlenecks — портируйте критичные части на WASM.

Ограничения WASM в 2026

• Нет прямого DOM доступа: Нужен JS glue. Для UI-heavy приложений это overhead.

• Debugging сложнее: Source maps работают, но не так удобно как JS.

• Нет garbage collection (пока): Языки с GC (Go, C#) работают на WASM, но приносят свой GC → больше размер. Proposal для native GC в разработке.

• Нет exceptions (нативных): Есть workarounds, но не так элегантно как в языках источниках.

• Экосистема меньше JS: Меньше библиотек, меньше примеров, больше времени на поиск решений.

Золотое правило

Начинайте с JavaScript. Профилируйте. Если есть bottleneck в вычислениях → портируйте эту часть на WASM. Не переписывайте всё приложение.

5. Экосистема WebAssembly в 2026

Языки для WASM (популярность)

Почему Rust лидирует

• Zero-cost abstractions (производительность C++ без его сложности)

• Memory safety без GC (критично для WASM)

• Лучший tooling (wasm-pack, wasm-bindgen)

• Активное community (40% WASM проектов на Rust)

• Маленький размер бинарников (после оптимизации)

Инструменты экосистемы

Build tools:

• wasm-pack (Rust): One-stop solution для Rust → WASM. Компиляция, упаковка для npm, оптимизация.

• Emscripten (C/C++): Компилятор LLVM-based для C/C++ → WASM.

• AssemblyScript compiler: TypeScript-like → WASM.

JS integration:

• wasm-bindgen: Генерация JS glue code для Rust. Автоматическая сериализация типов.

• js-sys: Rust bindings для всех JS глобальных объектов.

• web-sys: Rust bindings для всех Web APIs (DOM, fetch, WebGL).

Фреймворки:

• Yew (Rust): React-like фреймворк, полностью на Rust + WASM.

• Leptos (Rust): Новый фреймворк с server-side rendering.

• Blazor (.NET): Microsoft фреймворк для C# в браузере.

Tooling для разработки:

• wasm-opt: Оптимизация .wasm файлов (уменьшение размера, ускорение).

• wasmtime, wasmer: WASM runtimes для запуска вне браузера.

• wasm-bindgen-test: Тестирование WASM кода в headless браузере.

Поддержка браузеров (2026)

Поддержка: 98%+ браузеров поддерживают WASM MVP. Threads и SIMD — 95%+.

6. Rust для WebAssembly: почему именно Rust

Преимущество 1: Memory safety без GC

Rust гарантирует безопасность памяти на этапе компиляции через borrow checker. Нет dangling pointers, нет data races. И всё это без garbage collector.

Для WASM это критично: WASM пока не имеет native GC. Языки с GC (Go, C#) компилируются в WASM, но приносят свой GC → +500KB-1MB размер. Rust — нет GC, маленький размер.

Преимущество 2: Zero-cost abstractions

Вы пишете высокоуровневый код (итераторы, closures, pattern matching), компилятор генерирует эффективный машинный код без overhead.

Пример: Итераторы в Rust компилируются в тот же машинный код, что и ручные циклы. В Java итераторы имеют overhead.

Преимущество 3: Отличный tooling

• Cargo: Пакетный менеджер + build tool. Одна команда для всего.

• wasm-pack: Интеграция Cargo + WASM. `wasm-pack build` → готовый npm пакет.

• wasm-bindgen: Автогенерация JS bindings. Не нужно писать glue код вручную.

Преимущество 4: Активная экосистема WASM

40% WASM проектов на GitHub на Rust. Большинство примеров, туториалов, библиотек — на Rust. Community поддержка сильнейшая.

Преимущество 5: Маленький размер бинарников

После оптимизации (wasm-opt + правильные флаги компиляции) Rust WASM модуль может быть 10-50KB. Go WASM минимум ~2MB (включает runtime + GC). C# Blazor ~1.5MB.

Сравнение размера "Hello World"

Когда НЕ Rust

• Быстрый прототип: Learning curve высокий, если не знаете Rust. Для быстрого старта — AssemblyScript.

• Портирование C++ кода: Если уже есть C++ → используйте Emscripten, не переписывайте на Rust.

• Нужна экосистема .NET: Если ваша команда на C# → Blazor подходит лучше.

Learning curve

Rust сложнее JavaScript. Borrow checker, lifetimes, ownership — концепции, которых нет в JS/Python. Но для WASM это оправдано: производительность + безопасность + размер.

Оценка времени на изучение:

• Базовый Rust: 2-4 недели (для опытного разработчика)

• Rust для WASM: +1-2 недели (wasm-bindgen, web-sys)

• Production-ready: 2-3 месяца практики

7. Setup окружения: инструменты и dependencies

Шаг 1: Установка Rust (5 минут)

# Linux/Mac
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Windows
# Скачать rustup-init.exe с https://rustup.rs

# Проверка
rustc --version
cargo --version

Шаг 2: Добавление WASM target (2 минуты)

rustup target add wasm32-unknown-unknown

Это добавляет возможность компилировать Rust → WASM.

Шаг 3: Установка wasm-pack (3 минуты)

# Mac/Linux
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Windows
cargo install wasm-pack

# Проверка
wasm-pack --version

Шаг 4: Установка Node.js (если нет)

Для тестирования и интеграции с JS проектами. Рекомендуется Node 18+.

Шаг 5: Опционально — wasm-opt для оптимизации

# Через npm
npm install -g wasm-opt

# Или через cargo
cargo install wasm-opt

Проверка setup

# Создаём тестовый проект
cargo new --lib hello-wasm
cd hello-wasm

# Добавляем зависимости в Cargo.toml
# [lib]
# crate-type = ["cdylib"]
#
# [dependencies]
# wasm-bindgen = "0.2"

# Компилируем
wasm-pack build --target web

# Если всё ОК → в pkg/ будет .wasm и .js файлы

Структура проекта

my-wasm-project/
├── Cargo.toml          # Rust dependencies и настройки
├── src/
│   └── lib.rs          # Rust код
├── pkg/                # Генерируется wasm-pack
│   ├── my_wasm.wasm    # Compiled WASM
│   ├── my_wasm.js      # JS glue code
│   └── my_wasm.d.ts    # TypeScript definitions
└── www/                # Ваше веб-приложение
    ├── index.html
    └── index.js        # Импортирует WASM модуль

Cargo.toml минимальный

[package]
name = "my-wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[profile.release]
opt-level = "s"        # Оптимизация для размера
lto = true             # Link-time optimization

VS Code extensions (рекомендуется)

• rust-analyzer: Language server для Rust

• Even Better TOML: Подсветка Cargo.toml

• WebAssembly: WASM syntax highlighting

8. Первый проект: Image blur filter на Rust + WASM

Создадим реальный проект: фильтр размытия для изображений. Это compute-heavy задача, идеальная для WASM.

Шаг 1: Создание проекта

cargo new --lib image-blur-wasm
cd image-blur-wasm

Шаг 2: Cargo.toml

[package]
name = "image-blur-wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[profile.release]
opt-level = "s"
lto = true

Шаг 3: Rust код (src/lib.rs)

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn blur_image(
    pixels: &mut [u8],
    width: usize,
    height: usize,
    radius: usize,
) {
    let mut temp = pixels.to_vec();
    
    for y in 0..height {
        for x in 0..width {
            let mut r = 0u32;
            let mut g = 0u32;
            let mut b = 0u32;
            let mut count = 0u32;
            
            // Box blur algorithm
            for dy in -(radius as isize)..=(radius as isize) {
                for dx in -(radius as isize)..=(radius as isize) {
                    let nx = (x as isize + dx).clamp(0, (width - 1) as isize) as usize;
                    let ny = (y as isize + dy).clamp(0, (height - 1) as isize) as usize;
                    let idx = (ny * width + nx) * 4;
                    
                    r += temp[idx] as u32;
                    g += temp[idx + 1] as u32;
                    b += temp[idx + 2] as u32;
                    count += 1;
                }
            }
            
            let idx = (y * width + x) * 4;
            pixels[idx] = (r / count) as u8;
            pixels[idx + 1] = (g / count) as u8;
            pixels[idx + 2] = (b / count) as u8;
            // Alpha не трогаем
        }
    }
}

Шаг 4: Компиляция

wasm-pack build --target web --release

Шаг 5: HTML + JS (www/index.html)

<!DOCTYPE html>
<html>
<head>
    <title>WASM Image Blur</title>
</head>
<body>
    <input type="file" id="upload" accept="image/*">
    <canvas id="canvas"></canvas>
    <button id="blur">Blur (WASM)</button>
    
    <script type="module">
        import init, { blur_image } from '../pkg/image_blur_wasm.js';
        
        await init();
        
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let imageData;
        
        document.getElementById('upload').onchange = (e) => {
            const file = e.target.files[0];
            const img = new Image();
            img.onload = () => {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                imageData = ctx.getImageData(0, 0, img.width, img.height);
            };
            img.src = URL.createObjectURL(file);
        };
        
        document.getElementById('blur').onclick = () => {
            const start = performance.now();
            
            // Вызов WASM функции
            blur_image(
                imageData.data,
                canvas.width,
                canvas.height,
                5  // radius
            );
            
            ctx.putImageData(imageData, 0, 0);
            
            const time = performance.now() - start;
            console.log(`WASM blur: ${time.toFixed(2)}ms`);
        };
    </script>
</body>
</html>

Шаг 6: Запуск

# Простой HTTP сервер
python3 -m http.server 8000

# Или
npx serve .

Откройте http://localhost:8000/www/index.html

Результаты (на 4K изображении 3840×2160)

9. Взаимодействие JavaScript ↔ WebAssembly

Передача примитивных типов

Примитивы (числа, boolean) передаются напрямую, копируются.

// Rust
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

// JavaScript
import { add } from './pkg/my_wasm.js';
console.log(add(5, 3)); // 8

Передача строк

Строки копируются в shared memory.

// Rust
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// JavaScript
import { greet } from './pkg/my_wasm.js';
console.log(greet("World")); // "Hello, World!"

Передача массивов

Для эффективности используйте shared memory, не копируйте.

// Rust - принимаем mutable slice
#[wasm_bindgen]
pub fn double_values(arr: &mut [f64]) {
    for val in arr.iter_mut() {
        *val *= 2.0;
    }
}

// JavaScript
import { double_values } from './pkg/my_wasm.js';
const arr = new Float64Array([1, 2, 3, 4]);
double_values(arr); // arr изменяется напрямую
console.log(arr); // [2, 4, 6, 8]

Работа с JS объектами из Rust

Используйте js-sys и web-sys crates.

// Cargo.toml
[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["console"] }

// Rust
use wasm_bindgen::prelude::*;
use web_sys::console;

#[wasm_bindgen]
pub fn log_from_rust(msg: &str) {
    console::log_1(&msg.into());
}

// JavaScript
import { log_from_rust } from './pkg/my_wasm.js';
log_from_rust("Hello from Rust!"); // Пишет в console

Вызов JS функций из Rust

// JavaScript - объявляем функцию
window.myJsFunction = (x) => x * 2;

// Rust - импортируем её
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = window, js_name = myJsFunction)]
    fn my_js_function(x: f64) -> f64;
}

#[wasm_bindgen]
pub fn call_js() -> f64 {
    unsafe { my_js_function(21.0) } // 42.0
}

Работа с DOM

// Cargo.toml
[dependencies.web-sys]
version = "0.3"
features = [
    "Document",
    "Element",
    "HtmlElement",
    "Window",
]

// Rust
use wasm_bindgen::prelude::*;
use web_sys::{Document, Element, Window};

#[wasm_bindgen]
pub fn create_element() {
    let window = web_sys::window().unwrap();
    let document = window.document().unwrap();
    let body = document.body().unwrap();
    
    let div = document.create_element("div").unwrap();
    div.set_inner_html("Created from Rust!");
    
    body.append_child(&div).unwrap();
}

Performance tips для взаимодействия

1. Минимизируйте вызовы JS ↔ WASM: Батчите операции. Вместо 1000 вызовов функции — один вызов с массивом.

2. Используйте shared memory: Передавайте TypedArrays как ссылки, не копируйте.

3. Избегайте частых String conversions: Копирование строк дорого. Используйте числовые ID где возможно.

4. Кешируйте DOM references: Не ищите элементы на каждом вызове, сохраните ссылку в статике.

10. Performance оптимизация

Оптимизация 1: Правильные флаги компиляции

# Cargo.toml
[profile.release]
opt-level = "z"        # Оптимизация для минимального размера
lto = true             # Link-Time Optimization
codegen-units = 1      # Лучшая оптимизация (медленнее компиляция)
panic = "abort"        # Убирает код unwinding (меньше размер)

Влияние: -30-50% размер .wasm файла.

Оптимизация 2: wasm-opt

wasm-pack build --release
wasm-opt -O3 -o output_optimized.wasm pkg/my_wasm_bg.wasm

Уровни оптимизации:

• -O1: Базовая оптимизация

• -O2: Агрессивная оптимизация

• -O3: Максимальная (рекомендуется)

• -Oz: Оптимизация для размера

Влияние: -10-30% дополнительно к Cargo optimization.

Оптимизация 3: Избегайте лишних dependencies

Каждая библиотека увеличивает размер. Используйте minimal features.

# Вместо всех features web-sys
[dependencies.web-sys]
version = "0.3"
features = ["Window", "Document"]  # Только что нужно

# Избегайте heavyweight библиотек
# serde_json добавляет ~100KB - нужен ли он?

Оптимизация 4: SIMD (Single Instruction Multiple Data)

Для операций над массивами данных. Обрабатываете 4-8 значений за одну инструкцию.

// Требует nightly Rust и unstable features
#![feature(portable_simd)]
use std::simd::*;

pub fn add_arrays_simd(a: &[f32], b: &[f32], result: &mut [f32]) {
    for i in (0..a.len()).step_by(4) {
        let va = f32x4::from_slice(&a[i..]);
        let vb = f32x4::from_slice(&b[i..]);
        let vr = va + vb;
        vr.copy_to_slice(&mut result[i..]);
    }
}

Влияние: 2-4x ускорение для математических операций.

Оптимизация 5: Threads (многопоточность)

Для CPU-intensive задач. Требует SharedArrayBuffer (не все браузеры включили по умолчанию из-за Spectre).

// Используйте wasm-bindgen-rayon для thread pool
[dependencies]
wasm-bindgen-rayon = "1.0"

// В Rust коде
use rayon::prelude::*;

pub fn parallel_map(data: &mut [i32]) {
    data.par_iter_mut().for_each(|x| {
        *x = expensive_computation(*x);
    });
}

Влияние: Near-linear scaling с количеством cores (4 cores = ~3.5x быстрее).

Оптимизация 6: Lazy loading WASM модулей

// Загружаем WASM только когда нужен
button.addEventListener('click', async () => {
    const wasm = await import('./pkg/my_wasm.js');
    await wasm.default(); // init
    wasm.heavy_computation();
});

Влияние: Быстрее initial page load.

Benchmark результаты оптимизаций

11. Реальные кейсы использования WASM

Кейс 1: Figma — графический редактор

Проблема: Нужна производительность desktop приложения в браузере. Работа с векторной графикой, рендеринг, вычисления.

Решение: Критичные части на C++ → WASM через Emscripten. Rendering engine, математика, обработка файлов.

Результаты:

• Производительность сравнима с нативной Sketch

• Работает в браузере без плагинов

• Рендеринг сложных документов: 60 FPS

Кейс 2: Google Earth — 3D карты

Проблема: Legacy код на C++, миллионы строк. Нужно портировать на веб без переписывания.

Решение: Весь C++ код скомпилирован в WASM. 3D движок, обработка географических данных, рендеринг.

Результаты:

• Полностью функциональный Google Earth в браузере

• Не потребовалась переписка на JavaScript

• Сохранены все оптимизации оригинального кода

Кейс 3: AutoCAD Web

Проблема: AutoCAD — desktop приложение на C++ с 40-летней историей. Нужна веб-версия.

Решение: Портирование на WASM. Движок рендеринга, математика CAD, работа с файлами .dwg.

Результаты:

• AutoCAD работает в браузере с полным функционалом

• Производительность достаточная для профессиональной работы

• Переиспользование 90%+ legacy кода

Кейс 4: Photopea — фото-редактор

Проблема: Нужен Photoshop в браузере. Обработка изображений, фильтры, слои.

Решение: Критичные алгоритмы (фильтры, эффекты) на WASM (C++).

Результаты:

• Фильтры работают в 5-8x быстрее чем на JS

• Поддержка файлов .psd, .xcf

• Бесплатная альтернатива Photoshop в браузере

Кейс 5: Squoosh — компрессия изображений (Google)

Проблема: Нужны лучшие кодеки для веба (WebP, AVIF). Существующие библиотеки на C.

Решение: libwebp, libaom (AV1) скомпилированы в WASM.

Результаты:

• Сжатие изображений в браузере без отправки на сервер

• Поддержка современных форматов

• Privacy-friendly (данные не покидают браузер)

Кейс 6: Tensorflow.js

Проблема: ML inference в браузере медленный на чистом JS.

Решение: WASM backend для TensorFlow.js. Математика, операции над тензорами на WASM.

Результаты:

• 2-3x ускорение inference vs JS backend

• Работает на устройствах без GPU

• ML в браузере стал практичным

Общие паттерны успешного использования

1. Compute-heavy задачи (математика, обработка данных)

2. Портирование legacy кода (C/C++ → WASM)

3. Privacy (обработка на клиенте, не на сервере)

4. Offline capabilities (вся логика в браузере)

12. WASM за пределами браузера

WASI (WebAssembly System Interface)

Что это: Стандартизированный API для запуска WASM вне браузера. Доступ к файловой системе, сети, environment variables.

Use cases:

• Serverless функции (быстрый старт, изоляция)

• Plugin системы (безопасное выполнение кода третьих сторон)

• CLI инструменты (портируемые, работают везде)

Runtimes:

• Wasmtime: От Bytecode Alliance, production-ready

• Wasmer: Фокус на plugin systems

• WasmEdge: Оптимизирован для edge computing

Edge computing (Cloudflare Workers, Fastly Compute@Edge)

Проблема: Запуск кода на edge нужен быстрый cold start. Node.js/Python медленные (сотни ms).

Решение: WASM cold start <1ms. Идеально для edge.

Пример (Cloudflare Workers):

// Rust код компилируется в WASM
use worker::*;

#[event(fetch)]
pub async fn main(req: Request, env: Env) -> Result<Response> {
    Response::ok("Hello from Rust on Edge!")
}

// Deploy
wrangler publish

Результаты: Cold start 0.5ms vs 200-500ms для Node.js.

Serverless (AWS Lambda, Google Cloud Functions)

Преимущества WASM:

• Быстрый cold start

• Меньше памяти (нет runtime как у Node/Python)

• Детерминистичное выполнение

Проблема: Пока нет native поддержки в AWS/GCP. Workarounds через custom runtimes.

Blockchain & Smart Contracts

WASM используется как VM для смарт-контрактов (Polkadot, NEAR, EOS).

Почему: Детерминизм, безопасность, производительность лучше чем у EVM (Ethereum).

IoT & Embedded

WASM на микроконтроллерах. Sandboxed выполнение кода в ограниченной памяти.

Будущее WASM вне браузера

По прогнозам Gartner, к 2027 году 50% новых serverless/edge платформ будут поддерживать WASM natively.

13. Типичные ошибки и как их избежать

Ошибка 1: "Переписываем всё на WASM"

Проблема: Переписывают весь проект на Rust. Результат: сложнее дебаг, хуже DX, не всегда быстрее.

Решение: Профилируйте. Портируйте только bottlenecks. Остальное оставьте на JS.

Ошибка 2: Забывают про overhead вызовов

Проблема: Много мелких вызовов JS → WASM. Overhead больше выгоды.

Решение: Батчите вызовы. Передавайте массивы, обрабатывайте в WASM, возвращайте результаты.

Ошибка 3: Не оптимизируют размер

Проблема: WASM файл 2MB. На мобильных долго загружается.

Решение: Используйте release profile, wasm-opt, удалите ненужные dependencies.

Ошибка 4: Игнорируют browser compatibility

Проблема: Используют новые WASM features (threads, SIMD) без fallback. На старых браузерах не работает.

Решение: Проверяйте поддержку, делайте fallback на JS для старых браузеров.

Ошибка 5: Плохая обработка ошибок

Проблема: Panic в Rust → WASM крашится → весь JS ломается.

Решение: Используйте Result, обрабатывайте ошибки gracefully, не паникуйте.

Ошибка 6: Не тестируют на реальных устройствах

Проблема: На MacBook Pro быстро. На Android среднего уровня — лагает.

Решение: Тестируйте на разных устройствах. Профилируйте на слабых.

14. Что запомнить: roadmap для изучения

WebAssembly в 2026 — это не будущее, это настоящее. Figma, Google Earth, AutoCAD — production примеры. Но это не "замена JavaScript", это дополнение для специфических задач.

Ключевые выводы:

• WASM для compute-heavy задач. Математика, обработка данных, медиа, криптография — здесь WASM даёт 3-10x ускорение.

• JavaScript для UI и веб-API. DOM манипуляции, fetch, localStorage — JS быстрее из-за прямого доступа.

• Rust — лучший выбор для WASM. Memory safety, zero-cost abstractions, отличный tooling, маленький размер.

• Профилируйте перед портированием. Не переписывайте всё. Найдите bottleneck, портируйте его.

• Оптимизация критична. Release profile + wasm-opt дают -60-70% размера, +40% производительности.

• Размер имеет значение. WASM + glue code добавляют вес. Оправдано если performance gain перевешивает.

• Экосистема зрелая. wasm-pack, wasm-bindgen, web-sys — всё работает. Production-ready.

• WASM вне браузера растёт. Edge computing, serverless, blockchain — новые применения.

«WebAssembly позволяет вебу конкурировать с нативными приложениями там, где раньше это было невозможно» — Brendan Eich, создатель JavaScript

Roadmap изучения (от нуля до production)

Неделя 1-2: Основы Rust

• The Rust Book (главы 1-10)

• Rustlings exercises

• Понимание ownership, borrowing, lifetimes

Неделя 3: Rust для WASM

• Rust and WebAssembly Book

• Setup wasm-pack, wasm-bindgen

• Первый hello world проект

Неделя 4: Практика

• Создайте реальный проект (image filter, game of life, calculator)

• Интеграция с существующим JS приложением

• Профилирование, оптимизация

Месяц 2: Продвинутое

• web-sys для DOM manipulation

• SIMD оптимизации

• Threads (если нужны)

• Testing (wasm-bindgen-test)

Месяц 3: Production

• CI/CD для WASM проектов

• Мониторинг performance в production

• Error handling и logging

• Портирование реального bottleneck из вашего проекта

Ресурсы

• Официальная документация: rustwasm.github.io

• The Rust Book: doc.rust-lang.org/book

• Rust and WebAssembly Book: rustwasm.github.io/docs/book

• wasm-bindgen guide: rustwasm.github.io/wasm-bindgen

• Community: Reddit r/rust, Discord Rust community

Чек-лист готовности к WASM

1. ☐ Знаю основы Rust (ownership, types, error handling)

2. ☐ Установил wasm-pack, могу компилировать проекты

3. ☐ Понимаю когда WASM подходит vs когда нет

4. ☐ Создал хотя бы 1 работающий проект с WASM

5. ☐ Профилировал performance (JS vs WASM)

6. ☐ Знаю как интегрировать WASM с существующим JS кодом

7. ☐ Понимаю оптимизации (release profile, wasm-opt)

С чего начать сегодня:

1. Установите Rust и wasm-pack (15 минут)

2. Пройдите Rust and WebAssembly tutorial (2 часа)

3. Создайте hello-world проект (30 минут)

4. Запустите benchmark: JS vs WASM на простой задаче (1 час)

5. Присоединитесь к Rust Discord для вопросов (5 минут)

Главный урок: WebAssembly — это не серебряная пуля. Это специализированный инструмент для специфических задач. Когда эти задачи возникают (compute-heavy, портирование legacy, производительность критична), WASM даёт огромное преимущество. Но большинство веб-приложений отлично работают на JavaScript. Изучайте WASM не чтобы переписать всё, а чтобы иметь инструмент когда JavaScript недостаточно. В 2026 году этот инструмент зрелый, production-ready и набирает обороты. Начните изучать сейчас, и через 3 месяца у вас будет суперсила: производительность нативных приложений в вебе.

А лучшие вакансии для разработчиков ищите на hirehi.ru