Guías · 03
Rendimiento
Lo que cuestan los componentes web, medido en esta build, y cómo reproducir las cifras.
Mediciones
Medido el 2026-09-28 con Chrome 153.0.8010.52 (headless, Playwright). Cada cifra del navegador es la mayor de tres ejecuciones.
| Qué | Cómo se mide | Resultado |
|---|---|---|
| Tamaño del paquete | Toda la entrada web (los 16 exports) empaquetada y minificada con esbuild, React como externo, gzip nivel 9 | 28.0 KB (84.3 KB minificado) |
| Un componente | Solo se importa MotionNumber, mismo empaquetado | 18.6 KB |
| Callbacks de fotograma de JS | Llamadas a requestAnimationFrame en la página durante 1,2 s mientras MotionNumber, MotionHeight y MotionHighlight cambian a la vez (12 animaciones en marcha) | 0 |
| Commits de React por cambio | Commits de Profiler alrededor de MotionNumber en 10 cambios de valor, dejando terminar cada uno | 10 para 10 cambios |
| Streaming | Commits de Profiler mientras MotionStream revela 3000 caracteres que llegaron de golpe (unos 4081 ms) | 11 |
| Interrupciones | 200 valores nuevos con 5 ms de diferencia y luego una pausa: animaciones que quedan en la página y si el texto final es exacto | 0 restantes, texto exacto |
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 qué es rápido
Cuatro decisiones de diseño mantienen bajo el coste.
- Sin librería de animación en la web: el movimiento se cede a la Web Animations API del navegador, con resortes muestreados analíticamente.
- Sin render de React por fotograma: los componentes se renderizan cuando cambian tus datos, no mientras se mueven.
- El texto en streaming se añade directamente a la página y se incorpora al estado de React solo unas pocas veces por segundo.
- Cada componente funciona por sí solo: no hay provider que vuelva a renderizar el árbol ni store global.
Límites
MotionStream usa un bucle de animation frame mientras revela texto; es el único componente que necesita trabajo en cada fotograma. En React Native, los cambios de ancho y alto van con el driver de JS porque son layout. Las mediciones describen una máquina y un navegador, así que tus cifras serán distintas.
Reprodúcelo
Las cifras salen de un script del repositorio del sitio web. Empaqueta el paquete, abre el Chrome instalado sin ventana, ejecuta cada escenario tres veces y escribe los resultados que lee esta página.
node scripts/measure-chorus.mjs