Use buffered rendering for Roadmap epics
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 |
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
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
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