To WebAssembly (WASM) xekinise os enas tropos gia na ekteleite C++ ston browser. To 2026, trexei pantoy - browsers, servers, edge diktya, ensomates syskeves - kai trofoditei merikes apo tis pio apaitiikies efarmoges sto web. I mixani renderarismatos tis Figma, to Adobe Photoshop sto web, i epexergasia video toy Google Meet kai i platforma edge computing toy Cloudflare - ola trexoyn se WebAssembly.
To Chrome Platform Status deixnei oti to WASM vriskete sto peripoy 5,5% olon ton fortoseon selidas sto Chrome stis arxes toy 2026, apo 4,5% ton proigoymeno xrono. Me to WASM 3.0 na ginete protypo W3C kai to WASI na orimzei pros tin ekdosi 1.0, to oikosystima exei ftasei se simio kampes.
Aftos o odigos kalyptei ola osa prepei na gnorixeis gia na arxiseis na chtizeis me WebAssembly.
Ti einai to WebAssembly?
To WebAssembly einai ena binario format odigion sxediasmenoo os stoxos syllogis. Grafeis kodika se glossa ypssiiloy epipedoy (Rust, C, C++, Go, Kotlin), ton metafraxeis se .wasm kai ton ekteleis se opoidipote perivvalon poy exei WASM runtime - browsers, Node.js, Cloudflare Workers, Wasmtime i Wasmer.
Pos leitoyrgei
To WASM einai mia virtual machine vasiismeni se stoiva. Oi synartiseis topothethyn kai afairoun times apo mia stoiva telesion. To runtime toy filoxenoynte (V8 sto Chrome, SpiderMonkey sto Firefox) kanei JIT-compilation to WASM bytecode se gennimeno kodika mixanis, gi afto i apodosi einai konta sto native.
Vasika xaraktiristika:
- Ektelesei se sandbox: ta WASM modules mporoun na exoun prosvasi mono sta resources poy o filoxenonteas parexei riita. Den yparxei prosvasi se filesystem, diktyo i leitourgiko systima ektos an epitrapei. Afto einai thimelioddoos diaforetiko apo ton native kodika.
- Grammmiki mnimi: enas monos synexis
ArrayBufferpoy mirazetai metaxy WASM kai filoxenoynte. Syntheta dedomena (strings, structs) metaferontai me egrafi sti mnimi kai koinopoiisi deikti. - Periorismeni typoi: to WASM ypostirixei native mono tessera types:
i32,i64,f32,f64. Ola ta alla (strings, arrays, objects) apaytoun kodikopiiisi mesa apo ti grammiki mnimi i to Component Model. - Fornitotita: to idio
.wasmbinary trexei se opoiadipote platforma me WASM runtime, xoris epanametafrasi.
WASM vs JavaScript
To WASM den antikathistaa tin JavaScript. Ti symplirorei.
| Ptixii | JavaScript | WebAssembly |
|---|---|---|
| Analysi | Analysi + metafrasi se xrono ektelesis | Prometafrasmeno binary, mono apokodikopiiisi |
| Taxytita ektelesis | JIT-veltiomeni, metavliti | Konta se native, syntomi |
| Ekkiniisi | Grigori gia mikra scripts | Grigori apokodikopiiisi, provlepii |
| Prosvasi DOM | Amesi | Emesi (mesa apo JS glue) |
| Kalytero gia | UI, DOM manipulation, diaxirisi events | CPU-inteniis ypologismous |
| Garbage collection | Ensoomatoomeno | WasmGC (neo) i xeirokiinto |
Xrisimopiiise JavaScript gia UI kai DOM ergasia. Xrisimopiiise WASM gia varous ypologismous: epexergasia eikonon, kodikopiiisi video, fysikes proomoioseis, kryptografia, analysi dedomenon.
WASM 3.0: Ti neo yparxei
To WebAssembly 3.0 egine protypo W3C ton Septemvrio 2025, typopoiontas ennea xaraktiristika poy itan ypo anaptyksi gia xronia.
| Xaraktiristiko | Ti epetrepei |
|---|---|
| WasmGC | Gennimeni syllogi skoypidion sto WASM. Diaxeiriziomenes glosses (Java, Kotlin, Dart) mporoyn na metafraztoun se WASM xoris na sylperilvanoun to diko tous GC runtime. Ypostirrixetai se Chrome 119+, Firefox 120+, Safari 18.2+. |
| Exception Handling | Gennimeno try/catch sto WASM. Prooigoymenos, ta exceptions apaytousan akriva roundtrips sti JavaScript. |
| Tail Calls | Epetrepei apotelesmmatiki anadromi xoris stack overflow. Krisimo gia functional glosses. |
| Relaxed SIMD | 128-bit vektoriikes odigies gia parallili epexergasia dedomenon. Epetrepei hardware-specific veltiostiopoiiseis. |
| Memory64 | Xeperna to orio grammikis mniimis 4GB. Apaiiteto gia epexergasia dedomenon megalis kliimakas. |
| Multi-memory | Pollaples anexartiites perioxes mniimis se ena module. |
To pio simaantiko einai to WasmGC. Prin apo afto, i metafrasi Java i Kotlin se WASM siimaine apostoli enos olokliiroy garbage collector os meros toy binary, poy foyskone ta megethi arxeion. Tora o idios GC toy browser diaxeirizetai ti diaxeirisi mniimis gia ta WASM modules, opos akriviis kanei gia ti JavaScript.
WASI: WebAssembly pera apo ton browser
To WASM ston browser einai dynato, alla to WASI (WebAssembly System Interface) einai afto poy kanei to WASM enan pagkosmio runtime. To WASI parexei typopoiimenes diepafes gia poroys systimatos - arxeia, diktyo, roloia, tyxaioys arithmous - epitrepontas sta WASM modules na trexoun exo apo ton browser.
To WASI Preview 2 (i trexousa statheri ekdosi) orixei tis akloythes diepafes:
wasi:filesystem- leitoyrgies arxeion meso capability handles (oxi paradosiakous file descriptors)wasi:sockets- TCP/UDP diktyowasi:http- diaxirisi HTTP request/responsewasi:clocks- roloi toixoy, monotonico roloiwasi:random- kryptografiki tyxaiotitawasi:cli- orismmata grammis entoloon, perivallontiikes metavlites, stdio
I vasiki arxi einai i asfaleia vasismeni se dynamotites: ena WASM module den mporei na exei prosvasi sto filesystem ektos an o filoxenonteas parexei riita ena handle se sygkekrimeno fakelo. Afto kanei to WASI thymelioddoos asfalessteroo apo tin ektelesei gennimennon ektelessimon arxeion.
I poreia pros to WASI 1.0
To WASI 0.3.0 (prosthiiki async/symplektikon primitiivon) anameenetai to 2026, me to WASI 1.0 na akoloythei. I kyria prosthiki einai to glossiika ensoomatoomeno async me zero-copy streaming I/O.
To Component Model
Ta vasika WASM modules mporoyn na atallaaxoun mono arithmoys. To Component Model lyni afton ton periorismo prosthetondas ena plousio systima typon kai ena epipedo synthetotitas pano apo to WASM.
WIT (WebAssembly Interface Types)
To WIT einai mia glossa orismoy diepafon poy epitrepei sta components na dilosoun ta imports kai exports tous me ploysious typous - strings, records, lists, variants, enums - oxi mono i32 kai 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; }
Ergaleia opos to wit-bindgen paragoun glossikes syndeseis apo arxeia WIT. Ena Rust component kai ena Python component mporoyn na antalaaxoun strings, records kai lists meso WIT contracts xoris kamia pleyra na gnorixei ti glossa ylpoiisis tis allis.
Xtiismo toy protoy WASM module soy me Rust
I Rust exei ta pio orimma ergaleia WASM. As chtisoyame ena praktiko paradeigma: ena module epexergasias eikonon poy trexei ston browser.
Ryhthmisi
# 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
Ryhthmisi Cargo.toml
[package] name = "image-processor" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2"
Grapse ton kodika Rust
// 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 }
Chtismo
wasm-pack build --target web
Afto dimiourgei enan katalogo pkg/ me:
image_processor_bg.wasm- to metafrasmeno WASM binaryimage_processor.js- JavaScript glue code me TypeScript definitionspackage.json- etoimo gia dimosieysi sto npm
Xrisi se 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>
To vasiko symperasma: to imageData.data einai ena Uint8ClampedArray poy ypostirixetai apo ena ArrayBuffer. Otan perasetai sto WASM, moirazetai tin idia mnimi - xoris antigrafi. I synartisi Rust tropopoiei ta pixels epi topoy, kai i pleyra JavaScript vlepei tis allages amesa.
Xamilitero epipedo: xeirokiiiti dimioyrgia WASM
An den theleis na xrisimopiiiseis to wasm-bindgen, mporeis na dimioyrgiiseis WASM modules apefthias:
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
Afto einai xrisimo otan theleis elaxisto overhead kai den xreiaresai ploysio type interop.
Apodosi: WASM vs JavaScript
Pragmatika benchmarks deixnoun simantiikes epiditaxynsis gia CPU-inteniis ergasies:
| Ergasia | JavaScript | WASM | Epiditaxynsii |
|---|---|---|---|
| Epexergasia eikonas 4K | 180ms | 8ms (me SIMD) | 22x |
| Allagi megethos eikonas (4K) | 250ms | 45ms | 5,5x |
| Fysiki promoiosi (10K ontotites) | Aptosi frames | Omalo 60fps | ~10x |
| Analysi JSON (megalo payload) | 12ms | 3ms | 4x |
| Kryptografiko hashing | 45ms | 6ms | 7,5x |
To WASM trexei sto peripoy 95% tis taxytitas toy native kodika. Ta megalitera kerdi provainoun apo:
- Provlepsimi apodosi (xoris JIT warmup, xoris GC pauses)
- SIMD odigies gia parallili epexergasia dedomenon
- Amesi prosvasi sti mnimi xoris paremvasi garbage collector
Opoy to WASM DEN einai grigoritero: DOM manipulation, mikres ypologismoi, I/O-bound ergasies. I JavaScript einai idi veltiomeni gi afta.
Periptoseis xrisis stin paragogi
Figma: Renderarisma vectors se pragmatiko xrono
I kyria mixani renderarismatos tis Figma einai C++ metafrasmeni se WASM. Kathe sxima, gradient kai efekt ypologizetai sto WASM kai ixnografeite se ena Canvas element. Afto epitrepei sti Figma na diaxeirizetai sintheta sxedia me xiliades layers sta 60fps ston browser - apodosi poy tha itan adynati se kathara JavaScript.
Adobe Photoshop sto web
I Adobe metafere ta vasika filtra kai ergaleia toy Photoshop se WASM xrisimopoionteas Rust. Ta benchmarks tous deixnoun epexergasia eikonas 4K se 22ms me WASM SIMD enanti 180ms se JavaScript - mia 8x veltioosi poy kanei dynati tin pragmatikou xronou proepiskopisi filtron.
Cloudflare Workers
To Cloudflare trexei WASM modules se V8 isolates se 330+ edge topothesies. Ta kria starts einai 1-5ms (se sygrisi me 100-500ms gia container-based serverless). Ton Fevrouario 2026, anaptixxan inference Llama-3-8b se olo to edge diktyo tous xrisimopoionteas WASM.
Google Meet
To tholoma fontoy kai ta virtual backgrounds sto Google Meet xrisimopoioun WASM me SIMD gia epexergasia video se pragmatiko xrono. To WASM module epexergazetai kathe frame video arketa grigora gia na diatirei omalo video sta 30fps.
Ypostirixi browser (2026)
| Xaraktiristiko | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Core WASM | Plires | Plires | Plires | Plires |
| Threads | Nai | Nai | Nai | Nai |
| SIMD (128-bit) | Nai | Nai | Nai | Nai |
| WasmGC | 119+ | 120+ | 18.2+ | Nai |
| Exception Handling | Nai | Nai | Nai | Nai |
| Memory64 | Nai | Nai | Merikos | Nai |
Oloi oi kyrioi browsers ypostirixoun pliros to WASM. Ta neotera xaraktiristika (WasmGC, Exception Handling) exoun ftasei se eyreia diathesimotita.
Anafora ergaleion
| Ergaleio | Skopos | Egatastasi |
|---|---|---|
| wasm-pack | Chtismo Rust se WASM, dimioyrgia npm packages | cargo install wasm-pack |
| wasm-bindgen | Rust/JS interop bindings (xrisimopoieitai apo wasm-pack) | Dependency sto Cargo.toml |
| wasm-opt | Veltiostopiiisi megethous binary (50%+ meiosii) | Meros toy Binaryen: brew install binaryen |
| wit-bindgen | Dimioyrgia bindings apo arxeia WIT | cargo install wit-bindgen-cli |
| Wasmtime | Server-side WASM runtime (anafora ylpoiisis WASI) | brew install wasmtime |
| Wasmer | Enallaktiko WASM runtime me ypostirixi WASI | curl https://get.wasmer.io -sSfL | sh |
| wasm-feature-detect | Anixneysi xaraktiristikon browser se xrono ektelesis | npm install wasm-feature-detect |
Veltiostopiiisi megethous binary
Ta WASM binaries mporoyn na einai megala. Na pos ta mikroyneis:
# 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
Ena typiko Rust WASM module paei apo 500KB se kato apo 50KB me aftes tis veltiostopiiiseis.
Xartis poreias gia xekinima
Symperasma
To WebAssembly den einai pia peiramatiko. Einai mia technologia paragogis poy xrisimopoieitai apo merikes apo tis pio apaitiitikes efarmoges sto web. Apodosi konta sti natiive, asfaleia sandboxed kai pagkosmia fornitotita - kanenas allos stoxos syllogis den soy dinei kai ta tria.
Den xreiazetai na xanagrapsis olis tin efarmogi soy se WASM. Arxise me mia moni CPU-intenii synartisi - ena filtro eikonas, enan analyti dedomenon, enan fysiko ypologismo - metafrase tin se WASM kai kalese tin apo JavaScript. Metrise ti diafora. Meta apofasise poy alloy mporei na voithisei to WASM.
Ta ergaleia einai orimma, i ypostirixi browser einai pagkosmia, kai to oikosystima megalononei. An grafeis Rust, eisai idi mia entoli makria apo ton browser.
Lista elegxoy gia xekinima:
- Rust kai wasm-pack egatastimena
- Proto WASM module xtismeno kai trexei ston browser
- JavaScript interop leitourgei (klisi WASM apo JS)
- Release build me veltiostopiiiseis megethous efarmosmenees
- Apodosi axiologimeni enanti katharoy JavaScript isodinamoy
- WASI exerevnimeno me Wasmtime gia server-side periptoseis xrisis