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
ArrayBuffersdileny 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
.wasmbezi 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 sitovaniwasi:http- zpracovani HTTP pozadavku/odpovediwasi:clocks- nastenne hodiny, monotonicke hodinywasi:random- kryptograficka nahodnostwasi: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 souborimage_processor.js- JavaScript propojovaci kod s TypeScript definicemipackage.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