Skip to content

⚡ Bolt: Eliminate O(N) DOM queries inside requestAnimationFrame loop#75

Open
kaitoartz wants to merge 1 commit intomainfrom
jules-8938071672307508152-882f13b6
Open

⚡ Bolt: Eliminate O(N) DOM queries inside requestAnimationFrame loop#75
kaitoartz wants to merge 1 commit intomainfrom
jules-8938071672307508152-882f13b6

Conversation

@kaitoartz
Copy link
Copy Markdown
Owner

💡 What: Caches the .intro-card DOM element reference during the HyperScrollIntro initialization and tracks its active state (isCardActive) to conditionally update its class only when the state changes.

🎯 Why: Inside the 60fps requestAnimationFrame loop (HyperScrollIntro.startLoop()), calling querySelector('.intro-card') and indiscriminately calling classList.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-card elements 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 querySelector calls in the flame chart.


PR created automatically by Jules for task 8938071672307508152 started by @kaitoartz

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>
@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant