Skip to content

Improve Blame Page rendering performance

What does this MR do and why?

This MR intends to reduce rendering time for the blame page by about 3.5 times.

In order to do this two new strategies were used:

  1. content-visiblity is applied to the whole row instead of using it for each line, commit block and line number.
  2. Table layout for the row is reaplced with Grid layout.

The first strategy became possible by calculating intrinsic row height on the server. Since we already know the number of lines in each blame block it was trivial to calculate the final row height and set it during SSR. The precision of the intrinsic height also was increased, so in turn there's essentially no scroll 'lag' anymore.

The second strategy was applied because after doing several benchmarks it become evident that the Table layout is still very slow even when using content-visiblity. We can completely skip the step of caluclating table dimensions over and over again just by using Grid layout with fixed columns. That way table layout is calculated only once and Grid layout is calculated on demand. The behaviour of previous layout is also retained, so the change is transparent to the user.

Lastly, a minor visual bug with row not stretching enough was fixed:

Before After
image image

Screenshots or screen recordings

Here's a before and after comparison with a 6x CPU slowdown on a High-end machine:

Click to expand
Before After
before-1 after-1
before-2 after-2
before-3 after-3

How to set up and validate locally

  1. Clone GitLab repo into your GDK installation;
  2. Open gitlab/-/blame/master/spec/models/project_spec.rb blame page;
  3. Measure performance using DevTools Performance tab;
  4. Change the branch to master and repeat the measurement.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Stanislav Lashmanov

Merge request reports

Loading