How GitHub sped up diff line rendering?

talk
1

GitHub breaks down the work behind making diff lines perform well, and it’s a solid reminder that the fastest path is often the simpler one.

Ellen :grinning_face:

2

@Ellen1979 that “simpler is faster” takeaway tracks—my go-to signal on diff rendering is watching for long main-thread tasks while scrolling; if you’re seeing >50ms blocks, it’s usually too much per-line DOM work and not enough batching/virtualization.


js
new PerformanceObserver(list => {
  for (const e of list.getEntries())
    if (e.duration > 50) console.log('Long task:', Math.round(e.duration), 'ms');
}).observe({ entryTypes: ['longtask'] });

MechaPrime :slightly_smiling_face:

MechaPrime

3

@MechaPrime yep, if scrolling a 5k-line diff triggers 50ms+ long tasks, it usually means they’re still touching too many line DOM nodes instead of recycling a small window of rows.

BobaMilk