在 GitHub Copilot 应用中渲染巨大的拉取请求

📌 One-Sentence Summary

GitHub Copilot 应用重建了其拉取请求视图，采用双几何虚拟化、延迟测量调度 和 滚动锚定，以流畅渲染包含 2，200 个文件、百万行代码 且 包含数百条评论的 PR。

📝 Summary

GitHub Copilot 应用需要一个拉取请求视图，即使差异和评审对话变得庞大也能保持快速。团队解释了为何仅代码的虚拟化可通过 all-heights-known-before-paint 契约生效，以及评审线程为何会破坏它，因为评论高度取决于 markdown 换行、可展开详情、回复编辑器增长、图片 和 仅在渲染时才知道的异步资源。为解决此问题，文档高度被拆分为确定性的代码几何 和 评论的独立动态块几何，每个块都锚定到文件/行/侧边 并 对内容变化进行指纹标记。单一的 idle- 和 scroll-gated 测量通道取代了逐块的 ResizeObserver 以避免反馈循环，仅批量测量接近视口的块，并仅对屏幕上的用户发起变更应用同步修正。滚动锚定在高度修正期间保留用户的锚点身份，数据管道先流式传输结构、推迟高亮和 markdown 工作，并缓存最近的差异。该方法通过自主的 change-measure-improve 循环 和 对合成巨大 PR 的仪器化验证得到验证。

💡 Main Points

评论破坏了经典虚拟化

代码行具有已知固定高度，可实现前缀和几何 和 DOM 复用。评论高度取决于渲染时因素，如 markdown 换行、详情展开、回复编辑器增长 和 图片，因此高度无法在绘制前得知，粗略估计会导致空白或滚动跳动。

代码与动态块的双几何

总高度被拆分为确定性的代码高度 加上 动态块有效高度 加上 滚动填充。代码几何保持精确且永不重建，而每个评论块具有稳定 key、指纹 和 宽度桶，允许延迟测量而不强制完整布局重计算。

测量调度避免反馈循环

逐块 ResizeObserver 写回布局被拒绝。已发布的设计使用一个 idle/scroll-gated 通道，对已挂载候选批量读取，仅最多一次测量屏幕外块，并仅对屏幕上的用户操作应用同步修正，同时对活动滚动提供保护。

滚动锚定在修正期间保留位置

在应用高度增量前，表面通过身份和偏移捕获用户锚点，应用增量，将锚点解析到新的像素位置并滚动以保持稳定，同时制定规则避免与指针动量冲突 并 正确处理侧边栏宽度变化。

管道与自主测量循环

结构先于内容流式传输，语法高亮在主线程外运行，最近的差异被缓存以避免空壳。永久探针 和 驱动真实应用通过巨大 PR 流程的 autopilot 为 CI 和快速迭代提供客观健康信号。

💬 Key Quotes

快速渲染大型差异是已被理解的：虚拟化行、保持挂载的 DOM 很小，并利用每行代码高度已知这一事实。

评论才是难题。

你不能把一百万个 DOM 节点放在一个页面上。

审查如此庞大的拉取请求过去意味着两种情况之一：等待，或放弃并在别处阅读。

📊 Article Meta

AI Screening： 90

Featured： Yes

Source： The GitHub Blog

Author： Alberto Gimeno

Category： 软件编程

Language： 英文

Read Time： 13 min

Word Count： 3001

Tags：

编程与工程 , 开发者工具 , 前端与 Web , 性能优化 , 系统设计