⚡ Bolt: Eliminate O(N) DOM queries inside requestAnimationFrame loop#75
⚡ Bolt: Eliminate O(N) DOM queries inside requestAnimationFrame loop#75
Conversation
Eliminated O(N) DOM query and classList.toggle inside the requestAnimationFrame loop by caching `cardEl` during initialization and tracking the `isCardActive` state. Co-authored-by: kaitoartz <56949089+kaitoartz@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
💡 What: Caches the
.intro-cardDOM element reference during theHyperScrollIntroinitialization and tracks its active state (isCardActive) to conditionally update its class only when the state changes.🎯 Why: Inside the 60fps
requestAnimationFrameloop (HyperScrollIntro.startLoop()), callingquerySelector('.intro-card')and indiscriminately callingclassList.toggle()for potentially hundreds of items causes O(N) DOM read/write operations per frame. This is a severe anti-pattern that leads to unnecessary CPU overhead, GC pressure, and layout thrashing, especially on low-end and mobile devices.📊 Impact: Reduces DOM read/write operations for
.intro-cardelements from O(N) per frame (N = number of intro items) to 0 operations per frame, strictly executing a single write ONLY when an item enters or exits the focus range. CPU usage during the intro sequence should be measurably lower.🔬 Measurement: Use Chrome DevTools Performance tab to profile the intro scroll sequence before and after this change. Observe the reduction in the amount of time spent in "Scripting" and "Rendering" phases, specifically the elimination of repeated
querySelectorcalls in the flame chart.PR created automatically by Jules for task 8938071672307508152 started by @kaitoartz