René's URL Explorer Experiment

Title: perf(workflow): scope resize CSS-var writes to the container, not :root by waleedlatif1 · Pull Request #5738 · simstudioai/sim · GitHub

Open Graph Title: perf(workflow): scope resize CSS-var writes to the container, not :root by waleedlatif1 · Pull Request #5738 · simstudioai/sim

X Title: perf(workflow): scope resize CSS-var writes to the container, not :root by waleedlatif1 · Pull Request #5738 · simstudioai/sim

Description: Summary Resizing the editor panel, terminal, output panel, and sidebar on the workflow canvas was still laggy on real workflows even after the drag handles stopped re-rendering React per frame (#5730). A Chrome DevTools CPU/tracing capture showed the remaining cost is style recalculation, not JS or layout: ~3.9s of Document::recalcStyle over a 50-move panel drag. Root cause: each drag frame wrote its CSS variable to document.documentElement. On a large document (~42k elements) any inline custom-property write on the root recalculates style for the whole tree — measured at ~77ms per write, independent of what reads the variable (an unused --zzz var costs the same 77ms). Writing the same variable to the element that consumes it recalcs only that subtree (~0.5ms — a ~150x reduction). Fix: useDragResize now writes the variable to a caller-provided target element during the drag and reconciles to :root once on release (so on-demand readers, the pre-hydration blocking script, and rehydration are all unchanged). panel → .panel-container, terminal → .terminal-container, output panel → .terminal-container (both the panel and logs column inherit it), sidebar → .sidebar-shell-outer. The terminal's expanded-threshold sync writes store state directly instead of setTerminalHeight so it no longer touches :root mid-drag (that was a ~77ms hitch right at the collapse threshold). Measured (near-empty canvas, 50-move drag, CDP trace + rAF frame timing) Handle Before After Panel style+layout 3891ms 56ms Panel frame p95 / max 91.6 / 108ms 8.4 / 8.8ms Panel main-thread blocking 4566ms 0ms Terminal recalcStyle 3899ms 16ms Terminal blocking 5558ms 0ms Sidebar recalc ~77ms/frame ~1ms/frame Frames drop from ~11fps (91ms) to a solid 120fps (8.3ms) with zero long-tasks. Type of Change Performance improvement Testing Verified with Playwright + CDP against a live dev workflow: all four handles engage, drive their element's width/height live during the drag (scoped inline var), commit the final value to :root + the store on release, remove the scoped override (reconciled), and persist. Before/after CPU profiles and traces captured for each handle. Checklist Code follows project style guidelines Self-reviewed my changes Tests added/updated and passing No new warnings introduced I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Open Graph Description: Summary Resizing the editor panel, terminal, output panel, and sidebar on the workflow canvas was still laggy on real workflows even after the drag handles stopped re-rendering React per frame (#5...

X Description: Summary Resizing the editor panel, terminal, output panel, and sidebar on the workflow canvas was still laggy on real workflows even after the drag handles stopped re-rendering React per frame (#5...

Opengraph URL: https://github.com/simstudioai/sim/pull/5738

X: @github

direct link

Domain: github.com

Links:

Viewport: width=device-width