Docs

Playground

GitHub

DocsRuntime

Performance e Otimização

Editar esta página

3 min de leitura

O foco do eQuantic.UI é entregar uma experiência de Single Page Application (SPA) com overhead mínimo, aproveitando o poder do C# para gerar código de frontend altamente otimizado.

🚀 Reconciliação e Virtual DOM

O sistema de Virtual DOM foi desenhado para ser eficiente e antecipar mudanças de estado.

Estratégia de diffing (algoritmo Keyed LIS)

O algoritmo de reconciliação usa uma estratégia eficiente de Keyed Diffing baseada no algoritmo da maior subsequência crescente (Longest Increasing Subsequence, LIS).

•

Propriedade Key: a propriedade key identifica elementos entre renders. Elementos com a mesma key são reaproveitados e atualizados no lugar.

•

Otimização por LIS: quando elementos são reordenados, o algoritmo calcula a maior subsequência crescente para minimizar movimentos no DOM. Só os elementos fora da LIS precisam se mover.

•

Otimização de prefixo/sufixo: prefixos e sufixos comuns são processados primeiro, sem diffing complexo, melhorando a performance das operações típicas de lista (append, prepend).

•

Eficiência de memória: elementos que não se movem preservam o estado do browser (foco de input, posição de scroll etc.).

🧠 Gestão de recursos (memória)

Vazamentos de memória são mitigados pelo uso inteligente de referências fracas e limpeza automática.

Rastreamento de event listeners

Os listeners são rastreados com WeakMap<HTMLElement, Map<string, EventHandler>>.

•

Referências fracas: o WeakMap permite que elementos do DOM sejam coletados pelo Garbage Collector quando removidos da árvore, mesmo que o framework ainda tenha referências internas aos handlers deles.

•

Limpeza automática: ao remover um componente, o reconciliador tenta desconectar os listeners explicitamente, mas o WeakMap funciona como rede de segurança contra vazamentos em ciclos de vida complexos.

📦 Bundling e carregamento

Estratégia híbrida com Bun

O SDK usa um binário Bun embarcado para processar a saída final.

•

Performance de build: o Bun processa arquivos TS/JS até 10× mais rápido que ferramentas baseadas em Node.js.

•

Tree-shaking: código morto é removido automaticamente durante o build.

•

Minificação: os scripts são entregues comprimidos.

CSS atômico, com o mesmo nome dos dois lados

Um estilo é um valor abstrato em C# (BoxStyle, props de layout, papéis), nunca CSS. O realizador web transforma cada propriedade numa classe ATÔMICA deduplicada, nomeada por um hash do valor (a mesma regra FNV no servidor (StyleAtomizer) e no browser (style-atomizer.ts)), então a marcação que o SSR escreveu e a árvore que o cliente monta nomeiam uma classe para um estilo, e a hidratação não reescreve nada.

•

Uma regra por valor distinto: cem cards com um estilo compartilham as classes dele em vez de repetir cem strings de estilo inline.

•

Nenhuma folha para buscar: o servidor escreve as regras que a página usa na própria página (<style id="eq-atomic">), e o browser acrescenta uma regra a essa mesma folha na primeira vez que a árvore precisa de uma classe que a página não tinha.

•

Sem layout shift vindo do estilo: as classes que o servidor renderizou são as que o cliente mantém.

Code splitting

•

Chunks por página: cada página é o próprio módulo, que o boot importa na primeira navegação até ela, e o que duas ou mais páginas compartilham é um chunk que o bun separa uma vez. O usuário baixa apenas o necessário para a rota atual.

•

Lazy loading: componentes e bibliotecas complexos podem ser carregados sob demanda.

ANTERIORRuntime (TypeScript)

PRÓXIMAIntegração com o servidor

NESTA PÁGINA