Comment WASM s’exécute dans le navigateur
Comprenez le modèle d’exécution de WebAssembly : découvrez comment le moteur compile, instancie et exécute WASM aux côtés de JavaScript.
Comment WASM s’exécute dans le navigateur est une leçon WebAssembly (WASM) for High Performance Apps gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage WebAssembly (WASM) for High Performance Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours WebAssembly (WASM) for High Performance Apps comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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); // 5Linear 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.
Apprends WebAssembly (WASM) for High Performance Apps avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 12
- Leçons
- 48
Questions Fréquemment Posées
La leçon « Comment WASM s’exécute dans le navigateur » est-elle gratuite ?
Oui — le texte complet de « Comment WASM s’exécute dans le navigateur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours WebAssembly (WASM) for High Performance Apps, passe à CoddyKit PRO. Le cours WebAssembly (WASM) for High Performance Apps comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Comment WASM s’exécute dans le navigateur » ?
Comprenez le modèle d’exécution de WebAssembly : découvrez comment le moteur compile, instancie et exécute WASM aux côtés de JavaScript. Tu pratiques WebAssembly (WASM) for High Performance Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer WebAssembly (WASM) for High Performance Apps ?
Aucune expérience préalable n'est requise. WebAssembly (WASM) for High Performance Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Comment WASM s’exécute dans le navigateur » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon WebAssembly (WASM) for High Performance Apps ?
Oui. Chaque leçon WebAssembly (WASM) for High Performance Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Qu’est-ce que WebAssembly (WASM) ?
- Pourquoi utiliser WASM ? Avantages principaux
- Écosystème et outils WASM
- Comment WASM s’exécute dans le navigateur