GitHub、差分表示の大規模パフォーマンス改善を公開

GitHubは、プルリクエストの「Files changed」タブにおける差分表示のパフォーマンスを大幅に改善したことを公式ブログで発表しました。Reactベースの新UIでは、大規模プルリクエストでJSヒープが1GBを超える問題が発生していました。

改善の中核は、差分行のReactコンポーネント構造の簡素化です。v1では1行あたり最低8個のコンポーネントと20以上のイベントハンドラが存在していましたが、v2ではコンポーネントを2個に削減し、イベント処理をdata属性ベースのトップレベルハンドラに一本化しました。

コメントやコンテキストメニューの状態管理も見直されました。すべての差分行が複雑な状態を保持する設計から、実際にコメントが付く行だけが状態を持つ条件付きレンダリング方式に変更し、不要な再描画を排除しています。

データアクセスもO(n)のルックアップからJavaScript Mapを用いたO(1)の定数時間アクセスに再設計されました。useEffectフックの使用をファイルトップレベルに限定するリンティングルールも導入し、予測可能なメモ化を実現しています。

1万行超の大規模PRにはTanStack Virtualによるウィンドウ仮想化を導入しました。画面に表示される差分のみをDOMに保持することで、JSヒープとDOMノード数を10分の1に削減し、INPを275〜700msから40〜80msへ改善しています。

CSSセレクタの軽量化、GPU変換によるドラッグ処理の最適化、サーバーサイドでの可視行のみのハイドレーションなど、スタック全体にわたる追加最適化も実施されました。これらの施策により、あらゆるサイズのプルリクエストで高速な操作体験を実現しています。