1 
2WebAssembly (WASM) startede som en made at kore C++ i browseren. I 2026 korer det overalt  -  browsere, servere, edge-netvaerk, indlejrede enheder  -  og driver nogle af de mest kraevenede applikationer pa nettet. Figmas rendering-motor, Adobe Photoshop pa nettet, Google Meets videobehandling og Cloudflares edge-compute-platform korer alle pa WebAssembly.
3 
4Chrome Platform Status angiver WASM til cirka 5,5 % af alle Chrome-sideindlaesninger i begyndelsen af 2026, op fra 4,5 % aret for. Med WASM 3.0 som W3C-standard og WASI pa vej mod version 1.0 har okosystemet naet et vendepunkt.
5 
6Denne guide daekker alt, du skal vide for at begynde at bygge med WebAssembly.
7 
8## Hvad er WebAssembly?
9 
10WebAssembly er et binaert instruktionsformat designet som kompileringsmal. Du skriver kode i et hojniveausprog (Rust, C, C++, Go, Kotlin), kompilerer det til `.wasm` og korer det i ethvert miljo, der har en WASM-runtime  -  browsere, 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### Hvordan det virker
23 
24WASM er en **stakbaseret virtuel maskine**. Funktioner skubber vaerdier pa en operandstk og fjerner dem igen. Vaerts-runtime:en (V8 i Chrome, SpiderMonkey i Firefox) JIT-kompilerer WASM-bytekoden til nativ maskinkode, hvilket er grunden til, at ydeevnen er naesten nativ.
25 
26Vigtige egenskaber:
27 
28- **Sandboxet eksekvering**: WASM-moduler kan kun fa adgang til ressourcer, som vaerten eksplicit giver. Intet filsystem, intet netvaerk, ingen OS-adgang medmindre det er tilladt. Dette er fundamentalt anderledes end nativ kode.
29- **Lineaer hukommelse**: en enkelt sammenhaengende `ArrayBuffer`, der deles mellem WASM og vaerten. Komplekse data (strenge, structs) sendes ved at skrive til hukommelsen og dele en pointer.
30- **Typebegraenset**: WASM understotter nativt kun fire typer: `i32`, `i64`, `f32`, `f64`. Alt andet (strenge, arrays, objekter) kraever kodning via lineaer hukommelse eller Component Model.
31- **Portabelt**: den samme `.wasm`-binaerfil korer pa enhver platform med en WASM-runtime, uden rekompilering.
32 
33### WASM vs JavaScript
34 
35WASM erstatter ikke JavaScript. Det supplerer det.
36 
37| Aspekt | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsing** | Parse + kompiler ved korsel | Praekompileret binaerfil, kun afkodning |
40| **Eksekveringshastighed** | JIT-optimeret, variabel | Naesten nativ, konsistent |
41| **Opstartstid** | Hurtig for sma scripts | Hurtig afkodning, forudsigelig |
42| **DOM-adgang** | Direkte | Indirekte (via JS-gluekode) |
43| **Bedst til** | UI, DOM-manipulation, event-handtering | CPU-intensive beregninger |
44| **Garbage collection** | Indbygget | WasmGC (ny) eller manuel |
45 
46Brug JavaScript til UI- og DOM-arbejde. Brug WASM til tunge beregninger: billedbehandling, videokodning, fysiksimulationer, kryptografi, databehandling.
47 
48## WASM 3.0: hvad er nyt
49 
50WebAssembly 3.0 blev en W3C-standard i september 2025 og standardiserede ni funktioner, der havde vaeret under udvikling i arevis.
51 
52| Funktion | Hvad den muliggor |
53|---------|----------------|
54| **WasmGC** | Nativ garbage collection i WASM. Styrede sprog (Java, Kotlin, Dart) kan kompilere til WASM uden at medbringe deres egen GC-runtime. Understottet i Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | Nativt `try`/`catch` i WASM. Tidligere kraevede exceptions dyre rundture til JavaScript. |
56| **Tail Calls** | Muliggor effektiv rekursion uden stack overflow. Afgurende for funktionelle sprog. |
57| **Relaxed SIMD** | 128-bit vektorinstruktioner til parallel databehandling. Muliggor hardwarespecifikke optimeringer. |
58| **Memory64** | Bryder gennem 4 GB-graensen for lineaer hukommelse. Nodvendigt for storskala databehandling. |
59| **Multi-memory** | Flere uafhaengige hukommelsesregioner i et modul. |
60 
61Den mest virkningsfulde er **WasmGC**. Tidligere betod kompilering af Java eller Kotlin til WASM, at man sendte en hel garbage collector som en del af binaerfilen, hvilket opblaste filstorrelserne. Nu handler browserens egen GC hukommelsesstyringen for WASM-moduler, lige som den gor for JavaScript.
62 
63## WASI: WebAssembly ud over browseren
64 
65WASM i browseren er kraftfuldt, men **WASI (WebAssembly System Interface)** er det, der gor WASM til en universel runtime. WASI leverer standardiserede graenseflader for systemressourcer  -  filer, netvaerk, ure, tilfaeldige tal  -  og muliggor, at WASM-moduler kan kore uden for browseren.
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 nuvaerende stabile udgivelse) definerer disse graenseflader:
84 
85- `wasi:filesystem`  -  filoperationer via capability-handles (ikke traditionelle fildeskriptorer)
86- `wasi:sockets`  -  TCP/UDP-netvaerk
87- `wasi:http`  -  HTTP-request/response-handtering
88- `wasi:clocks`  -  vaegur, monotont ur
89- `wasi:random`  -  kryptografisk tilfaeldighed
90- `wasi:cli`  -  kommandolinjeargumenter, miljovariabler, stdio
91 
92Nogleprincippet er **capability-baseret sikkerhed**: et WASM-modul kan ikke fa adgang til filsystemet, medmindre vaerten eksplicit giver et handle til en specifik mappe. Dette gor WASI fundamentalt sikrere end at kore native eksekverbare filer.
93 
94### Vejen til WASI 1.0
95 
96WASI 0.3.0 (med tilfoejelse af async/concurrency-primitiver) forventes i 2026, med WASI 1.0 derefter. Den vigtigste nyhed er sprogintegreret async med zero-copy streaming I/O.
97 
98## Component Model
99 
100Kerne-WASM-moduler kan kun udveksle tal. **Component Model** loser denne begraensning ved at tilfoeje et rigt typesystem og et kompositionslag oven pa WASM.
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT er et Interface Definition Language, der lader komponenter deklarere deres imports og exports med rige typer  -  strenge, records, lister, varianter, enums  -  ikke kun `i32` og `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` genererer sprogspecifikke bindings fra WIT-filer. En Rust-komponent og en Python-komponent kan udveksle strenge, records og lister gennem WIT-kontrakter, uden at nogen af siderne behover at kende den andens implementeringssprog.
128 
129## Byg dit forste WASM-modul med Rust
130 
131Rust har den mest modne WASM-tooling. Lad os bygge et praktisk eksempel: et billedbehandlingsmodul, der korer i browseren.
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### Konfigurer 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 
228Dette producerer en `pkg/`-mappe med:
229- `image_processor_bg.wasm`  -  den kompilerede WASM-binaerfil
230- `image_processor.js`  -  JavaScript-gluekode med TypeScript-definitioner
231- `package.json`  -  klar til publicering pa npm
232 
233### Brug 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 centrale indsigt: `imageData.data` er et `Uint8ClampedArray` understottet af en `ArrayBuffer`. Nar det sendes til WASM, deler det den samme hukommelse  -  ingen kopiering. Rust-funktionen aendrer pixels direkte, og JavaScript-siden ser aendringerne ojeblikkeligt.
287 
288## Lavere niveau: manuel WASM-instantiering
289 
290Hvis du ikke onsker at bruge `wasm-bindgen`, kan du instantiere WASM-moduler direkte:
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 
307Dette er nyttigt, nar du onsker minimal overhead og ikke behover rig type-interop.
308 
309## Ydeevne: WASM vs JavaScript
310 
311Virkelige benchmarks viser betydelige hastighedsforbedringer for CPU-intensive opgaver:
312 
313| Opgave | JavaScript | WASM | Hastighedsforhoejelse |
314|--------|-----------|------|---------|
315| 4K-billedbehandling | 180ms | 8ms (med SIMD) | 22x |
316| Billedskalering (4K) | 250ms | 45ms | 5,5x |
317| Fysiksimulering (10K entiteter) | Taber frames | Javaevnt 60fps | ~10x |
318| JSON-parsing (stor payload) | 12ms | 3ms | 4x |
319| Kryptografisk hashing | 45ms | 6ms | 7,5x |
320 
321WASM korer med cirka 95 % af nativ kodehastighed. De storste gevinster kommer fra:
322- Forudsigelig ydeevne (ingen JIT-opvarmning, ingen GC-pauser)
323- SIMD-instruktioner til parallel databehandling
324- Direkte hukommelsesadgang uden garbage collector-interferens
325 
326Hvor WASM IKKE er hurtigere: DOM-manipulation, sma beregninger, I/O-bundne opgaver. JavaScript er allerede optimeret til disse.
327 
328## Produktionsanvendelser
329 
330### Figma: realtids-vektorrendering
331 
332Figmas kerne-rendering-motor er C++ kompileret til WASM. Enhver form, gradient og effekt beregnes i WASM og tegnes pa et Canvas-element. Dette gor det muligt for Figma at handtere komplekse designs med tusindvis af lag ved 60fps i browseren  -  ydeevne, der ville vaere umulig i rent JavaScript.
333 
334### Adobe Photoshop pa nettet
335 
336Adobe porterede vigtige Photoshop-filtre og -vaerktojer til WASM med Rust. Deres benchmarks viser 4K-billedbehandling pa 22ms med WASM SIMD mod 180ms i JavaScript  -  en 8x forbedring, der gor realtids-filterforhandsvisninger mulige.
337 
338### Cloudflare Workers
339 
340Cloudflare korer WASM-moduler i V8-isolates pa over 330 edge-lokationer. Cold starts er 1-5ms (sammenlignet med 100-500ms for containerbaseret serverless). I februar 2026 udrullede de Llama-3-8b-inferens over deres edge-netvaerk med WASM.
341 
342### Google Meet
343 
344Baggrundssluering og virtuelle baggrunde i Google Meet bruger WASM med SIMD til realtids-videobehandling. WASM-modulet behandler hvert videoframe hurtigt nok til at opretholde javaevn video ved 30fps.
345 
346## Browserunderstottelse (2026)
347 
348| Funktion | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Fuld | Fuld | Fuld | Fuld |
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 
357Alle store browsere understotter WASM fuldt ud. De nyere funktioner (WasmGC, Exception Handling) har opnaet bred tilgaengelighed.
358 
359## Tooling-reference
360 
361| Vaerktoej | Formal | Installation |
362|------|---------|---------|
363| **wasm-pack** | Byg Rust til WASM, generer npm-pakker | `cargo install wasm-pack` |
364| **wasm-bindgen** | Rust/JS-interop-bindings (brugt af wasm-pack) | Dependency i Cargo.toml |
365| **wasm-opt** | Optimering af binaerfilstorrelse (50%+ reduktion) | Del af Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Generer bindings fra WIT-filer | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Server-side WASM-runtime (reference-WASI-implementering) | `brew install wasmtime` |
368| **Wasmer** | Alternativ WASM-runtime med WASI-understottelse | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Runtime browser-funktionsdetektion | `npm install wasm-feature-detect` |
370 
371### Optimering af binaerfilstorrelse
372 
373WASM-binaerfiler kan vaere store. Sadan formindsker 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 
392Et typisk Rust-WASM-modul gar fra 500KB til under 50KB med disse optimeringer.
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## Konklusion
420 
421WebAssembly er ikke laengere eksperimentelt. Det er en produktionsteknologi, der bruges af nogle af de mest kraevende applikationer pa nettet. Naesten nativ ydeevne, sandboxet sikkerhed og universel portabilitet  -  intet andet kompileringsmal giver dig alle tre.
422 
423Du behover ikke omskrive hele din applikation i WASM. Start med en enkelt CPU-intensiv funktion  -  et billedfilter, en dataparser, en fysikberegning  -  kompiler den til WASM og kald den fra JavaScript. Mal forskellen. Beslu derefter, hvor WASM ellers kan hjaelpe.
424 
425Toolingen er moden, browserunderstottelsen er universel, og okosystemet vokser. Hvis du skriver Rust, er du allerede en kommando fra browseren.
426 
427> **Startcheckliste:**
428>
429> - [x] Rust og wasm-pack installeret
430> - [x] Forste WASM-modul bygget og korende i browseren
431> - [x] JavaScript-interop virker (kald WASM fra JS)
432> - [x] Release-build med storrelsesoptimeringer anvendt
433> - [x] Ydeevne benchmarket mod rent JavaScript-akvivalent
434> - [x] WASI udforsket med Wasmtime til server-side anvendelser
435