perf: eliminate layout thrashing and array allocations during drawing

This commit is contained in:
ruinivist
2026-06-02 07:59:39 +00:00
parent d8d917d315
commit fdcda7a3c2
3 changed files with 16 additions and 1 deletions
+4
View File
@@ -0,0 +1,4 @@
## 2024-06-02 - Eliminate Layout Thrashing in Theme Sync
**Learning:** Interleaving `window.getComputedStyle().getPropertyValue()` and `element.style.setProperty()` inside a loop causes layout thrashing (forced synchronous layout) multiple times per animation frame during drawing.
**Action:** When synchronizing many DOM styles based on computed styles, always collect the computed values in a first pass, and only then apply `setProperty` updates in a separate second pass, preferably also skipping updates where the value hasn't actually changed.