⚡ Bolt: Remove DOM query from animation loop in HyperScrollIntro#74
⚡ Bolt: Remove DOM query from animation loop in HyperScrollIntro#74
Conversation
Optimized the requestAnimationFrame loop by caching the DOM element `item.cardEl` during initialization instead of repeatedly calling `querySelector` inside the loop. This change reduces main-thread work, minimizes layout blocking, and smooths frame rates on lower-end devices. 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: Removed
item.el.querySelector('.intro-card')from therequestAnimationFrameloop inHyperScrollIntroand replaced it with a cacheditem.cardElreference set during initialization.🎯 Why: Querying the DOM inside an animation loop forces the browser to evaluate the DOM tree structure up to 60 times per second per element, severely degrading frame rates on lower-end devices by blocking the main thread.
📊 Impact: Eliminates repeated O(N) DOM node lookups inside a hot path, making the update operation O(1) and significantly lowering CPU overhead during the intro animation.
🔬 Measurement: Verify by profiling the CPU main thread during the scroll intro on a simulated "low-tier" mobile connection/device—the time spent in
requestAnimationFramehandler should be noticeably reduced.PR created automatically by Jules for task 3337083058878210582 started by @kaitoartz