Performance & Direct DOM
EUIX achieves its high performance profile by bypassing the Virtual DOM layer entirely and updating target DOM elements directly in place.
⚡ Direct DOM Updates Explained #
In traditional Virtual DOM architectures, state mutations trigger a component render cycle that constructs a new virtual tree, runs a recursive diff against the previous virtual tree, and calculates a patch set:
[Virtual DOM Pipeline]
State Change ──► Virtual Tree Render ──► Recursive Tree Diff ──► Calculate Patches ──► DOM MutationIn EUIX, each reactive binding maintains a direct reference to its target DOM node:
[EUIX Fine-Grained Pipeline]
State Change ──► Lookup Dependent Node List ──► Direct DOM Mutation
📊 Benchmark Results (js-framework-benchmark standard)
#
The following metrics reflect reproducible test scenarios executing against 1,000 to 10,000 DOM elements:
| Benchmark Scenario | Unoptimized Baseline | EUIX Engine | Latency Improvement |
|---|---|---|---|
| Fine-Grained Single Item Update | 15.41 ms | 0.21 ms | ⚡ ~99% Lower Latency |
| Swap 2 Rows (1,000 items) | 1,762.45 ms | 12.79 ms | 🚀 ~99.3% Lower Latency |
| Partial Update (every 10th row) | 530.40 ms | 28.05 ms | ⚡ ~95% Lower Latency |
| Clear All 1,000 Rows | 420.10 ms | 5.26 ms | 🧹 ~98.7% Lower Latency |
| 1,000 Item Initial Render | 2,007.30 ms | 246.45 ms | ⚡ ~88% Lower Latency |
| Virtual Scrolling (10,000 items) | N/A | 6.31 ms | ⚡ 60 FPS Windowing |
📜 Virtual Scrolling (<for_each virtual="true">)
)">#
For rendering extremely large datasets (e.g. 50,000 rows), EUIX provides built-in DOM windowing:
<for_each
items="{data.largeDataset}"
var="row"
key="id"
virtual="true"
item_height="36"
viewport_height="400"
>
<div class="table-row">
<span>#{row.id}: {row.name}</span>
</div>
</for_each>Virtual scrolling creates only enough DOM nodes to fill the visible viewport (viewport_height), recycling elements as the user scrolls.
🧭 Next Step #
Learn about security guidelines in Security & Sandboxing.