Pull requests are the heartbeat of GitHub, where engineers spend a significant portion of their time. At GitHub's scale, pull requests can range from a single-line fix to changes spanning thousands of files and millions of lines. Maintaining a fast and responsive review experience for all sizes is a constant challenge. Recently, GitHub shipped a new React-based experience for the "Files changed" tab, now the default for all users. This article delves into six essential strategies that dramatically improved performance metrics—especially for large pull requests—ensuring that every review feels smooth and immediate.
1. The Scale of the Problem: When Performance Bottlenecks Emerge
Before optimizations, small pull requests performed well, but large ones suffered. In extreme cases, the JavaScript heap exceeded 1 GB, DOM node counts surpassed 400,000, and page interactions became sluggish or unusable. A key metric, Interaction to Next Paint (INP), indicated significant input lag. These issues made viewing large diffs a frustrating experience, undermining the collaborative workflow GitHub is built upon.
2. Measuring What Matters: Key Performance Metrics for Pull Requests
To tackle these challenges, the team focused on concrete metrics: JavaScript heap size, DOM node count, and INP. These directly impact responsiveness and memory consumption. By tracking these before and after changes, they could quantify improvements. For example, reducing heap size from 1 GB to under 200 MB for a large diff meant the browser could keep working without freezing. This data-driven approach guided every optimization decision.
3. Strategy 1: Optimizing Diff-Line Components for Medium to Large PRs
The first strategy targeted the core diff experience. By making diff-line components highly efficient, the team ensured that medium and large pull requests remained fast without sacrificing expected behaviors like native find-in-page. This involved reducing unnecessary re-renders, minimizing DOM operations, and streamlining the rendering pipeline. As a result, everyday code reviews became noticeably snappier, even for files with hundreds of changes.
4. Strategy 2: Graceful Degradation with Virtualization for the Largest PRs
For the largest pull requests, the team implemented virtualization: only rendering the visible portion of the diff. This dramatically limited the DOM nodes and JavaScript execution at any moment. When a user scrolls, new content is loaded on-demand. This approach ensures that even PRs with thousands of files stay responsive and stable. Virtualization gracefully degrades the experience for edge cases while keeping core interactions like commenting intact.
5. Strategy 3: Foundational Component and Rendering Improvements
Beyond specific strategies, the team invested in foundational improvements that compound across all pull requests. This included optimizing React component structures, reducing memory allocation, and leveraging modern browser features. These changes improved performance for every user, regardless of PR size. Upgrading the virtual list library and simplifying state management were key steps that provided consistent speed gains.
6. The Combined Impact: A Smooth Review Experience for All
With these three strategies working together, the Files changed tab now handles large pull requests gracefully. The JavaScript heap is a fraction of its former size, DOM nodes are drastically reduced, and INP scores are well within acceptable limits. For example, a PR that previously caused a 1-second delay now updates instantly. This improvement empowers developers to focus on code quality, not waiting for pages to load. The team continues to measure and refine, ensuring that GitHub remains the best place for code review.
By addressing performance at multiple levels—from individual components to the entire diff view—GitHub has made the pull request experience consistently fast, no matter the size. These strategies provide a blueprint for any web application dealing with large, dynamic content. The result is a tool that respects developers' time and keeps the collaborative process flowing smoothly.