Skip to content

Conversation

@MayaKirova
Copy link
Contributor

@MayaKirova MayaKirova commented Jan 8, 2026

Closes #16709

  • throttle scroll
  • move diff check out of ngDoCheck
  • use transform instead of top to limit layout reflow.
  • remove HostListener that reads scrollTop to prevent unnecessary layout reflow.
  • remove zone runs where possible.
  • use afterNextRender when updating position of container in DOM.

@MayaKirova MayaKirova changed the title fix(perf): Apply some performance optimizations. fix(perf): Apply base grid scroll performance optimizations. Jan 13, 2026
@MayaKirova MayaKirova marked this pull request as ready for review January 21, 2026 15:10
@dkamburov dkamburov added 💥 status: in-test PRs currently being tested ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification 💥 status: in-test PRs currently being tested labels Jan 23, 2026
@dkamburov
Copy link
Contributor

dkamburov commented Jan 23, 2026

The changes look good and functionality works as expected.

I did notice one minor behavior difference while testing:

  • Issue: When holding Tab to navigate between cells during editing, the navigation feels slightly slower than before
  • Possible cause: This might be related to the throttle timing or the transform scroll implementation

This is very minor, but wanted to flag it in case it's worth investigating. Otherwise, I'm verifying the PR.

@dkamburov
Copy link
Contributor

Performance Optimization Summary

Detailed Optimizations

Optimization Technique Before (Baseline) After (Optimized) Expected Delta
Array allocation push() → pre-allocated new Array(n) O(n) resizes with copying O(1) direct assignment ~20-40% faster for sizesCache building
DOM element lookup Repeated .map() → cached getter Re-computed every scroll Single traversal, cached ~15-25% fewer CPU cycles per scroll
Change detection ngDoCheck → property setter Called every CD cycle Called only on data change ~30-50% fewer CD calls
CSS positioning style.top → transform: translateY() Triggers layout reflow GPU-accelerated, no reflow ~50-70% faster paint
Scroll event handling Raw events → 40ms throttle ~60+ events/sec processed ~25 events/sec processed ~60% fewer scroll handlers
Scroll helper listener @HostListener removed Duplicate event processing Single event path ~10-15% less overhead

Aggregate Impact Estimate (100k rows, 100 scroll operations)

Metric Before (est.) After (est.) Delta
Long Tasks Count ~80-120 ~30-50 -50% to -60%
Avg Long Task Duration ~80-120ms ~55-75ms -30% to -40%
Total Blocking Time ~8-12 sec ~3-5 sec -50% to -60%
Frames per second ~15-25 fps ~40-55 fps +100% to +150%

@rkaraivanov rkaraivanov merged commit bae85ea into master Jan 23, 2026
6 checks passed
@rkaraivanov rkaraivanov deleted the mkirova/performance-optimizations branch January 23, 2026 16:09
@dkamburov
Copy link
Contributor

The changes look good and functionality works as expected.

I did notice one minor behavior difference while testing:

  • Issue: When holding Tab to navigate between cells during editing, the navigation feels slightly slower than before
  • Possible cause: This might be related to the throttle timing or the transform scroll implementation

This is very minor, but wanted to flag it in case it's worth investigating. Otherwise, I'm verifying the PR.

Please ignore my previous message. Everything seems to be working as expected, likely due to temporary high resource usage.

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

Labels

grid: performance version: 21.1.x ✅ status: verified Applies to PRs that have passed manual verification

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Virtualization performance improvements

4 participants