Performance

Performance and Optimization

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 (Current)

Currently, the reconciliation algorithm operates with an index-based strategy.

• The reconciler sequentially compares new nodes with old ones.
• Key Property: The Key property is used to verify identity. If an element's key changes, the framework assumes it is a completely new element and recreates it, ensuring that incorrect state does not leak between distinct elements.
• Note: Intelligent key-based reordering (moving elements in the DOM instead of replacing them) is a target for future optimization. For now, identity ensures integrity, not necessarily minimal DOM movement in reordered lists.

🧠 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.