⚡ Bolt: Throttle scrollTopBtn scroll listener#135
Conversation
* Wrapped the visibility toggle for the scroll-to-top button in a `requestAnimationFrame` block to debounce DOM mutations (classList toggles).
* Added `{ passive: true }` to the `scroll` event listener to ensure smooth browser scrolling performance without main thread blocking.
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. |
1 participant
💡 What: Added
requestAnimationFramethrottling to thescrollTopBtnvisibility toggle logic within thewindow.addEventListener('scroll', ...)block, alongside the{ passive: true }parameter.🎯 Why: Direct DOM modifications (
classList.add/remove) inside the unthrottledscrollevent listener cause synchronous layout calculations (layout thrashing) and degrade frame rates during continuous scrolling.📊 Impact: Restores a steady 60fps scrolling experience by restricting DOM updates for the button to a maximum of once per screen refresh (typically 60Hz), while also telling the browser it doesn't need to await JavaScript execution to update the scrolling position.
🔬 Measurement: Profile the scroll events using Chrome DevTools' Performance panel. You will observe fewer, spaced-out Recalculate Style / Layout events strictly bound to the
requestAnimationFrameintervals, rather than firing excessively on every micro-scroll wheel movement.PR created automatically by Jules for task 6089073767649285546 started by @kaitoartz