Cómo se ejecuta WASM en el navegador
Comprenda el modelo de ejecución de WebAssembly: cómo el motor compila, instancia y ejecuta WASM junto con JavaScript.
Cómo se ejecuta WASM en el navegador es una lección gratuita de WebAssembly (WASM) for High Performance Apps en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de WebAssembly (WASM) for High Performance Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de WebAssembly (WASM) for High Performance Apps incluye 4 lecciones en total.
WASM Is Not Interpreted Bytecode... Quite
WASM se distribuye como un binario compacto que el motor del navegador convierte en código de máquina rápido: se compila y ejecuta a una velocidad cercana a la nativa, sin interpretarse línea por línea. Veamos su recorrido.
The .wasm Binary
Un módulo WASM es un archivo .wasm: un binario basado en pila con secciones para tipos, funciones, memoria y exportaciones. WAT es su equivalente en texto legible.
(module
(func (export "add") (param i32 i32) (result i32)
local.get 0
local.get 1
i32.add))Step 1: Fetch the Module
Paso 1: el navegador descarga el binario, normalmente con fetch, leyéndolo en un ArrayBuffer.
const response = await fetch('add.wasm');
const bytes = await response.arrayBuffer();Step 2: Compile
WebAssembly.Module.const module = await WebAssembly.compile(bytes);Step 3: Instantiate
Paso 3: La instanciación crea un WebAssembly.Instance activo con su propia memoria y funciones exportadas, listo para ser llamado.
const instance = await WebAssembly.instantiate(module, {});
const add = instance.exports.add;Streaming Compilation
Streaming compilation compila mientras se descarga, sin necesidad de almacenar todo el archivo en búfer primero. Usa instantiateStreaming para iniciar lo más rápido posible.
const { instance } = await WebAssembly.instantiateStreaming(
fetch('add.wasm'), {}
);Calling Exported Functions
Una vez instanciados, los exports de WASM se comportan como funciones de JS normales: simplemente llámalos con argumentos y obtén los resultados.
const result = instance.exports.add(2, 3);
console.log(result); // 5Linear Memory
La linear memory es un único ArrayBuffer contiguo y redimensionable al que tanto JS como WASM pueden leer y escribir. Así es como los datos más grandes cruzan la frontera.
const mem = new Uint8Array(instance.exports.memory.buffer);The Sandbox
WASM se ejecuta en un sandbox estricto: sin acceso directo al DOM, a la red o a archivos; solo puede llamar a las funciones que JS importe. Eso es lo que lo mantiene seguro y portable.
Importing JS Into WASM
Para dotar a WASM de capacidades, pasa un objeto imports durante la instanciación. Así, WASM podrá llamar a esas funciones de JS, que es la única forma en que puede interactuar con el mundo exterior.
const imports = { env: { log: (x) => console.log(x) } };
const { instance } = await WebAssembly.instantiate(bytes, imports);Putting It Together
El ciclo de vida en una línea: fetch, compile, instantiate, call. Los datos se comunican a través de la memoria lineal y JS controla el sandbox mediante imports.
Quick Check
¿Qué API compila e instancio un módulo WASM a medida que se descarga?
Recap
Recap: un binario se descarga, se compila y se instancia; el streaming solapa ambas operaciones; los exports actúan como funciones de JS que comparten linear memory; y el sandbox se mantiene seguro mediante los imports.
Preguntas frecuentes
¿La lección «Cómo se ejecuta WASM en el navegador» es gratis?
Sí — el texto completo de «Cómo se ejecuta WASM en el navegador» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de WebAssembly (WASM) for High Performance Apps, actualiza a CoddyKit PRO. El curso de WebAssembly (WASM) for High Performance Apps incluye 4 lecciones en total.
¿Qué aprenderé en «Cómo se ejecuta WASM en el navegador»?
Comprenda el modelo de ejecución de WebAssembly: cómo el motor compila, instancia y ejecuta WASM junto con JavaScript. Practicas WebAssembly (WASM) for High Performance Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar WebAssembly (WASM) for High Performance Apps?
No se requiere experiencia previa. WebAssembly (WASM) for High Performance Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Cómo se ejecuta WASM en el navegador»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de WebAssembly (WASM) for High Performance Apps?
Sí. Cada lección de WebAssembly (WASM) for High Performance Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- ¿Qué es WebAssembly (WASM)?
- ¿Por qué usar WASM? Ventajas principales
- El ecosistema y las herramientas de WASM
- Cómo se ejecuta WASM en el navegador