Improve performance of rendering large reports
requested to merge 7737-ci-pipeline-view-slowed-down-massivly-if-security-tabs-has-many-entries 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?
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 -
Link to e2e tests MR added if this MR has Requires e2e tests label. See the Test Planning Process.
Edited by Lukas Eipert