Skip to content

Use buffered rendering for Roadmap epics

Kushal Pandya requested to merge 32822-roadmap-buffered-rendering into master

What does this MR do?

This MR adds buffered rendering support for Epics on Roadmap page to prevent slow first render when there are too many epics to show for group Roadmap. This feature is currently behind feature flag :roadmap_buffered_rendering which can be enabled locally by running Feature.enable(:roadmap_buffered_rendering) in Rails console.

Approach

  • On page load we calculate buffer size (i.e. No. of Epics to show in single batch) based on available viewport height.
  • Once Epics are loaded, we identify if total epics are under buffer size (i.e. do we need buffered rendering for Epics we have to show?)
  • If epics are not under buffer limit, we use vue-virtual-scroll-list to render epics list by using calculated buffer limit.
  • Thus, for any number of epics to show, page load always starts with no. of Epics that can fit in current viewport size while keeping rest of the epics virtualized.
  • In a typical 1440p screen, at the most 25 Epics can fit in viewport.

Performance Gains

Here's performance comparison when Roadmap page is loaded with 1500 epics to render;

Buffered Without Buffer
Duration (via console.time) ~300ms ~7000ms
DevTools Performance Analysis image image

As per above numbers, this MR can lead to Roadmap page loading 20 times faster in an average case scenario (eg; gitlab-org group on GitLab.com contains over 1600 epics of which over 700 are shown on Roadmap). 🚀

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

#32822

Edited by 🤖 GitLab Bot 🤖

Merge request reports