WebAssembly e JavaScript: dueto que acelera seu código em 10 vezes

Por que os navegadores de repente começaram a falar uma nova língua?

Imagine que você é um chef de cozinha. JavaScript é a sua faca universal: dá para cortar pão, limpar peixe e até abrir latas (com risco de se cortar). E WebAssembly é uma faca profissional japonesa para cortar sashimi. Ela faz uma coisa — corta de forma perfeitamente fina e rápida, mas exige uma abordagem especial. Você não vai usá-la para descascar batatas, mas quando precisa cortar 100 porções de atum em um minuto — não dá para ficar sem ela.

No mundo do desenvolvimento web, por muito tempo reinou um único rei — JavaScript. Mas em 2017, um novo jogador entrou em cena: WebAssembly (Wasm). Não é um substituto para JS, mas sim um poderoso parceiro. Hoje vamos entender o que é essa fera, para que serve e como domá-la com JavaScript.

O que é WebAssembly em palavras simples?

WebAssembly é um formato binário de instruções de baixo nível que é executado no navegador com velocidade quase nativa. Se JavaScript é um texto que o navegador lê e interpreta em tempo real, Wasm é um bytecode compilado pronto, semelhante ao código de máquina.

Você escreve código em C, C++ ou Rust, compila em um arquivo .wasm e depois carrega no navegador como um script comum. O navegador o executa diretamente, pulando a longa etapa de parsing e compilação JIT que o JavaScript passa.

Principais características do WebAssembly:

• Velocidade — execução próxima à nativa (2 a 10 vezes mais rápido que JS em tarefas computacionais).
• Segurança — funciona em uma sandbox isolada, assim como JS.
• Compacidade — arquivos .wasm ocupam pouco espaço e carregam rapidamente.
• Integração — facilmente chamado a partir do JavaScript e vice-versa.

Para que isso serve, se já existe JavaScript?

JavaScript é excelente para 95% das tarefas: manipulação do DOM, animações, tratamento de eventos, requisições ao servidor. Mas existem tarefas onde JS não dá conta:

• Cálculos pesados — processamento de vídeo, renderização 3D, simulações físicas.
• Jogos — projetos AAA em Unity ou Unreal Engine.
• Cálculos científicos — simulação de dinâmica molecular, criptografia.
• Trabalho com mídia — compressão/descompressão de imagens, codecs de áudio e vídeo.

Nesses cenários, WebAssembly proporciona um ganho de desempenho de dezenas de vezes. Além disso, você não perde o acesso às APIs do navegador (através de um wrapper JS).

Como funciona? Arquitetura simples

Imagine uma ponte entre dois mundos. De um lado, seu módulo .wasm (rápido, mas "burro" — não sabe sobre DOM e eventos). Do outro, JavaScript (mais lento, mas "inteligente" — sabe fazer tudo). Eles se comunicam através de uma "memória" especial — a memória linear do Wasm.

JS aloca um array de bytes (ArrayBuffer), passa para o módulo Wasm, que o preenche com dados, e JS pega o resultado. É como passar uma caixa pesada pela janela — você não transfere cada item separadamente, mas passa a caixa inteira de uma vez.

Escrevendo um exemplo real: acelerando o fatorial

Vamos comparar o desempenho em uma tarefa clássica — cálculo de fatorial. Primeiro, implementamos em JavaScript puro, depois em C, compilado para Wasm.

1. Versão JavaScript (comum)

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

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

2. Código C que vamos compilar para Wasm

Primeiro, escrevemos em C:

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