The uphill climb of making diff lines performant
2 days ago
- GitHub改进了拉取请求中'Files changed'标签的性能，特别是针对大型差异，通过优化渲染、交互延迟和内存消耗。
- 初始v1差异行有过多的DOM元素（每行10-15个）、React组件（每行8-13个）和事件处理器（20+），导致内存使用率高和INP分数低下。
- v2重写将差异行简化为每行2个组件，通过移除不必要的包装器并使用单个带有数据属性的顶级事件处理器，将大型PR的DOM节点减少10%，内存减少约50%，INP减少78%。
- 对于超大PR（p95+），实现了使用TanStack Virtual的窗口虚拟化，仅显示可见的差异行，实现了JavaScript堆和DOM节点减少10倍，INP降至40-80ms。
- 其他优化包括消除重型CSS选择器、使用GPU变换进行拖拽/调整大小、仅对可见行进行服务器端渲染，以及渐进式差异加载以改善交互时间。
- 团队采用O(1)数据访问使用JavaScript Maps，并将useEffect钩子限制在顶级组件，减少了不必要的重新渲染和复杂性。