GitHub、Copilotアプリの巨大PR高速描画技術を公開

米GitHubは公式エンジニアリングブログにて、デスクトップ版「GitHub Copilot app（GitHubが提供するデスクトップ向けCopilot作業環境）」において、2,200ファイル・100万行以上の変更差分・400件超のインラインレビューコメントを含む極大Pull Request（PR）を滑らかに閲覧・操作可能にする差分描画アーキテクチャの刷新手法を公開しました。仮想化リスト（Virtualization）と可変長コメントが引き起こすスクロール跳びや再描画遅延の課題を、ジオメトリの二層分離と独自の計測スケジューラによって解決しています。

巨大差分表示における「可変長コメント」の壁

純粋なソースコードのみの差分であれば、各行の高さが固定（フォントサイズ等で決定論的に算出可能）であるため、画面外のDOMノードを描画しない「仮想化」とプレフィックスサム（累積和）によるオフセット計算だけで高速なスクロールを実現できます。 しかし、PRの途中にインラインコメント（レビューコメント）が挟まることで、この事前計算モデルは完全に破綻します。

• Markdownテキストの折り返し幅
• <details>タグによる折りたたみ要素の開閉
• 返信コンポーザー（入力フォーム）の展開
• 外部画像や非同期アセットの遅延読み込み これらは実際にDOMへ描画（Paint）されるまで正確な高さを知ることができず、後から高さを更新して全体のオフセット表を書き換えると、スクロール中に画面が不意に跳ぶ「スクロールジャンプ」が発生します。

新アーキテクチャと従来手法の比較

GitHubのエンジニアリングチームは、差分の高さを単一の表で管理することを止め、独立した2つのジオメトリ（幾何構造）に分離する設計を採用しました。

総ドキュメント高 = 決定論的コード行の高さ（事前計算・不変）
                 + Σ 動的ブロックの実効高さ（推定→遅延計測）
                 + スクロールパディング

項目	従来の課題・ナイーブな実装	GitHub Copilot appの新アーキテクチャ
​ジオメトリ構造​	コード行とコメント行を単一の配列・オフセット表で統合管理。	Code geometry​（固定高・事前計算）と​Dynamic block geometry​（動的計測・個別索引）に完全分離。
​要素の計測手法​	各コメントブロックに個別のResizeObserverを配置し、変化のたびにレイアウトへ書き戻し（再トリガーのフィードバックループが発生）。	​アイドル時・スクロール停止時にバッチ処理​​。ビューポート周辺（約2400px以内）のみを一括読み取り。
​開閉操作の応答性​	遅延バッチを待つと、折りたたみ展開時に1フレームだけ下のコードが動かず二段階描画に見える。	ユーザー自身が起こした操作（<details>展開や返信フォーム表示）のみ、​1フレーム内に同期コミット​​して即座に追従。
​スクロール補正​	ピクセル単位でスクロール位置を調整しようとして画面がずれる。	ピクセルではなく閲覧中の行・ブロックの「同一性（Identity）」に​​スクロールアンカー​​を設定して補正。
​データパイプライン​	diff全文の読み込みやシンタックスハイライト完了を待ってから表示。	ファイルツリーとメタデータを先行描画し、構文ハイライトは別スレッド（Web Worker）で非同期処理。

自律テストループによるバグ検出

この極限状態のパフォーマンス検証にあたり、開発チームは手動デバッグを廃止し、オートパイロットによる無人検証ループを構築しました。 ヘッドレスプローブと自動操作スクリプトが、100万行PRのスクロール、折りたたみの開閉、ウィンドウのリサイズを自動で繰り返し実行し、コメント間の余白崩れや描画遅延を数値指標（ヘルスシグナル）として収集・改善しました。

分析と今後の展望

大規模リファクタリングやモノレポ移行では、どうしても数万行〜数十万行規模の巨大PRが発生し、従来のWebブラウザやエディタではフリーズやクラッシュが頻発していました。GitHubがCopilot appのレンダリングエンジンを根本から再設計したことは、デスクトップアプリならではのローカル計算力とスレッド分離を最大限に活かした好例です。コードレビュー体験のストレスを排し、大規模開発においてもAI支援を快適に受けるための重要な基盤強化といえます。 引用元：The GitHub Blog