WebAssembly y JavaScript: un dúo que acelera tu código 10 veces

¿Por qué los navegadores de repente hablan un nuevo idioma?

Imagina que eres un chef. JavaScript es tu cuchillo multiusos: puedes cortar pan, limpiar pescado e incluso abrir latas (con riesgo de cortarte). Y WebAssembly es un cuchillo japonés profesional para cortar sashimi. Hace una sola cosa: corta de manera perfectamente fina y rápida, pero requiere un enfoque especial. No lo usarás para pelar papas, pero cuando necesites cortar 100 porciones de atún en un minuto, no puedes prescindir de él.

En el mundo del desarrollo web, durante mucho tiempo reinó un solo rey: JavaScript. Pero en 2017, un nuevo jugador entró en escena: WebAssembly (Wasm). No es un reemplazo de JS, sino su poderoso compañero. Hoy entenderemos qué es esta bestia, para qué sirve y cómo domesticarla con JavaScript.

¿Qué es WebAssembly en palabras simples?

WebAssembly es un formato binario de instrucciones de bajo nivel que se ejecuta en el navegador a una velocidad casi nativa. Si JavaScript es texto que el navegador lee e interpreta sobre la marcha, Wasm es un bytecode compilado listo, similar al código máquina.

Escribes código en C, C++ o Rust, lo compilas en un archivo .wasm y luego lo cargas en el navegador como un script normal. El navegador lo ejecuta directamente, omitiendo la larga etapa de análisis y compilación JIT que pasa JavaScript.

Características clave de WebAssembly:

• Velocidad — ejecución cercana a la nativa (de 2 a 10 veces más rápido que JS en tareas computacionales).
• Seguridad — funciona en un sandbox aislado, como JS.
• Compacidad — los archivos .wasm ocupan poco espacio y se cargan rápidamente.
• Integración — se llama fácilmente desde JavaScript y viceversa.

¿Para qué sirve esto si ya existe JavaScript?

JavaScript es excelente para el 95% de las tareas: trabajar con el DOM, animaciones, manejo de eventos, solicitudes al servidor. Pero hay tareas donde JS se queda corto:

• Cálculos pesados — procesamiento de video, renderizado 3D, simulaciones físicas.
• Juegos — proyectos AAA en Unity o Unreal Engine.
• Cálculos científicos — simulación de dinámica molecular, criptografía.
• Trabajo con medios — compresión/descompresión de imágenes, códecs de audio y video.

En estos escenarios, WebAssembly proporciona un aumento de rendimiento de decenas de veces. Además, no pierdes el acceso a las API del navegador (a través de un envoltorio JS).

¿Cómo funciona? Arquitectura simple

Imagina un puente entre dos mundos. De un lado, tu módulo .wasm (rápido, pero "tonto" — no sabe nada sobre el DOM ni los eventos). Del otro, JavaScript (más lento, pero "inteligente" — sabe hacer de todo). Se comunican a través de una "memoria" especial: la memoria lineal de Wasm.

JS asigna un array de bytes (ArrayBuffer), lo pasa al módulo Wasm, este lo llena con datos y JS recoge el resultado. Es como pasar una caja pesada por una ventana: no transfieres cada objeto por separado, sino que pasas toda la caja de una vez.

Escribimos un ejemplo real: aceleramos el factorial

Comparemos el rendimiento en una tarea clásica: el cálculo del factorial. Primero lo implementamos en JavaScript puro, y luego en C, compilado a Wasm.

1. Versión en JavaScript (normal)

// factorial.jsfunction factorialJS(n) {    let result = 1;    for (let i = 2; i <= n; i++) {        result *= i;    }    return result;}

// Pruebaconsole.time('JS');for (let i = 0; i < 100000; i++) {    factorialJS(20);}console.timeEnd('JS'); // ~15-25 ms en Chrome

2. Código en C que compilaremos a Wasm

Primero escribimos en C:

// factorial.cint factorial(int n) {    int result = 1;    for (int i = 2; i <= n; i++) {        result *= i;    }    return result;}