Improve performance of rendering large reports
requested to merge 7737-ci-pipeline-view-slowed-down-massivly-if-security-tabs-has-many-entries-ee into master
What does this MR do?
Instead of rendering all report items in 4 big lists, we make use of vue-virtual-scroll-list and render only few dozens at once. This improves the performance in several metrics:
- Initial load time
- Memory Pressure
- CPU Load
- DOM node count
In an example with around 11k reported security vulnerabilities:
- Initial load time: 27s -> 4.1s
- Memory Pressure: ~750 MB -> ~270 MB
- CPU Load: 22s -> 2.5s
- DOM node count: 430k -> 7k up to 30k while scrolling
Before | After |
---|---|
rendering-before | rendering-after |
What are the relevant issue numbers?
- Closes #7737 (closed)
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated -
Tests added for this feature/bug -
Conforms to the code review guidelines -
Conforms to the merge request performance guidelines -
Conforms to the style guides -
Conforms to the database guides -
EE specific content should be in the top level /ee
folder -
For a paid feature, have we considered GitLab.com plans, how it works for groups, and is there a design for promoting it to users who aren't on the correct plan?
Edited by Sam Beckham