⚡ bolt: [performance improvement] Use IntersectionObserver for PhotoCarousel visibility#19
⚡ bolt: [performance improvement] Use IntersectionObserver for PhotoCarousel visibility#19
Conversation
…o IntersectionObserver
- Replaces synchronous `getBoundingClientRect()` with an asynchronous `IntersectionObserver` on the `.photo-carousel`.
- Caches the visibility state in `this.isVisible`, returning this directly inside `isInView()` instead of querying the DOM.
- Prevents forced layout thrashing caused by querying layout properties during keyboard navigation ('keydown' events).
|
👋 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. |
Deploying personal-website with
|
| Latest commit: |
8842025
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3e432022.personal-website-5ns.pages.dev |
| Branch Preview URL: | https://bolt-perf-carousel-observer.personal-website-5ns.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR improves PhotoCarousel keyboard-navigation performance by replacing per-keydown layout reads (getBoundingClientRect) with IntersectionObserver-based visibility tracking, caching the visibility state in isVisible.
Changes:
- Added
IntersectionObserverto track carousel visibility and store it onPhotoCarousel.isVisible. - Updated
isInView()to return the cached visibility boolean instead of computing visibility via layout reads. - Documented the optimization in
.jules/bolt.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| script.js | Replaces getBoundingClientRect() visibility checks with IntersectionObserver + cached boolean for PhotoCarousel. |
| .jules/bolt.md | Adds a performance note documenting the IntersectionObserver visibility-caching approach. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| entries.forEach(entry => { | ||
| this.isVisible = entry.isIntersecting; | ||
| }); | ||
| }, { threshold: 0.1 }); |
💡 What: Replaced
getBoundingClientRect()with anIntersectionObserverto track the visibility of thePhotoCarouselcomponent, storing the result in a boolean property (isVisible).🎯 Why: The original
isInView()method queried the DOM's layout explicitly on every single 'keydown' event to check if the user could see the carousel before handling arrow key events. This causes forced synchronous layout (layout thrashing), dragging down the main thread and slowing UI responsiveness.📊 Impact: Eliminates expensive forced reflows during keyboard navigation on the page. Reduces DOM calculation overhead to O(1) by accessing a cached boolean instead.
🔬 Measurement: I used Playwright and custom script parsing to measure
getBoundingClientRect()hits. Tested the carousel functionality locally using keyboard navigation. The.photo-carouselcontinues functioning as expected without throwing any errors or dropping keyboard events when visible.PR created automatically by Jules for task 1075905277249840398 started by @dttdrv