Performance es

Rendimiento y optimización

🌐 Esta página en: English · Português · Español · Français · Deutsch

El foco de eQuantic.UI es entregar una experiencia de Single Page Application (SPA) con un sobrecoste mínimo, aprovechando la potencia de C# para generar código de frontend muy optimizado.

🚀 Reconciliación y DOM virtual

El sistema de DOM virtual se diseñó para ser eficiente y anticipar los cambios de estado.

Estrategia de diffing (algoritmo Keyed LIS)

El algoritmo de reconciliación usa una estrategia eficiente de Keyed Diffing basada en el algoritmo de la subsecuencia creciente más larga (LIS).

• La propiedad Key: la propiedad key identifica elementos entre renders. Los elementos con la misma clave se reutilizan y se actualizan en su sitio.
• Optimización por LIS: cuando los elementos se reordenan, el algoritmo computa la subsecuencia creciente más larga para minimizar los movimientos de DOM. Solo hay que mover los elementos que quedan fuera de la LIS.
• Optimización de prefijo y sufijo: los prefijos y sufijos comunes se procesan primero sin diffing complejo, lo que mejora el rendimiento de las operaciones típicas de lista (añadir al final, añadir al principio).
• Eficiencia de memoria: los elementos que no se mueven conservan su estado de navegador (foco de un campo, posición de scroll, etc.).

🧠 Gestión de recursos (gestión de memoria)

Las fugas de memoria se mitigan mediante el uso inteligente de referencias débiles y de limpieza automática.

Seguimiento de listeners de eventos

Los listeners de eventos se rastrean con WeakMap<HTMLElement, Map<string, EventHandler>>.

• Referencias débiles: WeakMap permite que el recolector de basura recoja los elementos del DOM cuando se retiran del árbol, incluso si el framework todavía tiene referencias internas a sus manejadores.
• Limpieza automática: al retirar un componente, el reconciliador intenta desconectar los listeners explícitamente, pero el WeakMap actúa como red de seguridad para evitar fugas en ciclos de vida complejos.

📦 Empaquetado y carga

Estrategia híbrida con Bun

El SDK usa un binario Bun embebido para procesar la salida final.

• Rendimiento del build: Bun procesa archivos TS/JS hasta 10 veces más rápido que las herramientas basadas en Node.js.
• Tree-shaking: el código muerto se elimina automáticamente durante el build.
• Minificación: los scripts se entregan comprimidos.

CSS atómico, con el mismo nombre en los dos lados

Un estilo es un valor abstracto de C# (BoxStyle, props de layout, roles), nunca CSS. El realizador web convierte cada propiedad en una clase ATÓMICA deduplicada, nombrada por un hash del valor (la misma regla FNV en el servidor (StyleAtomizer) y en el navegador (style-atomizer.ts)), así que el marcado que escribió el SSR y el árbol que construye el cliente nombran una clase para un estilo, y la hidratación no reescribe nada.

• Una regla por valor distinto: cien tarjetas con un estilo comparten sus clases en lugar de repetir cien cadenas de estilo en línea.
• Ninguna hoja de estilos que descargar: el servidor escribe las reglas que una página usa dentro de la página misma (<style id="eq-atomic">), y el navegador añade una regla a esa misma hoja la primera vez que su árbol necesita una clase que la página no tenía.
• Ningún salto de layout por el estilo: las clases que renderizó el servidor son las que conserva el cliente.

División del código

• Chunks por página: cada página es su propio módulo, que el boot importa en la primera navegación hacia ella, y lo que dos o más páginas comparten es un chunk que bun separa una vez. Quien usa la aplicación descarga solo lo necesario para la ruta actual.
• Carga diferida: los componentes y las bibliotecas complejas se pueden cargar a demanda.