WebAssembly (WASM) for High Performance Apps · Lezione

Come funziona WASM nel browser

Comprendete il modello di esecuzione alla base di WebAssembly: come il motore compila, istanzia ed esegue WASM insieme a JavaScript.

Come funziona WASM nel browser è una lezione WebAssembly (WASM) for High Performance Apps gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento WebAssembly (WASM) for High Performance Apps, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso WebAssembly (WASM) for High Performance Apps include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

WASM Is Not Interpreted Bytecode... Quite

WASM ships as a compact binary that the browser engine turns into fast machine code — compiled and run near native speed, not interpreted line-by-line. Let's trace its path.

The .wasm Binary

A WASM module is a .wasm file: a stack-based binary with sections for types, functions, memory, and exports. WAT is its readable text twin.

(module
  (func (export "add") (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add))

Step 1: Fetch the Module

Step 1: the browser fetches the binary, usually with fetch, reading it into an ArrayBuffer.

const response = await fetch('add.wasm');
const bytes = await response.arrayBuffer();

Step 2: Compile

Step 2: the engine validates and compiles those bytes into machine code, producing a WebAssembly.Module.

const module = await WebAssembly.compile(bytes);

Step 3: Instantiate

Step 3: instantiation creates a live WebAssembly.Instance with its own memory and exported functions, ready to call.

const instance = await WebAssembly.instantiate(module, {});
const add = instance.exports.add;

Streaming Compilation

Streaming compilation compiles while downloading — no buffering the whole file first. Use instantiateStreaming for the fastest start.

const { instance } = await WebAssembly.instantiateStreaming(
  fetch('add.wasm'), {}
);

Calling Exported Functions

Once instantiated, WASM exports behave like ordinary JS functions — just call them with arguments and get results back.

const result = instance.exports.add(2, 3);
console.log(result); // 5

Linear Memory

Linear memory is one contiguous, resizable ArrayBuffer that both JS and WASM read and write. It's how larger data crosses the boundary.

const mem = new Uint8Array(instance.exports.memory.buffer);

The Sandbox

WASM runs in a strict sandbox: no direct DOM, network, or file access — it can only call functions JS imports in. That's what keeps it safe and portable.

Importing JS Into WASM

To give WASM capabilities, pass an imports object at instantiation. WASM can then call those JS functions — the only way it reaches the outside world.

const imports = { env: { log: (x) => console.log(x) } };
const { instance } = await WebAssembly.instantiate(bytes, imports);

Putting It Together

The lifecycle in one line: fetch, compile, instantiate, call. Data crosses via linear memory, and JS controls the sandbox through imports.

Quick Check

Which API both compiles and instantiates a WASM module as it downloads?

Recap

Recap: a binary is fetched, compiled, and instantiated; streaming overlaps the two; exports act like JS functions sharing linear memory; the sandbox stays safe via imports.

Domande Frequenti

La lezione «Come funziona WASM nel browser» è gratuita?

Sì — il testo completo di «Come funziona WASM nel browser» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso WebAssembly (WASM) for High Performance Apps, passa a CoddyKit PRO. Il corso WebAssembly (WASM) for High Performance Apps include 4 lezioni in totale.

Cosa imparerò in «Come funziona WASM nel browser»?

Comprendete il modello di esecuzione alla base di WebAssembly: come il motore compila, istanzia ed esegue WASM insieme a JavaScript. Eserciti WebAssembly (WASM) for High Performance Apps con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare WebAssembly (WASM) for High Performance Apps?

Non è richiesta alcuna esperienza precedente. WebAssembly (WASM) for High Performance Apps su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Come funziona WASM nel browser»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione WebAssembly (WASM) for High Performance Apps?

Sì. Ogni lezione WebAssembly (WASM) for High Performance Apps include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a WebAssembly (WASM) for High Performance Apps