WebAssembly (WASM) borjade som ett satt att kora C++ i webblasaren. 2026 kors det overallt - webblasare, servrar, edge-natverk, inbyggda enheter - och driver nagra av de mest kravande applikationerna pa webben. Figmas rendering-motor, Adobe Photoshop pa webben, Google Meets videobearbetning och Cloudflares edge-compute-plattform kors alla pa WebAssembly.
Chrome Platform Status anger WASM till ungefar 5,5 % av alla Chrome-sidladdningar i borjan av 2026, upp fran 4,5 % aret innan. Med WASM 3.0 som W3C-standard och WASI pa vag mot version 1.0 har ekosystemet natt en vandpunkt.
Den har guiden tacker allt du behover veta for att borja bygga med WebAssembly.
Vad ar WebAssembly?
WebAssembly ar ett binart instruktionsformat utformat som kompileringsmal. Du skriver kod i ett hognivasprak (Rust, C, C++, Go, Kotlin), kompilerar det till .wasm och kor det i vilken miljo som helst som har en WASM-runtime - webblasare, Node.js, Cloudflare Workers, Wasmtime eller Wasmer.
Hur det fungerar
WASM ar en stackbaserad virtuell maskin. Funktioner lagger varden pa en operandstack och tar bort dem. Vard-runtime:n (V8 i Chrome, SpiderMonkey i Firefox) JIT-kompilerar WASM-bytekoden till nativ maskinkod, vilket ar anledningen till att prestandan ar nastan nativ.
Viktiga egenskaper:
- Sandboxad exekvering: WASM-moduler kan bara komma at resurser som varden uttryckligen beviljar. Inget filsystem, inget natverk, ingen OS-atkomst om det inte tillats. Detta ar fundamentalt annorlunda fran nativ kod.
- Linjart minne: en enda sammanhangande
ArrayBuffersom delas mellan WASM och varden. Komplex data (strangar, structs) skickas genom att skriva till minnet och dela en pekare. - Typbegransat: WASM stoder naturt bara fyra typer:
i32,i64,f32,f64. Allt annat (strangar, arrayer, objekt) kraver kodning via linjart minne eller Component Model. - Portabelt: samma
.wasm-binar kors pa vilken plattform som helst med en WASM-runtime, utan omkompilering.
WASM vs JavaScript
WASM ersatter inte JavaScript. Det kompletterar det.
| Aspekt | JavaScript | WebAssembly |
|---|---|---|
| Parsing | Parsa + kompilera vid korning | Forkompilerad binar, bara avkodning |
| Exekveringshastighet | JIT-optimerad, variabel | Nastan nativ, konsekvent |
| Uppstartstid | Snabb for sma skript | Snabb avkodning, forutsagbar |
| DOM-atkomst | Direkt | Indirekt (via JS-gluekod) |
| Bast for | UI, DOM-manipulation, event-hantering | CPU-intensiva berakningar |
| Garbage collection | Inbyggd | WasmGC (ny) eller manuell |
Anvand JavaScript for UI- och DOM-arbete. Anvand WASM for tunga berakningar: bildbehandling, videokodning, fysiksimulationer, kryptografi, databearbetning.
WASM 3.0: vad ar nytt
WebAssembly 3.0 blev en W3C-standard i september 2025 och standardiserade nio funktioner som hade varit under utveckling i aratal.
| Funktion | Vad den mojliggor |
|---|---|
| WasmGC | Nativ garbage collection i WASM. Hanterade sprak (Java, Kotlin, Dart) kan kompilera till WASM utan att skeppa sin egen GC-runtime. Stods i Chrome 119+, Firefox 120+, Safari 18.2+. |
| Exception Handling | Nativt try/catch i WASM. Tidigare kravde exceptions dyra rundturer till JavaScript. |
| Tail Calls | Mojliggor effektiv rekursion utan stack overflow. Avgurande for funktionella sprak. |
| Relaxed SIMD | 128-bitars vektorinstruktioner for parallell databehandling. Mojliggor haruvaruspecifika optimeringar. |
| Memory64 | Bryter igenom 4 GB-gransen for linjart minne. Kravs for storskalig databehandling. |
| Multi-memory | Flera oberoende minnesregioner i en modul. |
Den mest betydelsefulla ar WasmGC. Tidigare innebar kompilering av Java eller Kotlin till WASM att man skeppade en hel garbage collector som del av binaren, vilket blaste upp filstorlekarna. Nu hanterar webblasarens egen GC minneshanteringen for WASM-moduler, precis som den gor for JavaScript.
WASI: WebAssembly bortom webblasaren
WASM i webblasaren ar kraftfullt, men WASI (WebAssembly System Interface) ar det som gor WASM till en universell runtime. WASI tillhandahaller standardiserade granssnitt for systemresurser - filer, natverk, klockor, slumptal - vilket gor det mojligt for WASM-moduler att koras utanfor webblasaren.
WASI Preview 2 (den nuvarande stabila versionen) definierar dessa granssnitt:
wasi:filesystem- filoperationer via capability-handles (inte traditionella fildeskriptorer)wasi:sockets- TCP/UDP-natverkwasi:http- HTTP-forfragan/svar-hanteringwasi:clocks- vaggklocka, monoton klockawasi:random- kryptografisk slumpmassighetwasi:cli- kommandoradsargument, miljovariabler, stdio
Nyckelprincipen ar capability-baserad sakerhet: en WASM-modul kan inte komma at filsystemet om inte varden uttryckligen beviljar ett handle till en specifik mapp. Detta gor WASI fundamentalt sakrare an att kora nativa korvara filer.
Vagen till WASI 1.0
WASI 0.3.0 (med async/concurrency-primitiver) forvantas under 2026, med WASI 1.0 darefter. Den viktigaste nyheten ar sprakintegrerad async med zero-copy streaming I/O.
Component Model
Karn-WASM-moduler kan bara utbyta tal. Component Model loser denna begransning genom att lagga till ett rikt typsystem och ett kompositionslager ovanpa WASM.
WIT (WebAssembly Interface Types)
WIT ar ett Interface Definition Language som later komponenter deklarera sina imports och exports med rika typer - strangar, records, listor, varianter, enums - inte bara i32 och 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; }
Toolchains som wit-bindgen genererar sprakspecifika bindings fran WIT-filer. En Rust-komponent och en Python-komponent kan utbyta strangar, records och listor genom WIT-kontrakt utan att nagon sida behover kanna till den andras implementationssprak.
Bygg din forsta WASM-modul med Rust
Rust har den mest mogna WASM-toolingen. Lat oss bygga ett praktiskt exempel: en bildbehandlingsmodul som kors i webblasaren.
Setup
# 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
Konfigurera Cargo.toml
[package] name = "image-processor" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2"
Skriv Rust-koden
// 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 }
Build
wasm-pack build --target web
Detta producerar en pkg/-mapp med:
image_processor_bg.wasm- den kompilerade WASM-binarenimage_processor.js- JavaScript-gluekod med TypeScript-definitionerpackage.json- redo att publicera pa npm
Anvandning i JavaScript
<!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>
Den centrala insikten: imageData.data ar en Uint8ClampedArray som backas av en ArrayBuffer. Nar den skickas till WASM delar den samma minne - ingen kopiering. Rust-funktionen modifierar pixlar direkt, och JavaScript-sidan ser andringarna omedelbart.
Lagre niva: manuell WASM-instansiering
Om du inte vill anvanda wasm-bindgen kan du instansiera WASM-moduler direkt:
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
Detta ar anvandbart nar du vill ha minimal overhead och inte behover rik typ-interop.
Prestanda: WASM vs JavaScript
Verkliga benchmarks visar betydande hastighetsokningar for CPU-intensiva uppgifter:
| Uppgift | JavaScript | WASM | Hastighetsforhattrning |
|---|---|---|---|
| 4K-bildbehandling | 180ms | 8ms (med SIMD) | 22x |
| Bildskalering (4K) | 250ms | 45ms | 5,5x |
| Fysiksimulering (10K entiteter) | Tappar frames | Jamt 60fps | ~10x |
| JSON-parsing (stor payload) | 12ms | 3ms | 4x |
| Kryptografisk hashning | 45ms | 6ms | 7,5x |
WASM kors pa ungefar 95 % av nativ kodhastighet. De storsta vinsterna kommer fran:
- Forutsagbar prestanda (ingen JIT-uppvarmning, inga GC-pauser)
- SIMD-instruktioner for parallell databehandling
- Direkt minnesatkomst utan garbage collector-interferens
Dar WASM INTE ar snabbare: DOM-manipulation, sma berakningar, I/O-bundna uppgifter. JavaScript ar redan optimerat for dessa.
Produktionsanvandning
Figma: realtids-vektorrendering
Figmas karn-rendering-motor ar C++ kompilerad till WASM. Varje form, gradient och effekt beraknas i WASM och ritas pa ett Canvas-element. Detta gor att Figma kan hantera komplexa designer med tusentals lager i 60fps i webblasaren - prestanda som skulle vara omojlig i rent JavaScript.
Adobe Photoshop pa webben
Adobe portade viktiga Photoshop-filter och -verktyg till WASM med Rust. Deras benchmarks visar 4K-bildbehandling pa 22ms med WASM SIMD jamfort med 180ms i JavaScript - en 8x forbattring som gor realtids-filterforhandsvisningar mojliga.
Cloudflare Workers
Cloudflare kor WASM-moduler i V8-isolates over 330+ edge-platser. Cold starts ar 1-5ms (jamfort med 100-500ms for containerbaserad serverless). I februari 2026 distribuerade de Llama-3-8b-inferens over sitt edge-natverk med WASM.
Google Meet
Bakgrundsoskarpning och virtuella bakgrunder i Google Meet anvander WASM med SIMD for realtids-videobearbetning. WASM-modulen bearbetar varje videoframe tillrackligt snabbt for att upprattahalla jamt video vid 30fps.
Webblasarstod (2026)
| Funktion | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Core WASM | Fullt | Fullt | Fullt | Fullt |
| Threads | Ja | Ja | Ja | Ja |
| SIMD (128-bit) | Ja | Ja | Ja | Ja |
| WasmGC | 119+ | 120+ | 18.2+ | Ja |
| Exception Handling | Ja | Ja | Ja | Ja |
| Memory64 | Ja | Ja | Delvis | Ja |
Alla stora webblasare stoder WASM fullt ut. De nyare funktionerna (WasmGC, Exception Handling) har natt bred tillganglighet.
Tooling-referens
| Verktyg | Syfte | Installation |
|---|---|---|
| wasm-pack | Bygg Rust till WASM, generera npm-paket | cargo install wasm-pack |
| wasm-bindgen | Rust/JS-interop-bindings (anvands av wasm-pack) | Dependency i Cargo.toml |
| wasm-opt | Optimering av binarstorlek (50%+ reduktion) | Del av Binaryen: brew install binaryen |
| wit-bindgen | Generera bindings fran WIT-filer | cargo install wit-bindgen-cli |
| Wasmtime | Server-side WASM-runtime (referens-WASI-implementation) | brew install wasmtime |
| Wasmer | Alternativ WASM-runtime med WASI-stod | curl https://get.wasmer.io -sSfL | sh |
| wasm-feature-detect | Detektering av webblasarfunktioner vid korning | npm install wasm-feature-detect |
Optimera binarstorlek
WASM-binarer kan vara stora. Sa har krymper du dem:
# 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
En typisk Rust-WASM-modul gar fran 500KB till under 50KB med dessa optimeringar.
Startroadmap
Slutsats
WebAssembly ar inte langre experimentellt. Det ar en produktionsteknologi som anvands av nagra av de mest kravande applikationerna pa webben. Nastan nativ prestanda, sandboxad sakerhet och universell portabilitet - inget annat kompileringsmal ger dig alla tre.
Du behover inte skriva om hela din applikation i WASM. Borja med en enda CPU-intensiv funktion - ett bildfilter, en dataparser, en fysikberakning - kompilera den till WASM och anropa den fran JavaScript. Mat skillnaden. Beslu sedan var WASM kan hjalpa ytterligare.
Toolingen ar mogen, webblasarstod ar universellt och ekosystemet vaxer. Om du skriver Rust ar du redan ett kommando fran webblasaren.
Startchecklista:
- Rust och wasm-pack installerat
- Forsta WASM-modulen byggd och korande i webblasaren
- JavaScript-interop fungerar (anropa WASM fran JS)
- Release-build med storleksoptimeringar tillampat
- Prestanda benchmarkad mot rent JavaScript-ekvivalent
- WASI utforskat med Wasmtime for server-side anvandning