Angelitedocs ESEN

Inicio › Comparar

Benchmark

AngeLite frente a Preact, Vue, React y Angular con la misma aplicación: peso, arranque, memoria y velocidad medidos en Chromium.

Peso#

JavaScript de la aplicación completa (framework + la tabla), minificado. Es lo que baja el navegador.

Arranque y memoria#

Arranque: tiempo desde que empieza la navegación hasta que la app está montada (incluye descargar, parsear y ejecutar el JS, en localhost). Memoria: heap de JavaScript tras forzar GC.

Velocidad#

Mediana en milisegundos de cada operación (menos es mejor): desde que se dispara hasta que el DOM refleja el cambio y se ha calculado el layout.

Lectura honesta#

    Metodología y límites#

    • Misma app, mismo DOM: table > tbody > tr con 3 celdas, un manejador de clic por fila y la fila seleccionada con clase danger. Los datos salen del mismo generador determinista (benchmarks/apps/shared.js).
    • Implementaciones idiomáticas: React 19 con memo + useCallback; Preact (solo núcleo + hooks, shouldComponentUpdate en la fila); Vue 3 con plantilla compilada y shallowRef; Angular 20 con señales, OnPush, @for … track y sin Zone.js (provideZonelessChangeDetection); AngeLite con señales y @for … track.
    • Qué se mide: performance.now() hasta que una condición del DOM se cumple (p. ej. «hay 1.000 filas») y se fuerza style + layout. No incluye el pintado (paint/composite). Calentamiento de 2 iteraciones por operación descartadas; las rondas alternan el orden de los frameworks.
    • Entorno: . Es un contenedor compartido, sin limitar la CPU: úsalo para comparar entre frameworks en la misma ejecución, no como cifras absolutas. Las diferencias de pocos ms están dentro del ruido; se muestra el p10–p90 al pasar el ratón por cada celda.
    • Dos modos de AngeLite: «en navegador» compila las plantillas al cargar (sin build). «Precompilado» usa tools/aot.mjs para convertir la plantilla en JS en tiempo de build y envía solo el runtime, como hacen JSX (React/Preact), Vue o Angular. Los pipes integrados de AngeLite son opt-in y no cuentan en estos bundles porque la app no los usa.
    • Peso: bundle de producción de cada app con el empaquetador habitual (esbuild para React, Preact y AngeLite; Vite para Vue; ng build para Angular). Incluye el código de la tabla, idéntico en los cinco. Preact no incluye preact/compat.
    • Qué no mide: SSR, hidratación, ecosistema, DevTools, accesibilidad, rendimiento en móvil ni uso real de memoria a largo plazo. Angular y React ofrecen mucho más que AngeLite; esto compara solo el núcleo de renderizado.

    Reproducir#

    cd benchmarks
npm install
npm run build     # compila las 5 apps → benchmarks/dist
npm run bench     # ejecuta la suite → benchmarks/results.json
ROUNDS=3 ITER=7 npm run bench   # (valores por defecto)

    Datos generados: . Versiones: .