⚡ Optimize isUnread to reduce layout thrashing#15
⚡ Optimize isUnread to reduce layout thrashing#15google-labs-jules[bot] wants to merge 1 commit intomainfrom
Conversation
Replaces `querySelectorAll` with `TreeWalker` to optimize the detection of unread conversations. This avoids eager traversal of the entire subtree and unnecessary `getComputedStyle` calls on non-text elements.
|
👋 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. |
This PR optimizes the
isUnreadfunction insource/browser/conversation-list.tsto reduce layout thrashing and improve performance.Problem:
The original implementation used
element.querySelectorAll('span, div')to find all potential text containers. This approach has two main issues:NodeList, which can be expensive for complex DOM structures.childElementCount > 0), it still inspected many elements and calledgetComputedStyleon them.getComputedStyleforces a synchronous reflow if the layout is dirty, leading to layout thrashing when called in a loop (e.g., inside a MutationObserver callback).Solution:
The optimized implementation uses
document.createTreeWalkerwithNodeFilter.SHOW_TEXT.TreeWalkertraverses the DOM lazily. The search stops immediately once an unread (bold) element is found.Textnodes and inspects their direct parent elements. This naturally filters out empty container divs and structural wrappers that do not contain visible text, significantly reducing the number ofgetComputedStylecalls.Impact:
This change should reduce the CPU time spent in
isUnread, especially during high-volume updates (e.g., initial load or rapid scrolling/updates in the conversation list), by minimizing DOM read operations and style recalculations.PR created automatically by Jules for task 8636496651720263766 started by @raztronaut