Guias · 03
Desempenho
O custo dos componentes web, medido neste build, e como reproduzir os números.
Medições
Medido em 2026-09-28 com Chrome 153.0.8010.52 (headless, Playwright). Cada número do navegador é o maior de três execuções.
| O quê | Como é medido | Resultado |
|---|---|---|
| Tamanho do pacote | Toda a entrada web (os 16 exports) empacotada e minificada com esbuild, React como externo, gzip nível 9 | 28.0 KB (84.3 KB minificado) |
| Um componente | Só MotionNumber importado, mesmo empacotamento | 18.6 KB |
| Callbacks de quadro de JS | Chamadas a requestAnimationFrame na página durante 1,2 s enquanto MotionNumber, MotionHeight e MotionHighlight mudam juntos (12 animações rodando) | 0 |
| Commits do React por mudança | Commits do Profiler em volta de MotionNumber para 10 mudanças de valor, cada uma deixada terminar | 10 para 10 mudanças |
| Streaming | Commits do Profiler enquanto MotionStream exibe 3000 caracteres que chegaram de uma vez (cerca de 4081 ms) | 11 |
| Interrupções | 200 valores novos com 5 ms de intervalo e depois uma pausa: animações que sobram na página e se o texto final é exato | 0 restantes, texto exato |
2026-09-28 · @kkwaenggwari/animated-chorus@0.1.0 · Chrome 153.0.8010.52 (headless, Playwright) · Windows_NT 10.0.22631 · Intel(R) Core(TM) i7-14700K
Por que é rápido
Quatro escolhas de design mantêm o custo baixo.
- Nenhuma biblioteca de animação na web: o movimento é entregue à Web Animations API do navegador, com molas amostradas analiticamente.
- Nenhum render do React por quadro: os componentes renderizam quando seus dados mudam, não enquanto se movem.
- O texto em streaming é adicionado direto à página e incorporado ao estado do React só poucas vezes por segundo.
- Todo componente funciona sozinho: não há provider que renderize a árvore de novo nem store global.
Limites
MotionStream usa um loop de animation frame enquanto exibe texto; é o único componente que precisa de trabalho a cada quadro. No React Native, as mudanças de largura e altura rodam no driver JS porque são layout. As medições descrevem uma máquina e um navegador, então seus números vão ser diferentes.
Reproduza
Os números vêm de um script no repositório do site. Ele empacota o pacote, abre o Chrome instalado sem janela, roda cada cenário três vezes e grava os resultados que esta página lê.
node scripts/measure-chorus.mjs