1~
2WebAssembly (WASM) nachinalsya kak sposob zapuska C++ v brauzere. V 2026 godu on rabotaet vezde  -  brauzery, servery, edge-seti, vstroennye ustroistva  -  i obespechivat rabotu nekotorykh iz samykh trebovatel'nykh prilozhenii v vebe. Dvizhok renderinga Figma, Adobe Photoshop v vebe, obrabotka video Google Meet i platforma edge-vychislenii Cloudflare  -  vse rabotaet na WebAssembly.
3~
4Chrome Platform Status pokazyvaet, chto WASM sostavliaet primerno 5,5% vsekh zagruzok stranits v Chrome na nachalo 2026 goda, po sravneniiu s 4,5% godom ranee. S tem chto WASM 3.0 stal standartom W3C, a WASI sozrevaet v napravlenii versii 1.0, ekosistema dostigla perelomnoho momenta.
5~
6Eto rukovodstvo okhvatyvaet vse, chto nuzhno znat' dlia nachala raboty s WebAssembly.
7~
8## Chto takoe WebAssembly?
9~
10WebAssembly  -  eto binarnyi format instruktsii, razrabotannyi kak tsel' kompilyatsii. Vy pishete kod na yazyke vysokogo urovnya (Rust, C, C++, Go, Kotlin), kompiliruete ego v `.wasm` i zapuskaete v liuboi srede s WASM-runtime  -  brauzery, Node.js, Cloudflare Workers, Wasmtime ili 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### Kak eto rabotaet
23~
24WASM  -  eto **stekovaya virtual'naya mashina**. Funktsii pomeshchayut i izvlekayut znacheniya iz steka operandov. Runtime khosta (V8 v Chrome, SpiderMonkey v Firefox) JIT-kompiliruet baitkod WASM v nativnyi mashinnyi kod, poetomu proizvoditel'nost' blizka k nativnoi.
25~
26Klyuchevye kharakteristiki:
27~
28- **Vypolnenie v peschanitse**: WASM-moduli mogut poluchat' dostup tol'ko k resursam, kotorye khost yavno predostavlyaet. Net dostupa k failovoi sisteme, seti ili OS, esli eto ne razresheno. Eto fundamental'no otlichaetsya ot nativnogo koda.
29- **Lineinaya pamyat'**: odin nepreryivnyi `ArrayBuffer`, razdelyaemyi mezhdu WASM i khostom. Slozhnye dannye (stroki, struktury) peredayutsya cherez zapis' v pamyat' i sovmestnoe ispol'zovanie ukazatelya.
30- **Ogranichennye tipy**: WASM nativno podderzhivaet tol'ko chetyre tipa: `i32`, `i64`, `f32`, `f64`. Vse ostal'noe (stroki, massivy, ob'ekty) trebuet kodirovaniia cherez lineinuyu pamyat' ili Component Model.
31- **Perenosimost'**: odin i tot zhe binarnyi fail `.wasm` zapuskaetsya na liuboi platforme s WASM-runtime, bez perekompiliatsii.
32~
33### WASM vs JavaScript
34~
35WASM ne zamenyaet JavaScript. On dopolnyaet ego.
36~
37| Aspekt | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsing** | Parsing + kompilyatsiya v runtime | Predvaritel'no skompilirovannyi binarnyi fail, tol'ko dekodirovanie |
40| **Skorost' vypolneniia** | JIT-optimizirovannaya, peremennaya | Blizko k nativnoi, stabil'naya |
41| **Zapusk** | Bystryi dlya malenkikh skriptov | Bystroe dekodirovanie, predskazuemyi |
42| **Dostup k DOM** | Pryamoi | Kosvennyi (cherez JS-prosloiku) |
43| **Luchshe vsego dlya** | UI, manipulyatsiya DOM, obrabotka sobytii | CPU-intensivnye vychisleniya |
44| **Sborka musora** | Vstroennaya | WasmGC (novoe) ili ruchnaya |
45~
46Ispol'zuiete JavaScript dlya raboty s UI i DOM. Ispol'zuiete WASM dlya tyazhelykh vychislenii: obrabotka izobrazhenii, kodirovanie video, fizicheskie simulyatsii, kriptografiya, parsing dannykh.
47~
48## WASM 3.0: chto novogo
49~
50WebAssembly 3.0 stal standartom W3C v sentyabre 2025 goda, standartizovav devyat' funktsii, kotorye razrabatyvalis' godami.
51~
52| Funktsiya | Chto daet |
53|---------|----------------|
54| **WasmGC** | Nativnaya sborka musora v WASM. Upravlyaemye yazyki (Java, Kotlin, Dart) mogut kompilirovat'sya v WASM bez dostavki svoego GC-runtime. Podderzhivaetsya v Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | Nativnyi `try`/`catch` v WASM. Ran'she isklyucheniya trebovali dorogikh krugovykh obkhodov k JavaScript. |
56| **Tail Calls** | Obespechivayut effektivnuyu rekursiyu bez perepolneniya steka. Kritichno dlya funktsional'nykh yazykov. |
57| **Relaxed SIMD** | 128-bitnye vektornye instruktsii dlya parallel'noi obrabotki dannykh. Pozvolyayut apparatnye optimizatsii. |
58| **Memory64** | Snimayut ogranichenie lineinoi pamyati v 4 GB. Neobkhodimo dlya masshtabnoi obrabotki dannykh. |
59| **Multi-memory** | Neskol'ko nezavisimykh oblastei pamyati v odnom module. |
60~
61Samoe znachimoe  -  **WasmGC**. Ran'she kompilyatsiya Java ili Kotlin v WASM oznachala dostavku tselogo garbage collector-a kak chasti binarnogo faila, chto razduvalo razmery failov. Teper' sobstvennyi GC brauzera upravlyaet pamyat'yu WASM-modulei, tochno tak zhe, kak on delaet eto dlya JavaScript.
62~
63## WASI: WebAssembly za predelami brauzera
64~
65WASM v brauzere moshchen, no **WASI (WebAssembly System Interface)** delaet WASM universal'nym runtime. WASI predostavlyaet standartizirovannye interfeisy dlya sistemnykh resursov  -  faily, set', chasy, sluchainye chisla  -  pozvolyaya WASM-modulyam rabotat' za predelami brauzera.
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 (tekushchii stabil'nyi reliz) opredelyaet sleduyushchie interfeisy:
84~
85- `wasi:filesystem`  -  failovye operatsii cherez capability handles (ne traditsionnye failovye deskriptory)
86- `wasi:sockets`  -  set' TCP/UDP
87- `wasi:http`  -  obrabotka HTTP-zaprosov/otvetov
88- `wasi:clocks`  -  nastennye chasy, monotonnye chasy
89- `wasi:random`  -  kriptograficheskaya sluchainost'
90- `wasi:cli`  -  argumenty komandnoi stroki, peremennye sredy, stdio
91~
92Klyuchevoi printsip  -  **bezopasnost' na osnove vozmozhnostei**: WASM-modul' ne mozhet poluchit' dostup k failovoi sisteme, esli khost yavno ne predostavit handle k konkretnoi direktorii. Eto delaet WASI fundamental'no bezopasnee zapuska nativnykh ispolnyaemykh failov.
93~
94### Put' k WASI 1.0
95~
96WASI 0.3.0 (dobavlyayushchii async/primitivy parallelizma) ozhidaetsya v 2026 godu, WASI 1.0 dolzhen posledovat'. Glavnoe dopolnenie  -  integrirovannyi v yazyk async s potokovym I/O bez kopirovaniya.
97~
98## Component Model
99~
100Bazovye WASM-moduli mogut obmenivat'sya tol'ko chislami. **Component Model** reshaet eto ogranichenie, dobavlyaya bogatuyu sistemu tipov i sloi kompozitsii poverh WASM.
101~
102### WIT (WebAssembly Interface Types)
103~
104WIT  -  eto yazyk opredeleniya interfeisov, kotoryi pozvolyaet komponentam ob'yavlyat' svoi importy i eksporty s bogatymi tipami  -  stroki, zapisi, spiski, varianty, enumy  -  a ne tol'ko `i32` i `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~
127Instrumenty, takie kak `wit-bindgen`, generiruyut yazykovye privyazki iz failov WIT. Komponent na Rust i komponent na Python mogut obmenivat'sya strokami, zapisyami i spiskami cherez kontrakty WIT, pri etom ni odna storona ne znaet yazyk realizatsii drugoi.
128~
129## Sozdanie pervogo WASM-modulya na Rust
130~
131Rust obladaet naibolee zrelymi instrumentami dlya WASM. Sozdadim prakticheskii primer: modul' obrabotki izobrazhenii, rabotayushchii v brauzere.
132~
133### Nastroika
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### Nastroika 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### Napishem kod na Rust
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### Sborka
223~
224```bash
225wasm-pack build --target web
226```
227~
228Eto sozdaet direktoriy `pkg/` s:
229- `image_processor_bg.wasm`  -  skompilirovannyi WASM-binarnyi fail
230- `image_processor.js`  -  JavaScript-konnektorskii kod s opredeleniyami TypeScript
231- `package.json`  -  gotov k publikatsii v npm
232~
233### Ispol'zovanie v 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~
286Klyuchevoi vyvod: `imageData.data`  -  eto `Uint8ClampedArray`, podderzhivaemyi `ArrayBuffer`. Pri peredache v WASM on razdelyaet tu zhe pamyat'  -  bez kopirovaniya. Funktsiya na Rust modifitsiruet pikseli na meste, i storona JavaScript vidaet izmeneniya nemedlenno.
287~
288## Nizkorovnevyi uroven': ruchnaya initsializatsiya WASM
289~
290Esli vy ne khotite ispol'zovat' `wasm-bindgen`, vy mozhete sozdavat' ekzemplyary WASM-modulei napryamuyu:
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~
307Eto polezno, kogda vam nuzhny minimal'nye nakladnye raskhody i ne trebuetsya bogatyi tipovoi interop.
308~
309## Proizvoditel'nost': WASM vs JavaScript
310~
311Real'nye benchmarki pokazyvayut znachitel'noe uskorenie dlya CPU-intensivnykh zadach:
312~
313| Zadacha | JavaScript | WASM | Uskorenie |
314|------|-----------|------|---------|
315| Obrabotka izobrazheniya 4K | 180ms | 8ms (s SIMD) | 22x |
316| Izmenenie razmera izobrazheniya (4K) | 250ms | 45ms | 5,5x |
317| Fizicheskaya simulyatsiya (10K ob'ektov) | Propadayut kadry | Plavnye 60fps | ~10x |
318| Parsing JSON (bol'shoi payload) | 12ms | 3ms | 4x |
319| Kriptograficheskoe kheshirovanie | 45ms | 6ms | 7,5x |
320~
321WASM rabotaet na primerno 95% skorosti nativnogo koda. Naibol'shie vyigryshi dostigayutsya za schet:
322- Predskazuemoi proizvoditel'nosti (net progreva JIT, net pauz GC)
323- Instruktsii SIMD dlya parallel'noi obrabotki dannykh
324- Pryamogo dostupa k pamyati bez vmeshatel'stva garbage collector-a
325~
326Gde WASM NE bystree: manipulyatsiya DOM, malye vychisleniya, zadachi s ogranichennym I/O. JavaScript uzhe optimizirovan dlya nikh.
327~
328## Proizvodstvennye keisy
329~
330### Figma: rendering vektorov v real'nom vremeni
331~
332Osnovnoi dvizhok renderinga Figma  -  eto C++, skompilirovannyi v WASM. Kazhdaya forma, gradient i effekt vychislyayutsya v WASM i risuutsya na element Canvas. Eto pozvolyaet Figma obrabatyvat' slozhnye dizainy s tysyachami sloev pri 60fps v brauzere  -  proizvoditel'nost', kotoraya byla by nevozmozhna na chistom JavaScript.
333~
334### Adobe Photoshop v vebe
335~
336Adobe portirovala klyuchevye fil'try i instrumenty Photoshop v WASM s pomoshchyu Rust. Ikh benchmarki pokazyvayut obrabotku izobrazheniya 4K za 22ms s WASM SIMD protiv 180ms v JavaScript  -  8-kratnoe uluchshenie, kotoroe delaet vozmozhnymi prevu fil'trov v real'nom vremeni.
337~
338### Cloudflare Workers
339~
340Cloudflare zapuskaet WASM-moduli v izolyatakh V8 v bolee chem 330 edge-lokatsiyakh. Kholodnye starty sostavlyayut 1-5ms (po sravneniyu s 100-500ms dlya konteinernogo serverless). V fevrale 2026 goda oni razvernuli inferens Llama-3-8b po vsei svoei edge-seti s ispol'zovaniem WASM.
341~
342### Google Meet
343~
344Razmytie fona i virtual'nye fony v Google Meet ispol'zuyut WASM s SIMD dlya obrabotki video v real'nom vremeni. WASM-modul' obrabatyvaet kazhdyi videokadr dostatochno bystro dlya podderzhaniya plavnogo video pri 30fps.
345~
346## Podderzhka brauzerov (2026)
347~
348| Funktsiya | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Polnaya | Polnaya | Polnaya | Polnaya |
351| Threads | Da | Da | Da | Da |
352| SIMD (128-bit) | Da | Da | Da | Da |
353| WasmGC | 119+ | 120+ | 18.2+ | Da |
354| Exception Handling | Da | Da | Da | Da |
355| Memory64 | Da | Da | Chastichno | Da |
356~
357Vse osnovnye brauzery polnost'yu podderzhivayut WASM. Bolee novye funktsii (WasmGC, Exception Handling) dostigli shirokoi dostupnosti.
358~
359## Spravochnik po instrumentam
360~
361| Instrument | Naznachenie | Ustanovka |
362|------|---------|---------|
363| **wasm-pack** | Sborka Rust v WASM, generatsiya npm-paketov | `cargo install wasm-pack` |
364| **wasm-bindgen** | Privyazki Rust/JS interop (ispol'zuetsya wasm-pack) | Zavisimost' v Cargo.toml |
365| **wasm-opt** | Optimizatsiya razmera binarnogo faila (50%+ umen'shenie) | Chast' Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Generatsiya privyazok iz WIT-failov | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Servernyi WASM-runtime (etalonnaya realizatsiya WASI) | `brew install wasmtime` |
368| **Wasmer** | Al'ternativnyi WASM-runtime s podderzhkoi WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Obnaruzhenie funktsii brauzera vo vremya vypolneniya | `npm install wasm-feature-detect` |
370~
371### Optimizatsiya razmera binarnogo faila
372~
373WASM-binarniki mogut byt' bol'shimi. Vot kak ikh umen'shit':
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~
392Tipichnyi WASM-modul' na Rust umen'shaetsya s 500KB do menee 50KB s etimi optimizatsiyami.
393~
394## Plan deistvii dlya starta
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## Zaklyuchenie
420~
421WebAssembly bol'she ne yavlyaetsya eksperimental'noi tekhnologiei. Eto proizvodstvennaya tekhnologiya, ispol'zuemaya nekotorymi iz samykh trebovatel'nykh prilozhenii v vebe. Proizvoditel'nost' blizko k nativnoi, bezopasnost' peschanitsy i universal'naya perenosimost'  -  ni odna drugaya tsel' kompilyatsii ne daet vsekh trekh odnovremenno.
422~
423Vam ne nuzhno perepisyvat' vse prilozhenie na WASM. Nachnite s odnoi CPU-intensivnoi funktsii  -  fil'tra izobrazheniya, parsera dannykh, fizicheskogo rascheta  -  skompilyiruiete ee v WASM i vyzoviete iz JavaScript. Izmer'te raznitsu. Zatem reshite, gde eshche WASM mozhet pomoch'.
424~
425Instrumenty zrely, podderzhka brauzerov universal'na, i ekosistema rastet. Esli vy pishete na Rust, vy uzhe v odnoi komande ot brauzera.
426~
427> **Kontrol'nyi spisok dlya starta:**
428>
429> - [x] Rust i wasm-pack ustanovleny
430> - [x] Pervyi WASM-modul' sobran i zapushchen v brauzere
431> - [x] JavaScript interop rabotaet (vyzov WASM iz JS)
432> - [x] Reliznaya sborka s optimizatsiyami razmera primenena
433> - [x] Proizvoditel'nost' sravnena s ekvivalentom na chistom JavaScript
434> - [x] WASI issledovan s Wasmtime dlya severnykh keisov
435~