diff options
author | Lukas Eipert <leipert@gitlab.com> | 2018-11-06 13:20:49 +0300 |
---|---|---|
committer | Lukas Eipert <leipert@gitlab.com> | 2018-11-06 13:39:11 +0300 |
commit | 26ab92d3f38eea724728d71bf033895e1e783d1d (patch) | |
tree | 7cedaf4a007e17dec699e03cb28269a62b506319 /spec/javascripts/reports | |
parent | 84f562e7040f1da818157853de84874d57135ca9 (diff) |
Improve performance of rendering large reports
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 (time spent on executing JS/Rendering): 22s -> 2.5s
- DOM node count: 430k -> 7k up to 30k while scrolling
Diffstat (limited to 'spec/javascripts/reports')
-rw-r--r-- | spec/javascripts/reports/components/grouped_test_reports_app_spec.js | 4 | ||||
-rw-r--r-- | spec/javascripts/reports/components/report_section_spec.js | 2 |
2 files changed, 3 insertions, 3 deletions
diff --git a/spec/javascripts/reports/components/grouped_test_reports_app_spec.js b/spec/javascripts/reports/components/grouped_test_reports_app_spec.js index f58515daa4f..69767d9cf1c 100644 --- a/spec/javascripts/reports/components/grouped_test_reports_app_spec.js +++ b/spec/javascripts/reports/components/grouped_test_reports_app_spec.js @@ -151,11 +151,11 @@ describe('Grouped Test Reports App', () => { it('renders resolved failures', done => { setTimeout(() => { - expect(vm.$el.querySelector('.js-mr-code-resolved-issues').textContent).toContain( + expect(vm.$el.querySelector('.report-block-container').textContent).toContain( resolvedFailures.suites[0].resolved_failures[0].name, ); - expect(vm.$el.querySelector('.js-mr-code-resolved-issues').textContent).toContain( + expect(vm.$el.querySelector('.report-block-container').textContent).toContain( resolvedFailures.suites[0].resolved_failures[1].name, ); done(); diff --git a/spec/javascripts/reports/components/report_section_spec.js b/spec/javascripts/reports/components/report_section_spec.js index eb7307605d7..b02af8baaec 100644 --- a/spec/javascripts/reports/components/report_section_spec.js +++ b/spec/javascripts/reports/components/report_section_spec.js @@ -120,7 +120,7 @@ describe('Report section', () => { 'Code quality improved on 1 point and degraded on 1 point', ); - expect(vm.$el.querySelectorAll('.js-mr-code-resolved-issues li').length).toEqual( + expect(vm.$el.querySelectorAll('.report-block-container li').length).toEqual( resolvedIssues.length, ); }); |