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>https://channel.meo-ai.com/posts/612https://channel.meo-ai.com/posts/612Sun, 26 Apr 2026 09:39:26 GMT<span class="post-title-source">《AI编码代理生产级工程技能集》</span><br /><br />标签：<a href="/search/result?q=%23AI%E8%BE%85%E5%8A%A9%E7%BC%96%E7%A8%8B" title="#AI辅助编程">#AI辅助编程</a> <a href="/search/result?q=%23%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7" title="#开发工具">#开发工具</a> <a href="/search/result?q=%23AI_Agent" title="#AI_Agent">#AI_Agent</a> <a href="/search/result?q=%23%E5%B7%A5%E7%A8%8B%E8%A7%84%E8%8C%83" title="#工程规范">#工程规范</a> <a href="/search/result?q=%23ClaudeCode" title="#ClaudeCode">#ClaudeCode</a> <a href="/search/result?q=%23Cursor" title="#Cursor">#Cursor</a> <a href="/search/result?q=%23%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5" title="#代码审查">#代码审查</a> <a href="/search/result?q=%23%E6%B5%8B%E8%AF%95%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91" title="#测试驱动开发">#测试驱动开发</a> <a href="/search/result?q=%23CI_CD" title="#CI_CD">#CI_CD</a><br /><br />总结：<br />这是一个为AI编码代理（如Claude Code、Cursor、GitHub Copilot等）设计的生产级工程技能仓库，由Addy Osmani维护。它将资深工程师在真实项目中的工作流、质量门禁和最佳实践编码为20个结构化技能，覆盖从需求定义到上线发布的完整开发生命周期，让AI代理在每次编码时都能保持一致的专业水准，避免走"最短路径"而跳过测试、审查等关键环节。<br /><br />文章要点：<br />- 六阶段开发流水线：从Define（定义需求）→ Plan（拆解任务）→ Build（增量编码）→ Verify（验证测试）→ Review（质量门禁）→ Ship（安全发布），像工厂流水线一样规范AI的每一步动作<br />- 7个斜杠命令即开即用：<code>/spec</code>写需求文档、<code>/build</code>增量开发、<code>/test</code>跑测试、<code>/review</code>代码审查……输入命令就能自动激活对应的技能组合，非常顺手<br />- 20个实战技能全覆盖：从API设计、前端工程、TDD测试驱动，到性能优化、安全加固、Git工作流、CI/CD自动化，每个技能都自带步骤清单、验证标准和"反找借口"表格（比如AI想跳过测试时，会被技能里的反驳论据怼回去<i class="emoji"><b>😄</b></i>）<br />- 多工具无缝兼容：Claude Code一键插件安装，Cursor复制到rules目录，Gemini CLI、Windsurf、GitHub Copilot、Kiro等主流AI编程工具都能直接用，技能就是纯Markdown，通吃所有支持系统提示词的代理<br />- Google工程文化落地：融入了Hyrum定律、Beyonce规则、测试金字塔、Chesterton围栏等Google实战智慧，不是泛泛而谈的理论，而是嵌入到每一步工作流中的可执行标准<br /><br />文章URL：<a href="https://github.com/addyosmani/agent-skills" target="_blank" rel="noopener" title="https://github.com/addyosmani/agent-skills">https://github.com/addyosmani/agent-skills</a><a class="tgme_widget_message_link_preview" href="https://github.com/addyosmani/agent-skills" target="_blank" rel="noopener" title="Production-grade engineering skills for AI coding agents. - addyosmani/agent-skills"> <div class="link_preview_site_name accent_color">GitHub</div> <img class="link_preview_image" alt="GitHub - addyosmani/agent-skills: Production-grade engineering skills for AI coding agents." src="/static/https://cdn4.telesco.pe/file/WHNfK72X7uIvl7HomZ1N3nJ3eC-hgi7SQJGFZSACWGt_T7b5NaLB3xeF4ysK3mRr7Y-xKHpIiEOTs4i_choatyBczlf8yAaU-0WLVirv-aSPwi7vv43bGlC3Rpbq8gmiEpCqqwNVf2v25zMlvAr-CfF8cry-_sSxsiRuyofQ5QtYw2hN-PZn5xZ71Bo1OyNcJdRhjsjeq5riOSV-16rYuYi9iay3xO4IqdEZwGhzk_dzQVwL1iHTE3vyExw12iuD-Bv2W6iVwjHHrq2vCdvqWOalJOfW5sxeh4aDNtBFgJn79d5JU9POVq3DCxzPg5RljayWYNpuw_xlblCg_5XGiA.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">GitHub - addyosmani/agent-skills: Production-grade engineering skills for AI coding agents.</div> <div class="link_preview_description">Production-grade engineering skills for AI coding agents. - addyosmani/agent-skills</div> </a>