Skip to content

Improve performance of rendering large reports

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?

Edited by Sam Beckham

Merge request reports