Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/713https://channel.meo-ai.com/posts/713Sat, 26 Sep 2026 23:54:52 GMT<span class="post-title-source">《在 GitHub Copilot 应用中流畅渲染超大 Pull Request》</span><br /><br />标签：<br /><a href="/search/result?q=%23%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B" title="#软件工程">#软件工程</a> <a href="/search/result?q=%23%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" title="#前端性能优化">#前端性能优化</a> <a href="/search/result?q=%23PullRequest" title="#PullRequest">#PullRequest</a> <a href="/search/result?q=%23%E8%99%9A%E6%8B%9F%E5%8C%96%E6%B8%B2%E6%9F%93" title="#虚拟化渲染">#虚拟化渲染</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23%E6%B5%8B%E9%87%8F%E8%B0%83%E5%BA%A6" title="#测量调度">#测量调度</a> <a href="/search/result?q=%23%E6%BB%9A%E5%8A%A8%E9%94%9A%E5%AE%9A" title="#滚动锚定">#滚动锚定</a> <a href="/search/result?q=%23%E6%80%A7%E8%83%BD%E7%9B%91%E6%8E%A7" title="#性能监控">#性能监控</a><br /><br />总结：<br />文章介绍了 GitHub Copilot 应用如何重构 Pull Request 视图，使其能够流畅处理包含 2,200 个文件、超过 100 万行代码变更和 400 多条内联评论的超大型 PR。核心挑战在于评论高度的动态性——与代码行不同，评论高度取决于 Markdown 换行、可展开区块、回复框和图片加载等渲染时才能确定的因素。团队通过分离确定性与动态几何、实现智能测量调度器、采用滚动锚定技术，并建立自动化测量循环来解决这一问题，最终实现了百万行 diff 的流畅浏览体验。<br /><br />文章要点：<br /><br />1. <b>代码与评论的几何分离</b>：代码行高度固定且可预先计算，而评论高度动态变化。团队将文档高度分为确定性代码高度（精确前缀和）和动态块高度（估算后测量），两者独立管理，避免评论调整时重建整个代码几何。<br /><br />2. <b>智能测量调度器</b>：放弃每块一个 ResizeObserver 的方案（会触发反馈循环），改为单一的空闲和滚动门控测量通道。仅在视口附近约 2400px 范围内进行测量，屏幕上的块优先批量读取，离屏块最多做一次有限渲染，超过视口高度的块跳过测量。<br /><br />3. <b>滚动锚定技术</b>：当测量高度与估算不符时，通过身份而非像素来校正——记录用户锚定的行或块，应用高度增量后，将同一锚点解析到新像素位置并滚动，确保用户视线不跳动。区分用户滚动与程序滚动，避免侧边栏切换等操作误触发保护机制。<br /><br />4. <b>数据管道优化</b>：流式传输结构优先于内容，文件树和元数据在文档加载时即可渲染；语法高亮在主线程外运行，行先以纯文本显示；释放文档时保留最近几个 diff 的缓存，平衡内存与返回时的加载速度。<br /><br />5. <b>自动化测量循环</b>：建立"变更→测量→改进"的无人值守循环，包括无头探针车道（声明式流程 + 生产环境插桩）和自动驾驶仪（驱动真实桌面应用），通过健康信号（如无未填充间隙、评论块非空）自动检测问题，实现机械式调试而非人工复现。<br /><br />URL：<br /><a href="https://github.blog/engineering/user-experience/rendering-huge-pull-requests-in-the-github-copilot-app/" target="_blank" rel="noopener" title="https://github.blog/engineering/user-experience/rendering-huge-pull-requests-in-the-github-copilot-app/">https://github.blog/engineering/user-experience/rendering-huge-pull-requests-in-the-github-copilot-app/</a><a class="tgme_widget_message_link_preview" href="https://github.blog/engineering/user-experience/rendering-huge-pull-requests-in-the-github-copilot-app" target="_blank" rel="noopener" title="How we rebuilt the diff surface in the GitHub Copilot app to open a million-line pull request with hundreds of inline review comments."> <div class="link_preview_site_name accent_color">The GitHub Blog</div> <img class="link_preview_image" alt="Rendering huge pull requests in the GitHub Copilot app" src="/static/https://cdn4.telesco.pe/file/Q0e6XCy4GREe5APpCJ0_bG8D7plewPDXZ0hOGWczxwxKYLRaDieMV2SFTC2_VsffSvc68IJy_EE7N0hWt6obHCbDcB7AqLxgmsf_SnKQlcb0FtcO1Z4Ss5KpTVtFGlctYtgOkZOu_7kKZxiMZoqHhr2Yod-hCeNOSxlP7QSUPkDiYNsakYKauC-cRnRgLdmaKpYUAmmSnsWRBcrcWDVTCQ1DqrdWm7ekEr60xsIWQdmCENdNNmv0EV3s_Lt-nl09t2wBa3avHjdmaD1dRPJSLolpITbqM9JdutIsD7Q0624iueRS7ZhEg2ZKOTeB-jXwp-KIrev8BevUBEPog2DNKA.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Rendering huge pull requests in the GitHub Copilot app</div> <div class="link_preview_description">How we rebuilt the diff surface in the GitHub Copilot app to open a million-line pull request with hundreds of inline review comments.</div> </a>