Dispersión entre muestras.
Cada punto es una muestra válida del caso seleccionado.
01 / MOTORES Y CASO
Compara una metodología concreta.
No hay una ejecución activa.
VISTA REAL
El ejecutor aparecerá aquí
El patrón elegido determina
qué se construye y qué se mide.
qué se construye y qué se mide.
02 / RESULTADOS DEL CASO
Switch · memoria de ramas grandes
Sin mediciones. Elige motores y un patrón.
Elige dos motores y un caso programático.
Switch se centra en memoria y construcción de vistas. Cada patrón tiene métricas propias.
CÓDIGO DEL CASO
Definiciones y runtime cargados.
KiB gzip de la entrada y sus módulos compartidos. Representa código descargado para este patrón, no RAM ni tamaño mínimo de la librería. Las otras metodologías no se importan en esta muestra.
Ver métricas y tiempos secundarios
| Métrica | A | B |
|---|
GRID / CRECIMIENTO
Más celdas. La misma pantalla.
Estado independiente por celda. GTPL usa una instancia; React, estado local; Svelte, componentes con estado reactivo por celda; Vue, modelos reactivos; Angular, señales con OnPush; Alpine, un x-data por celda. El mismo bucle aplica el mismo lote aleatorio a todos.
| Tamaño | A | B |
|---|
Cadencia de rAF con DOM y layout confirmados, limitada por la pantalla. Incluye generación aleatoria; excluye montaje y validación completa. No mide la GPU ni la memoria de este grid.
03 / CÓMO INTERPRETARLO
Una pregunta por caso. Límites visibles.
Switch mide memoria
Se importan únicamente los módulos de la variante elegida: 8, 32 o 64 ramas, con 128 bloques HTML explícitos por rama. Se parte de active = null y se activa una sola rama. El recorrido por otras ramas es optativo. Los tiempos no determinan el resultado principal.
Definiciones e instancias
El código, sus literales y las plantillas permanecen cargados. La creación condicional puede evitar nodos y componentes de las ramas no elegidas. Se cuentan los nodos conectados y el contenido inerte de template.content por separado; ese contenido también ocupa memoria.
Memoria JS + DOM
La API experimental estima todo el entorno relacionado, incluyendo el controlador y los iframes. Se calculan diferencias desde un ejecutor vacío y entre fases, manteniendo las gráficas estables durante la muestra y actualizando solo el texto de estado. Así se incluye DOM sin atribución individual, con ruido posible por GC y memoria compartida. No es RAM total de Chrome ni atribución exacta por framework.
For, if y cambios
For prueba operaciones de lista, cada una con su resultado validado. If compara creación, retirada y reentrada. Estilos, clases y atributos mantienen los mismos elementos. Formularios usa un setter nativo y un evento input, y comprueba que el modelo actualiza todos los campos.
Versiones y compilación
GTPL AOT, Svelte, Vue y Angular se precompilan; React usa producción; GTPL JIT compila al montar y Alpine interpreta HTML. React confirma cambios con flushSync, Svelte también usa flushSync y Angular con detectChanges. Las cifras describen estos adaptadores y este dispositivo.
Comparación repetida
Orden A/B y B/A alternado. Un iframe nuevo por motor y muestra. El reloj excluye descarga, importación y comprobación completa, y termina con DOM confirmado y lectura de layout. Perder visibilidad, cambiar el viewport o sacar el ejecutor de pantalla interrumpe la muestra.