spinny:~/writing $ cat webassembly-wasm-complete-guide.md

WebAssembly pro webove vyvojare: od nuly k produkci

2026-04-12 · 12 min read · Filippo Spinella · WebAssembly, Rust, Web Development, Performance

WebAssembly (WASM) zacinal jako zpusob, jak spoustet C++ v prohlizeci. V roce 2026 bezi vsude - prohlizece, servery, edge site, vestavenych zarizeni - a pohani nektere z nejnarocnejsich aplikaci na webu. Vykreslovaci engine Figmy, Adobe Photoshop na webu, zpracovani videa v Google Meet a platforma edge vypoctu Cloudflare - to vse bezi na WebAssembly.

Chrome Platform Status uvadi, ze WASM tvoril zhruba 5,5 % vsech nacitani stranek v Chrome na zacatku roku 2026, oproti 4,5 % v predchozim roce. S tim, ze WASM 3.0 se stal standardem W3C a WASI dozrava smerem k verzi 1.0, ekosystem dosahl bodu zlomu.

Tento pruvodce pokryva vse, co potrebujete vedet, abyste mohli zacit stavet s WebAssembly.

Co je WebAssembly?

WebAssembly je binarni format instrukci navrzeny jako cil kompilace. Napisete kod ve vysokourovnovem jazyce (Rust, C, C++, Go, Kotlin), zkompilujete jej do .wasm a spustite v jakoliv prostredi s WASM runtime - prohlizece, Node.js, Cloudflare Workers, Wasmtime nebo Wasmer.

Jak to funguje

WASM je virtualni stroj zalozeny na zasobniku. Funkce ukladaji a odebirati hodnoty z operandoveho zasobniku. Hostitelsky runtime (V8 v Chrome, SpiderMonkey ve Firefoxu) JIT kompiluje WASM bytekod do nativniho strojoveho kodu, proto je vykon blizky nativnimu.

Klicove vlastnosti:

Provadeni v sandboxu: WASM moduly mohou pristupovat pouze k prostredkum, ktere hostitel explicitne udeli. Zadny pristup k souborovemu systemu, siti ani operacnimu systemu, pokud to neni povoleno. To je fundamentalni rozdil oproti nativnimu kodu.
Linearni pamet: jeden souvisly ArrayBuffer sdileny mezi WASM a hostitelem. Slozita data (retezce, struktury) se predavaji zapisem do pameti a sdilenim ukazatele.
Omezene typy: WASM nativne podporuje pouze ctyri typy: i32, i64, f32, f64. Vse ostatni (retezce, pole, objekty) vyzaduje kodovani pres linearni pamet nebo Component Model.
Prenositelnost: stejny binarni soubor .wasm bezi na jakekoli platforme s WASM runtime, bez rekompilace.

WASM vs JavaScript

WASM nenahrazuje JavaScript. Doplnuje ho.

Aspekt	JavaScript	WebAssembly
Parsovani	Parsovani + kompilace za behu	Predkompilovany binarni soubor, pouze dekodovani
Rychlost provadeni	JIT optimalizovany, promenliva	Blizko nativni, konzistentni
Start	Rychly pro male skripty	Rychle dekodovani, predvidatelny
Pristup k DOM	Primy	Neprimi (pres JS vrstvu)
Nejlepsi pro	UI, manipulace s DOM, zpracovani udalosti	Vypocetne narocne ulohy CPU
Garbage collection	Vestavenej	WasmGC (novy) nebo manualni

Pouzivejte JavaScript pro praci s UI a DOM. Pouzivejte WASM pro narocne vypocty: zpracovani obrazu, kodovani videa, fyzikalni simulace, kryptografie, parsovani dat.

WASM 3.0: co je noveho

WebAssembly 3.0 se stal standardem W3C v zari 2025 a standardizoval devet funkci, ktere byly vyvijeny po leta.

Funkce	Co umoznuje
WasmGC	Nativni garbage collection ve WASM. Spravovane jazyky (Java, Kotlin, Dart) mohou kompilovat do WASM bez dodavani vlastniho GC runtime. Podporovano v Chrome 119+, Firefox 120+, Safari 18.2+.
Exception Handling	Nativni `try`/`catch` ve WASM. Drive vyzadovaly vyjimky nakladne pruchody do JavaScriptu.
Tail Calls	Umoznuje efektivni rekurzi bez preteceni zasobniku. Klicove pro funkcionalni jazyky.
Relaxed SIMD	128bitove vektorove instrukce pro paralelni zpracovani dat. Umoznuje hardwarove specificke optimalizace.
Memory64	Prekonava limit 4GB linearni pameti. Nutne pro zpracovani dat ve velkem meritku.
Multi-memory	Vice nezavislych oblasti pameti v jednom modulu.

Nejvyznamnejsi je WasmGC. Drive kompilace Javy nebo Kotlinu do WASM znamenala dodani celeho garbage collectoru jako soucasti binarniho souboru, coz nafouklo velikost souboru. Nyni vlastni GC prohlizece spravuje pamet WASM modulu, stejne jako to dela pro JavaScript.

WASI: WebAssembly mimo prohlizec

WASM v prohlizeci je mocny, ale WASI (WebAssembly System Interface) je to, co dela z WASM univerzalni runtime. WASI poskytuje standardizovane rozhrani pro systemove prostredky - soubory, sitovani, hodiny, nahodna cisla - umoznuje WASM modulem bezet mimo prohlizec.

WASI Preview 2 (soucasne stabilni vydani) definuje tato rozhrani:

wasi:filesystem - souborove operace pres capability handles (ne tradicni deskriptory souboru)
wasi:sockets - TCP/UDP sitovani
wasi:http - zpracovani HTTP pozadavku/odpovedi
wasi:clocks - nastenne hodiny, monotonicke hodiny
wasi:random - kryptograficka nahodnost
wasi:cli - argumenty prikazoveho radku, promenne prostredi, stdio

Klicovym principem je zabezpeceni zalozene na schopnostech: WASM modul nemuze pristupovat k souborovemu systemu, pokud hostitel explicitne neposkytneme handle ke konkretnimu adresari. To cini WASI fundamentalne bezpecnejsim nez spousteni nativnich spustitelnych souboru.

Cesta k WASI 1.0

WASI 0.3.0 (pridavajici async/soubelnostni primitivy) se ocekava v roce 2026, WASI 1.0 ma nasledovat. Hlavnim pridanim je jazykove integrovane async s bezkopirovym streamovym I/O.

Component Model

Zakladni WASM moduly mohou vymenit pouze cisla. Component Model resi toto omezeni pridanim bohateho typoveho systemu a vrstvy skladatelnosti na WASM.

WIT (WebAssembly Interface Types)

WIT je jazyk pro definici rozhrani, ktery umoznuje komponentam deklarovat sve importy a exporty s bohatymi typy - retezce, zaznamy, seznamy, varianty, enumy - ne jen i32 a f64.

// calculator.wit
package myorg:calculator@1.0.0;

interface operations {
    record calculation {
        expression: string,
        result: f64,
        timestamp: u64,
    }

    add: func(a: f64, b: f64) -> f64;
    multiply: func(a: f64, b: f64) -> f64;
    history: func() -> list<calculation>;
}

world calculator {
    export operations;
}

Nastroje jako wit-bindgen generuji jazykove specificke vazby ze souboru WIT. Komponenta v Rustu a komponenta v Pythonu si mohou vymenit retezce, zaznamy a seznamy pres WIT kontrakty, aniz by kterakoli strana znala implementacni jazyk druhe.

Sestaveni prvniho WASM modulu s Rustem

Rust ma nejvyzralejsi WASM nastroje. Pojdme sestavit prakticky priklad: modul pro zpracovani obrazu bezici v prohlizeci.

Nastaveni

# Install the WASM target for Rust
rustup target add wasm32-unknown-unknown

# Install wasm-pack (builds Rust to WASM + generates JS bindings)
cargo install wasm-pack

# Create a new library project
cargo new --lib image-processor
cd image-processor

Konfigurace Cargo.toml

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

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

[dependencies]
wasm-bindgen = "0.2"

Napiste kod v Rustu

// src/lib.rs
use wasm_bindgen::prelude::*;

/// Convert an image buffer to grayscale.
/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
/// Output: Modified in place for zero-copy performance.
#[wasm_bindgen]
pub fn grayscale(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        let r = chunk[0] as f32;
        let g = chunk[1] as f32;
        let b = chunk[2] as f32;
        // ITU-R BT.709 luminance coefficients
        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
        chunk[0] = gray;
        chunk[1] = gray;
        chunk[2] = gray;
        // chunk[3] is alpha, leave unchanged
    }
}

/// Adjust brightness of an image.
/// factor > 1.0 brightens, < 1.0 darkens.
#[wasm_bindgen]
pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
    for chunk in pixels.chunks_exact_mut(4) {
        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
    }
}

/// Invert all colors in the image.
#[wasm_bindgen]
pub fn invert(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        chunk[0] = 255 - chunk[0];
        chunk[1] = 255 - chunk[1];
        chunk[2] = 255 - chunk[2];
    }
}

/// Calculate the average brightness of an image (0-255).
#[wasm_bindgen]
pub fn average_brightness(pixels: &[u8]) -> f32 {
    let mut total: f64 = 0.0;
    let pixel_count = pixels.len() / 4;
    for chunk in pixels.chunks_exact(4) {
        let luminance = 0.2126 * chunk[0] as f64
            + 0.7152 * chunk[1] as f64
            + 0.0722 * chunk[2] as f64;
        total += luminance;
    }
    (total / pixel_count as f64) as f32
}

Sestaveni

wasm-pack build --target web

To vytvori adresar pkg/ obsahujici:

image_processor_bg.wasm - zkompilovany WASM binarni soubor
image_processor.js - JavaScript propojovaci kod s TypeScript definicemi
package.json - pripraveny k publikaci na npm

Pouziti v JavaScriptu

<!DOCTYPE html>
<html>
<head><title>WASM Image Processor</title></head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <button onclick="applyGrayscale()">Grayscale</button>
  <button onclick="applyBrightness()">Brighten</button>
  <button onclick="applyInvert()">Invert</button>

  <script type="module">
    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";

    let ctx;
    let imageData;

    async function setup() {
      await init();
      const canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");

      // Load an image onto the canvas
      const img = new Image();
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      };
      img.src = "photo.jpg";
    }

    window.applyGrayscale = () => {
      grayscale(imageData.data);
      ctx.putImageData(imageData, 0, 0);
    };

    window.applyBrightness = () => {
      adjust_brightness(imageData.data, 1.3);
      ctx.putImageData(imageData, 0, 0);
    };

    window.applyInvert = () => {
      invert(imageData.data);
      ctx.putImageData(imageData, 0, 0);
    };

    setup();
  </script>
</body>
</html>

Klicovy poznatek: imageData.data je Uint8ClampedArray podporovany ArrayBuffer. Pri predani do WASM sdili stejnou pamet - zadne kopirovani. Funkce v Rustu modifikuje pixely na miste a strana JavaScriptu zmeny okamzite vidi.

Nizsi uroven: manualni instanciace WASM

Pokud nechcete pouzivat wasm-bindgen, muzete instanciovat WASM moduly primo:

const response = await fetch("calculator.wasm");
const { instance } = await WebAssembly.instantiateStreaming(response, {
  env: {
    // Functions the WASM module can call
    log_result: (value) => console.log("Result:", value),
  },
});

// Call exported functions
const { add, multiply } = instance.exports;
console.log(add(5, 3));       // 8
console.log(multiply(4, 7));  // 28

To je uzitecne, kdyz chcete minimalni rezii a nepotrebujete bohaty typovy interop.

Vykon: WASM vs JavaScript

Realne benchmarky ukazuji vyznamna zrychleni pro vypocetne narocne ulohy CPU:

Uloha	JavaScript	WASM	Zrychleni
Zpracovani obrazu 4K	180ms	8ms (se SIMD)	22x
Zmena velikosti obrazu (4K)	250ms	45ms	5,5x
Fyzikalni simulace (10K entit)	Ztrata snimku	Plynulych 60fps	~10x
Parsovani JSON (velky payload)	12ms	3ms	4x
Kryptograficke hashovani	45ms	6ms	7,5x

WASM bezi na zhruba 95 % rychlosti nativniho kodu. Nejvetsi zisky pochazi z:

Predvidatelneho vykonu (zadne JIT zahrivani, zadne GC pauzy)
SIMD instrukci pro paralelni zpracovani dat
Primeho pristupu k pameti bez zasahu garbage collectoru

Kde WASM NENI rychlejsi: manipulace s DOM, male vypocty, I/O-bound ulohy. JavaScript je pro ne uz optimalizovany.

Produkcni pripady pouziti

Figma: vykreslovani vektoru v realnem case

Jadro vykreslovaciho engine Figmy je C++ zkompilovany do WASM. Kazdy tvar, gradient a efekt je vypocitan ve WASM a vykreslen na element Canvas. To umoznuje Figme zvladat slozite navrhy s tisici vrstvami pri 60fps v prohlizeci - vykon, ktery by v cistem JavaScriptu nebyl mozny.

Adobe Photoshop na webu

Adobe portovalo klicove filtry a nastroje Photoshopu do WASM pomoci Rustu. Jejich benchmarky ukazuji zpracovani 4K obrazu za 22ms s WASM SIMD oproti 180ms v JavaScriptu - 8nasobne zlepseni, ktere umoznuje nahledy filtru v realnem case.

Cloudflare Workers

Cloudflare spousti WASM moduly v V8 izolatech na vice nez 330 edge lokacich. Studene starty jsou 1-5ms (ve srovnani se 100-500ms pro kontejnerovy serverless). V unoru 2026 nasadili inferenci Llama-3-8b napric svou edge siti pomoci WASM.

Google Meet

Rozmazani pozadi a virtualni pozadi v Google Meet pouzivaji WASM se SIMD pro zpracovani videa v realnem case. WASM modul zpracovava kazdy snimek videa dostatecne rychle na udrzeni plynuleho videa pri 30fps.

Podpora prohlizecu (2026)

Funkce	Chrome	Firefox	Safari	Edge
Core WASM	Plna	Plna	Plna	Plna
Threads	Ano	Ano	Ano	Ano
SIMD (128-bit)	Ano	Ano	Ano	Ano
WasmGC	119+	120+	18.2+	Ano
Exception Handling	Ano	Ano	Ano	Ano
Memory64	Ano	Ano	Castecna	Ano

Vsechny hlavni prohlizece plne podporuji WASM. Novejsi funkce (WasmGC, Exception Handling) dosahly siroke dostupnosti.

Prehled nastroju

Nastroj	Ucel	Instalace
wasm-pack	Sestaveni Rustu do WASM, generovani npm balicku	`cargo install wasm-pack`
wasm-bindgen	Rust/JS interop vazby (pouzivano wasm-pack)	Zavislost v Cargo.toml
wasm-opt	Optimalizace velikosti binarniho souboru (50%+ redukce)	Soucast Binaryen: `brew install binaryen`
wit-bindgen	Generovani vazeb ze souboru WIT	`cargo install wit-bindgen-cli`
Wasmtime	Serverovy WASM runtime (referencni implementace WASI)	`brew install wasmtime`
Wasmer	Alternativni WASM runtime s podporou WASI	`curl https://get.wasmer.io -sSfL \| sh`
wasm-feature-detect	Detekce funkci prohlizece za behu	`npm install wasm-feature-detect`

Optimalizace velikosti binarniho souboru

WASM binarni soubory mohou byt velke. Takto je zmensit:

# Cargo.toml
[profile.release]
opt-level = "z"     # Optimize for size
lto = true          # Link-time optimization
codegen-units = 1   # Better optimization, slower compile
strip = true        # Strip debug symbols

# Build in release mode
wasm-pack build --release --target web

# Further optimize with wasm-opt
wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm

Typicky Rust WASM modul se zmensi z 500KB pod 50KB s temito optimalizacemi.

Plan pro zacatek

Zaver

WebAssembly uz neni experimentalni. Je to produkcni technologie pouzivana nekterymi z nejnarocnejsich aplikaci na webu. Vykon blizky nativnimu, zabezpeceni sandboxem a univerzalni prenositelnost - zadny jiny cil kompilace vam nedava vsechny tri.

Nemusite prepisovat celou aplikaci do WASM. Zacnete s jedinou vypocetne narocnou funkci - obrazovym filtrem, datovym parserem, fyzikalnim vypoctem - zkompilujte ji do WASM a zavolejte z JavaScriptu. Zmerte rozdil. Pak se rozhodnete, kde jeste muze WASM pomoci.

Nastroje jsou vyzrale, podpora prohlizecu je univerzalni a ekosystem roste. Pokud pisete v Rustu, jste uz jen jeden prikaz od prohlizece.

Kontrolni seznam pro zacatek:

Rust a wasm-pack nainstalovany

Prvni WASM modul sestaven a bezici v prohlizeci

JavaScript interop funguje (volani WASM z JS)

Vydani s optimalizacemi velikosti aplikovano

Vykon porovnan s ekvivalentem v cistem JavaScriptu

WASI prozkoumano s Wasmtime pro serverove pripady pouziti