Skip to content

Render add-diff-note with server and optimize styles

Bryce Johnson requested to merge inject-add-diff-note into master

This MR address a few performance bottlenecks related to the add-diff-note button that occur on MRs with large diffs. Specifically, this MR:

  1. moves the rendering of the button back to the server, and shows/hides it using opacity rather than display
  2. removes the transform applied to the button on hover (scale) because it automatically triggers a reflow. This is a UX matter, but there's no way to use this property that won't trigger a reflow.
  3. refactors diff.js and file_comment_button.js to avoid unnecessary computation and event handling.

Performance Impact:

On MRs with a large diff (1k lines changed), when hovering over diff lines:

  1. increases FPS from 1-2 to 30-40
  2. decreases CPU usage from 75-90% to < 10%

Obviously, results may vary, as these were collected on a single machine. Similar improvements occur as diff size increases (I tested up to 37.5k lines).

Visually the difference looks like this:

Before: 2017-06-12_20.01.32

After: 2017-06-12_20.02.29

Edited by Bryce Johnson

Merge request reports