eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
Email Rendering
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
Diagnostics
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
PT-BR
Analytics-pt-BR
Architecture-pt-BR
Assets-pt-BR
BuildFlow-pt-BR
BunPackage-pt-BR
Capabilities-pt-BR
Charts-pt-BR
CodeEditor-pt-BR
Compiler-pt-BR
CompileTimeEvaluation-pt-BR
Components-pt-BR
Debug-pt-BR
DeclarativeSurface-pt-BR
DesignSystem-pt-BR
Diagnostics-pt-BR
EmailRealizer-pt-BR
ExternalTypeResolution-pt-BR
Forms-pt-BR
GettingStarted-pt-BR
Home-pt-BR
Icons-pt-BR
Image-pt-BR
Localization-pt-BR
Lottie-pt-BR
Markdown-pt-BR
Mermaid-pt-BR
PackageArchitecture-pt-BR
Performance-pt-BR
Photon-pt-BR
Roadmap-pt-BR
Runtime-pt-BR
Security-pt-BR
ServerIntegration-pt-BR
Storage-pt-BR
Styling-pt-BR
SupportedFeatures-pt-BR
VisualEditor-pt-BR
WriteOnceComponents-pt-BR
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
Docspt-BR
Performance e Otimização
Edit this page
2 min read
🌐 Esta página em: English · Português
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.
Extração de CSS sem runtime
O compilador analisa as definições de StyleClass e as extrai para arquivos .css estáticos em tempo de build.
Sem overhead de CSS-in-JS: diferente de frameworks web modernos que calculam estilos em tempo de execução, o eQuantic.UI entrega CSS estático, reduzindo o trabalho de CPU no browser.
Cacheabilidade: os arquivos CSS podem ser cacheados independentemente dos bundles de lógica.
Otimização de LCP: o layout é aplicado assim que o CSS carrega, evitando Layout Shift (CLS).
Code splitting
Chunks por página: cada página gera o próprio bundle JS. O usuário baixa apenas o necessário para a rota atual.
Lazy loading: componentes e bibliotecas complexos podem ser carregados sob demanda.