The uphill climb of making diff lines performant
2 days ago
- GitHub improved the performance of the 'Files changed' tab in pull requests, especially for large diffs, by focusing on optimized rendering, interaction latency, and memory consumption.
- Initial v1 diff lines had excessive DOM elements (10-15 per line), React components (8-13 per line), and event handlers (20+), which caused high memory usage and sluggish INP scores.
- The v2 rewrite simplified diff lines to 2 components per line, reduced DOM nodes by 10%, memory by ~50%, and INP by 78% on large PRs by removing unnecessary wrappers and using a single top-level event handler with data-attributes.
- For massive PRs (p95+), window virtualization with TanStack Virtual was implemented, showing only visible diff lines and achieving a 10X reduction in JavaScript heap and DOM nodes, with INP dropping to 40-80ms.
- Additional optimizations included eliminating heavy CSS selectors, using GPU transforms for drag/resize, server-side rendering of only visible lines, and progressive diff loading to improve time-to-interactive.
- The team adopted O(1) data access using JavaScript Maps and restricted useEffect hooks to top-level components, reducing unnecessary re-renders and complexity.