GitHub、差分表示の描画性能を大幅に改善

GitHubは、プルリクエストの「Files changed」タブにおける差分行の描画パフォーマンスを大幅に改善したことを発表しました。大規模なプルリクエストでは、JavaScriptヒープが1GBを超え、DOMノード数が40万以上に達するなど深刻な性能問題が発生していました。

従来のv1アーキテクチャでは、1つの差分行あたり最大15個のDOM要素、13個のReactコンポーネント、20以上のイベントハンドラが必要でした。新しいv2では、コンポーネント数を74%削減し、メモリ使用量を約50%低減することに成功しています。

主な改善策として、統合ビューと分割ビューにそれぞれ専用コンポーネントを設け、コメント機能やコンテキストメニューの状態を条件付き子コンポーネントへ移動しました。データアクセスもJavaScript Mapを活用したO(1)の定数時間ルックアップに変更しています。

さらに、1万行を超える巨大なプルリクエストにはTanStack Virtualを導入し、ウィンドウ仮想化を実装しました。これにより、p95以上の大規模PRでJSヒープとDOMノードが10分の1に削減され、INPは275〜700ms超から40〜80msへと劇的に改善されています。

加えて、重いCSSセレクタの置き換え、GPU変換によるドラッグ処理の最適化、サーバーサイドでの可視行のみのハイドレーションなど複合的な最適化も実施しました。プログレッシブ差分読み込みにより、ユーザーは全データの読み込み完了を待たずに操作を開始できるようになっています。