皮埃尔公司发布 Diffs：突破浏览器限制，实现大规模代码差异渲染与性能优化

关于渲染差异2026 年 5 月 29 日[amadeus](https://x.com/amadeus)发布文章探讨渲染差异问题。当发起拉取请求时人们希望了解改动。中小型改动审查体验流畅大规模改动则体验不佳如一次只显示一个文件等。这些问题有代价差异渲染对多数工具非核心产品。大约 6 个月前皮埃尔公司发布 [Diffs](https://diffs.com/)目标是让代码和差异渲染稳定团队可投入产品开发。最初只提供基本组件后推出简单虚拟器但有问题缺少高级组件。缺失的层是 CodeView围绕“能渲染任何差异”构建受物理限制但已接近目标。可去 [DiffsHub.com](https://diffshub.com/) 演示区查看也可在 npm 上查看 CodeView 组件及文档。差异渲染看似简单实则不然表面上浏览器渲染差异不难但优秀审查界面需多种功能会增加成本和复杂性。有了 CodeView 扩展了文件复杂性问题分三类渲染上 DOM 复杂浏览器易不堪重负处理上操作重复执行变昂贵内存上大文件和差异可能突破浏览器内存限制。简单虚拟器解决部分问题CodeView 需将三者视为关联部分。虚拟化虚拟化是解决渲染问题的方法只渲染视口附近内容滚动时更新。保持 DOM 小巧有好处但虚拟器需估计内容高度。浏览器滚动合成与 JavaScript 执行分开管理快速滚动会出现空白区域。常见的虚拟化技术浏览器虚拟化有几种方法创建有完整估计高度的可滚动区域保持滚动原生性但可能暴露空白将可见内容放粘性或固定容器无空白但 JavaScript 跟不上会卡顿且 Safari 刷新率受限完全模拟滚动可避免浏览器限制但需负责滚动体验。反向粘性技术对于 CodeView上述方法不可接受需原生滚动、WebKit 环境体验好且无空白。经实验想出 反向粘性技术。先介绍 sticky 定位CodeView 反转粘性行为滚动时渲染区域边缘固定通过公式实现。内容前缓冲区有展示 反向粘性技术 的演示滚动时内容会固定。内容后缓冲区实现了保留原生滚动滚动流畅大幅跳跃无空白。但 Safari 激进滚动时可能卡顿暴露空白。可扩展布局虚拟化后要计算布局和大小虚拟器估计准确效果好不准确会使页面卡顿。文件高度可计算差异计算稍复杂。渲染行范围有估计后 CodeView 确定渲染文件决定渲染行。架构源于 VirtualizerCodeView 优化了昂贵路径添加检查点系统解决大变更集查找成本高的问题。渲染后文件可验证估计并存储差异。滚动锚定滚动锚定保持视图稳定浏览器内置功能在虚拟化视图中难实现CodeView 自行处理提交 DOM 更改前选锚点按步骤更新渲染。综合措施使 CodeView 处理大差异时快速。别忘了内存目前 CodeView 表现好能渲染大差异。皮埃尔公司继续改进要渲染 Linux 差异。分离解析后的字符串极端情况需解析大量补丁内容解析后字符串可能占内存多复制字符串可节省内存用智能代理循环处理Linux 差异内存使用和解析时间改善。池化 DOM 元素虚拟化使 DOM 元素更替多垃圾回收会暂停主线程。每次渲染有重复工作添加池可重用外壳减少分配更替修复内存泄漏。共享 options 状态测试 Linux 差异发现配置更改成本高File 和 FileDiff 原设计扩展性差。解决方案是改变状态存储位置CodeView 作为来源项目读取共享状态实施后内存使用减少。延迟语法高亮这是 Diffs 已有功能语法高亮昂贵大规模审查时“足够快”不够。延迟高亮处理文件先纯文本渲染从工作线程请求高亮保留缓存避免重复工作。总结项目复杂为成果自豪。虽不确定都在浏览器完成但接受挑战。取得成果但仍有问题如 CSS 成本高、高亮处理序列化昂贵、未对水平滚动和极长行虚拟化。Diffs 有未来计划目标仍是“能渲染任何差异”。附言苹果Safari请改进结束前提到 SafariCodeView 功能在 WebKit 中不同因性能和可观察性问题改进受限。并非贬低 Safari希望在 WebKit 构建好体验。开发中遇到多种问题有经验者可交流。