⚡ bolt: cache document dimensions to prevent layout thrashing#18
⚡ bolt: cache document dimensions to prevent layout thrashing#18
Conversation
Implemented caching for `document.documentElement.scrollHeight` and `window.innerHeight` in `ScrollProgress` and `SectionNav` to avoid triggering synchronous layout reflows on high-frequency `scroll` and IntersectionObserver events. Added a global `ResizeObserver` to refresh the cached heights on DOM mutation, as well as utilizing the existing debounced `resize` handler.
|
👋 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: |
0a09808
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://51edd735.personal-website-5ns.pages.dev |
| Branch Preview URL: | https://jules-bolt-optimization-cach.personal-website-5ns.pages.dev |
There was a problem hiding this comment.
Pull request overview
Caches document.documentElement.scrollHeight and window.innerHeight in ScrollProgress and SectionNav to avoid querying these layout-triggering properties inside high-frequency scroll/intersection handlers.
Changes:
- Added
cachedDocHeight/cachedWindowHeightproperties andcacheDimensions()methods toScrollProgressandSectionNav, replacing direct DOM queries in their hot paths. - Added a
ResizeObserverondocument.documentElementand resize-handler entries to keep cached values fresh. - Updated
.jules/bolt.mdwith a new learning entry documenting this pattern.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| script.js | Adds dimension caching to ScrollProgress and SectionNav, with ResizeObserver + resize listener to refresh caches |
| .jules/bolt.md | Documents the new caching convention |
💡 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.
| if (typeof ScrollProgress !== 'undefined') ScrollProgress.cacheDimensions(); | ||
| if (typeof SectionNav !== 'undefined') SectionNav.cacheDimensions(); |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0a098088c5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const docHeight = this.cachedDocHeight - this.cachedWindowHeight; | ||
| const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; |
There was a problem hiding this comment.
update() now relies only on cached heights, but ScrollProgress.cacheDimensions() runs in ScrollProgress.init() before later init steps mutate layout (LanguageSwitcher.init() calls I18n.applyTranslations() and rewrites text in script.js:1517-1534, then AboutToggle.init() runs) and before the ResizeObserver is attached at script.js:1737. On localized pages where those mutations change document height, the progress bar can hit 100% before the actual bottom until another resize/observer event occurs.
Useful? React with 👍 / 👎.
💡 What: Added caching logic to
ScrollProgressandSectionNavfor document height and window height. Refreshed using aResizeObserverand window resize events.🎯 Why: Calling
document.documentElement.scrollHeightandwindow.innerHeightinside high-frequencyscrolland IntersectionObserver handlers causes forced synchronous layouts (layout thrashing), degrading rendering performance, especially on mobile devices.📊 Impact: significantly reduces layout recalculations during scroll, maintaining a smoother 60fps scrolling experience.
🔬 Measurement: Use Chrome DevTools Performance tab to measure Layout recalculations during scrolling; there should be a visible reduction in long frames caused by "Forced synchronous layout".
PR created automatically by Jules for task 16368717588331196385 started by @dttdrv