Cover image for Angular Performance: Virtual Scrolling with the CDK

Angular Performance: Virtual Scrolling with the CDK

juristr profile image Juri Strumpflohner Updated on ・2 min read

This post has originally been published on https://juristr.com/blog/2019/08/ngperf-virtual-scrolling-cdk. Go to juristr.com/blog for more content

This article is part of my "Angular Performance Week" series, where I publish a new video each day based on the performance articles on web.dev/angular.

Note: this article and attached Egghead video lesson are based on the articles on web.dev/angular by Minko Gechev and Stephen Fluin. Full credit goes to them πŸ‘

Angular Performance Series

  1. Route Level Code Splitting
  2. Preload Lazy Routes in Angular
  3. Performance budgets with the Angular CLI
  4. Optimize Angular's Change Detection
  5. Virtual Scrolling for large lists with the CDK
  6. Precaching with the Angular Service Worker

Don't miss the other videos by subscribing to my newsletter.

Leverage the Angular CDK to implement virtual scrolling

Browsers become faster every day, but still, DOM updates are costly. If we have large lists, the browser needs to render them upfront, creating hundreds if not thousands of DOM nodes, even though the user might not scroll that far down the list. Not only does this slow down the scrolling itself, but even the page load of our app can suffer from it. To optimize this experience, we can use virtual scrolling, in particular, in this lesson we’re using Angular’s CDK to implement that.

Original web.dev article

Wanna read the original web.dev article? Check it out here!.

Posted on by:

juristr profile

Juri Strumpflohner


Architect πŸ‘¨β€πŸ’» @nrwl_io πŸ³πŸ¦„ β€’ Google Dev Expert #GDE β€’πŸŽ“ @eggheadio β€’ ❀ JS, Angular β€’ πŸ“ blogger β€’ πŸ—£οΈ speaker β€’ @cypress_io Ambassador β€’ nx.app β€’ nx.dev


This is where we write about all things Angular. It's meant to be a place for Angular community and people interested in Angular and the Angular ecosystem.


Editor guide