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
DocsRuntime
Performance and Optimization
Edit this page
2 min read
🌐 This page in: English · Português
The focus of eQuantic.UI is to deliver a Single Page Application (SPA) experience with minimal overhead, leveraging the power of C# to generate highly optimized frontend code.
🚀 Reconciliation and Virtual DOM
The Virtual DOM system was designed to be efficient and anticipate state changes.
Diffing Strategy (Keyed LIS Algorithm)
The reconciliation algorithm uses an efficient Keyed Diffing strategy based on the Longest Increasing Subsequence (LIS) algorithm.
Key Property: The key property identifies elements across renders. Elements with the same key are reused and updated in place.
LIS Optimization: When elements are reordered, the algorithm computes the longest increasing subsequence to minimize DOM movements. Only elements outside the LIS need to be moved.
Prefix/Suffix Optimization: Common prefixes and suffixes are processed first without complex diffing, improving performance for typical list operations (append, prepend).
Memory Efficiency: Unmoved elements preserve their browser state (input focus, scroll position, etc.).
🧠 Resource Management (Memory Management)
Memory leaks are mitigated through the intelligent use of weak references and automatic cleanup.
Event Listener Tracking
Event listeners are tracked using WeakMap<HTMLElement, Map<string, EventHandler>>.
Weak References: WeakMap allows DOM elements to be collected by the Garbage Collector when removed from the tree, even if the framework still has internal references to their handlers.
Automatic Cleanup: When removing a component, the reconciler attempts to explicitly disconnect listeners, but the WeakMap acts as a safety net to prevent leaks in complex lifecycles.
📦 Bundling and Loading
Hybrid Strategy with Bun
The SDK uses an embedded Bun binary to process the final output.
Build Performance: Bun processes TS/JS files up to 10x faster than Node.js-based tools.
Tree-shaking: Dead code is automatically removed during build.
Minification: Scripts are delivered compressed.
Zero-runtime CSS Extraction
The compiler analyzes StyleClass definitions and extracts them into static .css files at build time.
No CSS-in-JS Overhead: Unlike modern web frameworks that compute styles at runtime, eQuantic.UI delivers static CSS, reducing the CPU work in the browser.
Cacheability: CSS files can be cached independently of the logic bundles.
LCP Optimization: Layout is applied as soon as the CSS is loaded, preventing Layout Shift (CLS).
Code Splitting
Chunks per Page: Each page generates its own JS bundle. The user downloads only what is necessary for the current route.
Lazy Loading: Complex components and libraries can be loaded on demand.