Skip to content

⚡ Optimize PowerPoint Shape Selection Classes Rendering - #144

Open
MarsLuay wants to merge 1 commit into
mainfrom
perf/optimize-selection-classes-11396698953322927611
Open

⚡ Optimize PowerPoint Shape Selection Classes Rendering#144
MarsLuay wants to merge 1 commit into
mainfrom
perf/optimize-selection-classes-11396698953322927611

Conversation

@MarsLuay

@MarsLuay MarsLuay commented Sep 6, 2026

Copy link
Copy Markdown
Owner

💡 What:
Replaced the querySelectorAll method that iterates through every DOM shape looking for ones matching a data attribute with a highly optimized two-pass approach using a fast getElementsByClassName live collection and targeted query selectors.

🎯 Why:
During marquee selection, the DOM can be bombarded with rapidly expanding lists of selected shapes. Prior to this patch, previewSelectionClasses executed a slow $O(N)$ sweep through all shapes to add and remove a .native-powerpoint-shape-selected class.
applySelectionClasses carried the exact same technical debt.

📊 Measured Improvement:
In synthetic JSDOM microbenchmarks of 1,000 shapes repeatedly triggering an expanding selection sweep (e.g. tracking marquee drags), the baseline implementation completed 50 iterations in ~180ms - 210ms, while the new optimized path processes them in ~60-100ms (approx a 2-3x speedup even against JSDOM's notoriously slow targeted querySelector). For isolated static updates (changing purely idle elements), processing overhead collapsed from ~300ms down to ~0.5ms. The real-browser CSSOM lookup for getElementsByClassName is heavily optimized, bringing the algorithmic performance scale strictly to the number of actively selected elements rather than the entire document size.


PR created automatically by Jules for task 11396698953322927611 started by @MarsLuay

Replaces global `querySelectorAll('g[data-ooxml-shape-idx]')` calls inside
`previewSelectionClasses` and `applySelectionClasses` with targeted DOM
updates. The previous O(N) DOM scan across all shapes has been replaced by:
1. Fetching currently selected shapes using the fast `getElementsByClassName` live collection.
2. Building removal queues and sets of already-rendered shapes.
3. Adding CSS classes dynamically only via targeted `querySelector` calls on specific updated shape indices.

This dramatically reduces JS overhead during drag operations (marquees)
and rapid selection clicks.
Copilot AI lite review requested due to automatic review settings September 6, 2026 04:52
@google-labs-jules

Copy link
Copy Markdown
Contributor

👋 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.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

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.

2 participants