Skip to content

⚡ Optimize isUnread to reduce layout thrashing#15

Draft
google-labs-jules[bot] wants to merge 1 commit intomainfrom
perf/optimize-isunread-treewalker-8636496651720263766
Draft

⚡ Optimize isUnread to reduce layout thrashing#15
google-labs-jules[bot] wants to merge 1 commit intomainfrom
perf/optimize-isunread-treewalker-8636496651720263766

Conversation

@google-labs-jules
Copy link
Copy Markdown

This PR optimizes the isUnread function in source/browser/conversation-list.ts to 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:

  1. Eager Evaluation: It traverses the entire subtree of the conversation element and creates a static NodeList, which can be expensive for complex DOM structures.
  2. Excessive Style Checks: Although it filtered for leaf nodes (childElementCount > 0), it still inspected many elements and called getComputedStyle on them. getComputedStyle forces 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.createTreeWalker with NodeFilter.SHOW_TEXT.

  1. Lazy Evaluation: TreeWalker traverses the DOM lazily. The search stops immediately once an unread (bold) element is found.
  2. Targeted Checks: It iterates only over Text nodes 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 of getComputedStyle calls.

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

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.
@google-labs-jules
Copy link
Copy Markdown
Author

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants