Render add-diff-note with server and optimize styles
This MR address a few performance bottlenecks related to the add-diff-note button that occur on MRs with large diffs. Specifically, this MR:
- moves the rendering of the button back to the server, and shows/hides it using
opacity
rather thandisplay
- 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. - refactors
diff.js
andfile_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:
- increases FPS from 1-2 to 30-40
- 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:
Edited by Bryce Johnson