PricingLoginStart free
WebAssembly (WASM) for High Performance Apps · Урок

Как WASM работает в браузере

Разберитесь в модели выполнения WebAssembly: как движок компилирует, создаёт экземпляр и запускает WASM вместе с JavaScript.

Урок 4 из 413 шагов

«Как WASM работает в браузере» — бесплатный урок WebAssembly (WASM) for High Performance Apps на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения WebAssembly (WASM) for High Performance Apps, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс WebAssembly (WASM) for High Performance Apps содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

WASM Is Not Interpreted Bytecode... Quite

WASM поставляется в виде компактного бинарного файла, который движок браузера превращает в быстрый машинный код — он компилируется и выполняется почти на нативной скорости, а не интерпретируется построчно. Давайте проследим этот путь.

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.

Можно начать бесплатно

Изучай WebAssembly (WASM) for High Performance Apps с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
12
Уроки
48
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Как WASM работает в браузере» бесплатный?

Да — полный текст урока «Как WASM работает в браузере» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс WebAssembly (WASM) for High Performance Apps, подпишись на CoddyKit PRO. Курс WebAssembly (WASM) for High Performance Apps содержит 4 уроков всего.

Чему я научусь в уроке «Как WASM работает в браузере»?

Разберитесь в модели выполнения WebAssembly: как движок компилирует, создаёт экземпляр и запускает WASM вместе с JavaScript. Ты практикуешь WebAssembly (WASM) for High Performance Apps с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать WebAssembly (WASM) for High Performance Apps?

Предыдущий опыт не требуется. WebAssembly (WASM) for High Performance Apps на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Как WASM работает в браузере»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке WebAssembly (WASM) for High Performance Apps?

Да. Каждый урок WebAssembly (WASM) for High Performance Apps включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Что такое WebAssembly (WASM)?
  2. Зачем использовать WASM? Основные преимущества
  3. Экосистема и инструменты WASM
  4. Как WASM работает в браузере
← Назад к WebAssembly (WASM) for High Performance Apps