1~
2WebAssembly (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.
3~
4Chrome 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.
5~
6Den har guiden tacker allt du behover veta for att borja bygga med WebAssembly.
7~
8## Vad ar WebAssembly?
9~
10WebAssembly 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.
11~
12```mermaid
13graph LR
14    Rust[Rust / C / C++] --> Compiler[Compiler]
15    Compiler --> WASM[.wasm Binary]
16    WASM --> Browser[Browser V8/SpiderMonkey]
17    WASM --> Server[Server Wasmtime]
18    WASM --> Edge[Edge Cloudflare Workers]
19    WASM --> Embedded[Embedded WAMR]
20```
21~
22### Hur det fungerar
23~
24WASM 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.
25~
26Viktiga egenskaper:
27~
28- **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.
29- **Linjart minne**: en enda sammanhangande `ArrayBuffer` som delas mellan WASM och varden. Komplex data (strangar, structs) skickas genom att skriva till minnet och dela en pekare.
30- **Typbegransat**: WASM stoder naturt bara fyra typer: `i32`, `i64`, `f32`, `f64`. Allt annat (strangar, arrayer, objekt) kraver kodning via linjart minne eller Component Model.
31- **Portabelt**: samma `.wasm`-binar kors pa vilken plattform som helst med en WASM-runtime, utan omkompilering.
32~
33### WASM vs JavaScript
34~
35WASM ersatter inte JavaScript. Det kompletterar det.
36~
37| Aspekt | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsing** | Parsa + kompilera vid korning | Forkompilerad binar, bara avkodning |
40| **Exekveringshastighet** | JIT-optimerad, variabel | Nastan nativ, konsekvent |
41| **Uppstartstid** | Snabb for sma skript | Snabb avkodning, forutsagbar |
42| **DOM-atkomst** | Direkt | Indirekt (via JS-gluekod) |
43| **Bast for** | UI, DOM-manipulation, event-hantering | CPU-intensiva berakningar |
44| **Garbage collection** | Inbyggd | WasmGC (ny) eller manuell |
45~
46Anvand JavaScript for UI- och DOM-arbete. Anvand WASM for tunga berakningar: bildbehandling, videokodning, fysiksimulationer, kryptografi, databearbetning.
47~
48## WASM 3.0: vad ar nytt
49~
50WebAssembly 3.0 blev en W3C-standard i september 2025 och standardiserade nio funktioner som hade varit under utveckling i aratal.
51~
52| Funktion | Vad den mojliggor |
53|---------|----------------|
54| **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+. |
55| **Exception Handling** | Nativt `try`/`catch` i WASM. Tidigare kravde exceptions dyra rundturer till JavaScript. |
56| **Tail Calls** | Mojliggor effektiv rekursion utan stack overflow. Avgurande for funktionella sprak. |
57| **Relaxed SIMD** | 128-bitars vektorinstruktioner for parallell databehandling. Mojliggor haruvaruspecifika optimeringar. |
58| **Memory64** | Bryter igenom 4 GB-gransen for linjart minne. Kravs for storskalig databehandling. |
59| **Multi-memory** | Flera oberoende minnesregioner i en modul. |
60~
61Den 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.
62~
63## WASI: WebAssembly bortom webblasaren
64~
65WASM 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.
66~
67```mermaid
68graph TD
69    subgraph "Browser"
70        B[WASM Module] --> Web[Web APIs\nDOM, Fetch, Canvas]
71    end
72~
73    subgraph "Server / Edge / Embedded"
74        S[WASM Module] --> WASI[WASI Interfaces]
75        WASI --> FS[wasi:filesystem]
76        WASI --> Net[wasi:sockets]
77        WASI --> HTTP[wasi:http]
78        WASI --> Clock[wasi:clocks]
79        WASI --> Rand[wasi:random]
80    end
81```
82~
83WASI Preview 2 (den nuvarande stabila versionen) definierar dessa granssnitt:
84~
85- `wasi:filesystem`  -  filoperationer via capability-handles (inte traditionella fildeskriptorer)
86- `wasi:sockets`  -  TCP/UDP-natverk
87- `wasi:http`  -  HTTP-forfragan/svar-hantering
88- `wasi:clocks`  -  vaggklocka, monoton klocka
89- `wasi:random`  -  kryptografisk slumpmassighet
90- `wasi:cli`  -  kommandoradsargument, miljovariabler, stdio
91~
92Nyckelprincipen 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.
93~
94### Vagen till WASI 1.0
95~
96WASI 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.
97~
98## Component Model
99~
100Karn-WASM-moduler kan bara utbyta tal. **Component Model** loser denna begransning genom att lagga till ett rikt typsystem och ett kompositionslager ovanpa WASM.
101~
102### WIT (WebAssembly Interface Types)
103~
104WIT 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`.
105~
106```wit
107// calculator.wit
108package myorg:calculator@1.0.0;
109~
110interface operations {
111    record calculation {
112        expression: string,
113        result: f64,
114        timestamp: u64,
115    }
116~
117    add: func(a: f64, b: f64) -> f64;
118    multiply: func(a: f64, b: f64) -> f64;
119    history: func() -> list<calculation>;
120}
121~
122world calculator {
123    export operations;
124}
125```
126~
127Toolchains 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.
128~
129## Bygg din forsta WASM-modul med Rust
130~
131Rust har den mest mogna WASM-toolingen. Lat oss bygga ett praktiskt exempel: en bildbehandlingsmodul som kors i webblasaren.
132~
133### Setup
134~
135```bash
136# Install the WASM target for Rust
137rustup target add wasm32-unknown-unknown
138~
139# Install wasm-pack (builds Rust to WASM + generates JS bindings)
140cargo install wasm-pack
141~
142# Create a new library project
143cargo new --lib image-processor
144cd image-processor
145```
146~
147### Konfigurera Cargo.toml
148~
149```toml
150[package]
151name = "image-processor"
152version = "0.1.0"
153edition = "2021"
154~
155[lib]
156crate-type = ["cdylib"]
157~
158[dependencies]
159wasm-bindgen = "0.2"
160```
161~
162### Skriv Rust-koden
163~
164```rust
165// src/lib.rs
166use wasm_bindgen::prelude::*;
167~
168/// Convert an image buffer to grayscale.
169/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
170/// Output: Modified in place for zero-copy performance.
171#[wasm_bindgen]
172pub fn grayscale(pixels: &mut [u8]) {
173    for chunk in pixels.chunks_exact_mut(4) {
174        let r = chunk[0] as f32;
175        let g = chunk[1] as f32;
176        let b = chunk[2] as f32;
177        // ITU-R BT.709 luminance coefficients
178        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
179        chunk[0] = gray;
180        chunk[1] = gray;
181        chunk[2] = gray;
182        // chunk[3] is alpha, leave unchanged
183    }
184}
185~
186/// Adjust brightness of an image.
187/// factor > 1.0 brightens, < 1.0 darkens.
188#[wasm_bindgen]
189pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
190    for chunk in pixels.chunks_exact_mut(4) {
191        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
192        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
193        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
194    }
195}
196~
197/// Invert all colors in the image.
198#[wasm_bindgen]
199pub fn invert(pixels: &mut [u8]) {
200    for chunk in pixels.chunks_exact_mut(4) {
201        chunk[0] = 255 - chunk[0];
202        chunk[1] = 255 - chunk[1];
203        chunk[2] = 255 - chunk[2];
204    }
205}
206~
207/// Calculate the average brightness of an image (0-255).
208#[wasm_bindgen]
209pub fn average_brightness(pixels: &[u8]) -> f32 {
210    let mut total: f64 = 0.0;
211    let pixel_count = pixels.len() / 4;
212    for chunk in pixels.chunks_exact(4) {
213        let luminance = 0.2126 * chunk[0] as f64
214            + 0.7152 * chunk[1] as f64
215            + 0.0722 * chunk[2] as f64;
216        total += luminance;
217    }
218    (total / pixel_count as f64) as f32
219}
220```
221~
222### Build
223~
224```bash
225wasm-pack build --target web
226```
227~
228Detta producerar en `pkg/`-mapp med:
229- `image_processor_bg.wasm`  -  den kompilerade WASM-binaren
230- `image_processor.js`  -  JavaScript-gluekod med TypeScript-definitioner
231- `package.json`  -  redo att publicera pa npm
232~
233### Anvandning i JavaScript
234~
235```html
236<!DOCTYPE html>
237<html>
238<head><title>WASM Image Processor</title></head>
239<body>
240  <canvas id="canvas" width="800" height="600"></canvas>
241  <button onclick="applyGrayscale()">Grayscale</button>
242  <button onclick="applyBrightness()">Brighten</button>
243  <button onclick="applyInvert()">Invert</button>
244~
245  <script type="module">
246    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";
247~
248    let ctx;
249    let imageData;
250~
251    async function setup() {
252      await init();
253      const canvas = document.getElementById("canvas");
254      ctx = canvas.getContext("2d");
255~
256      // Load an image onto the canvas
257      const img = new Image();
258      img.onload = () => {
259        ctx.drawImage(img, 0, 0);
260        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
261      };
262      img.src = "photo.jpg";
263    }
264~
265    window.applyGrayscale = () => {
266      grayscale(imageData.data);
267      ctx.putImageData(imageData, 0, 0);
268    };
269~
270    window.applyBrightness = () => {
271      adjust_brightness(imageData.data, 1.3);
272      ctx.putImageData(imageData, 0, 0);
273    };
274~
275    window.applyInvert = () => {
276      invert(imageData.data);
277      ctx.putImageData(imageData, 0, 0);
278    };
279~
280    setup();
281  </script>
282</body>
283</html>
284```
285~
286Den 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.
287~
288## Lagre niva: manuell WASM-instansiering
289~
290Om du inte vill anvanda `wasm-bindgen` kan du instansiera WASM-moduler direkt:
291~
292```javascript
293const response = await fetch("calculator.wasm");
294const { instance } = await WebAssembly.instantiateStreaming(response, {
295  env: {
296    // Functions the WASM module can call
297    log_result: (value) => console.log("Result:", value),
298  },
299});
300~
301// Call exported functions
302const { add, multiply } = instance.exports;
303console.log(add(5, 3));       // 8
304console.log(multiply(4, 7));  // 28
305```
306~
307Detta ar anvandbart nar du vill ha minimal overhead och inte behover rik typ-interop.
308~
309## Prestanda: WASM vs JavaScript
310~
311Verkliga benchmarks visar betydande hastighetsokningar for CPU-intensiva uppgifter:
312~
313| Uppgift | JavaScript | WASM | Hastighetsforhattrning |
314|---------|-----------|------|---------|
315| 4K-bildbehandling | 180ms | 8ms (med SIMD) | 22x |
316| Bildskalering (4K) | 250ms | 45ms | 5,5x |
317| Fysiksimulering (10K entiteter) | Tappar frames | Jamt 60fps | ~10x |
318| JSON-parsing (stor payload) | 12ms | 3ms | 4x |
319| Kryptografisk hashning | 45ms | 6ms | 7,5x |
320~
321WASM kors pa ungefar 95 % av nativ kodhastighet. De storsta vinsterna kommer fran:
322- Forutsagbar prestanda (ingen JIT-uppvarmning, inga GC-pauser)
323- SIMD-instruktioner for parallell databehandling
324- Direkt minnesatkomst utan garbage collector-interferens
325~
326Dar WASM INTE ar snabbare: DOM-manipulation, sma berakningar, I/O-bundna uppgifter. JavaScript ar redan optimerat for dessa.
327~
328## Produktionsanvandning
329~
330### Figma: realtids-vektorrendering
331~
332Figmas 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.
333~
334### Adobe Photoshop pa webben
335~
336Adobe 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.
337~
338### Cloudflare Workers
339~
340Cloudflare 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.
341~
342### Google Meet
343~
344Bakgrundsoskarpning 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.
345~
346## Webblasarstod (2026)
347~
348| Funktion | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Fullt | Fullt | Fullt | Fullt |
351| Threads | Ja | Ja | Ja | Ja |
352| SIMD (128-bit) | Ja | Ja | Ja | Ja |
353| WasmGC | 119+ | 120+ | 18.2+ | Ja |
354| Exception Handling | Ja | Ja | Ja | Ja |
355| Memory64 | Ja | Ja | Delvis | Ja |
356~
357Alla stora webblasare stoder WASM fullt ut. De nyare funktionerna (WasmGC, Exception Handling) har natt bred tillganglighet.
358~
359## Tooling-referens
360~
361| Verktyg | Syfte | Installation |
362|------|---------|---------|
363| **wasm-pack** | Bygg Rust till WASM, generera npm-paket | `cargo install wasm-pack` |
364| **wasm-bindgen** | Rust/JS-interop-bindings (anvands av wasm-pack) | Dependency i Cargo.toml |
365| **wasm-opt** | Optimering av binarstorlek (50%+ reduktion) | Del av Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Generera bindings fran WIT-filer | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Server-side WASM-runtime (referens-WASI-implementation) | `brew install wasmtime` |
368| **Wasmer** | Alternativ WASM-runtime med WASI-stod | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Detektering av webblasarfunktioner vid korning | `npm install wasm-feature-detect` |
370~
371### Optimera binarstorlek
372~
373WASM-binarer kan vara stora. Sa har krymper du dem:
374~
375```toml
376# Cargo.toml
377[profile.release]
378opt-level = "z"     # Optimize for size
379lto = true          # Link-time optimization
380codegen-units = 1   # Better optimization, slower compile
381strip = true        # Strip debug symbols
382```
383~
384```bash
385# Build in release mode
386wasm-pack build --release --target web
387~
388# Further optimize with wasm-opt
389wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm
390```
391~
392En typisk Rust-WASM-modul gar fran 500KB till under 50KB med dessa optimeringar.
393~
394## Startroadmap
395~
396```mermaid
397flowchart TD
398    A[Week 1: Basics] --> B[Week 2: Real Project]
399    B --> C[Week 3: WASI and Server-side]
400    C --> D[Month 2+: Production]
401~
402    A --> A1[Install Rust + wasm-pack]
403    A --> A2[Build hello-world WASM module]
404    A --> A3[Call WASM functions from JavaScript]
405~
406    B --> B1[Build image processor or game physics]
407    B --> B2[Use wasm-bindgen for rich types]
408    B --> B3[Benchmark against pure JS]
409~
410    C --> C1[Run WASM with Wasmtime]
411    C --> C2[Explore WASI interfaces]
412    C --> C3[Try Component Model with WIT]
413~
414    D --> D1[Optimize binary size]
415    D --> D2[Use SIMD for parallelism]
416    D --> D3[Deploy to Cloudflare Workers or browser]
417```
418~
419## Slutsats
420~
421WebAssembly 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.
422~
423Du 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.
424~
425Toolingen ar mogen, webblasarstod ar universellt och ekosystemet vaxer. Om du skriver Rust ar du redan ett kommando fran webblasaren.
426~
427> **Startchecklista:**
428>
429> - [x] Rust och wasm-pack installerat
430> - [x] Forsta WASM-modulen byggd och korande i webblasaren
431> - [x] JavaScript-interop fungerar (anropa WASM fran JS)
432> - [x] Release-build med storleksoptimeringar tillampat
433> - [x] Prestanda benchmarkad mot rent JavaScript-ekvivalent
434> - [x] WASI utforskat med Wasmtime for server-side anvandning
435~