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.
- 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-listto 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.
Here's performance comparison when Roadmap page is loaded with
1500 epics to render;
|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).
- 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
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
- 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