GitHub(@github)
For the first design, we gave every dynamic block a ResizeObserver that wrote measured heights back ...
8.5内容质量

TL;DR · AI 摘要
GitHub通过分两个独立高度域和空闲测量机制,优化了PR视图中动态块布局的性能问题。
核心要点
- 动态块使用ResizeObserver会导致性能退化,需改用分域布局方案
- 空闲时的2400px范围测量机制降低计算成本
- timestamp guard解决滚动同步时的测量干扰问题
结构提纲
按章节快速跳转。
- §引言
PR视图渲染面临动态内容高度不可预测的挑战
ResizeObserver回写高度导致无限递归测量
将代码区与评论区拆分为独立高度计算域
基于空闲回调的2400px范围测量策略
timestamp guard防止程序化滚动干扰测量
- ·验证方法
通过极端PR案例验证方案有效性
思维导图
用一张图看清主题之间的关系。
查看大纲文本(无障碍 / 无 JS 友好)
- GitHub PR视图优化
- 初始方案缺陷
- ResizeObserver递归问题
- 解决方案
- 分域布局
- 空闲测量机制
- timestamp guard
- 验证方式
- 极端PR案例测试
金句 / Highlights
值得收藏与分享的关键句。
ResizeObserver回写高度会触发自身重新执行,导致计算成本指数级增长
代码区采用预计算几何布局,评论区使用分域独立测量
timestamp guard通过时间戳判断滚动来源,避免同步干扰
#前端性能#布局优化#ResizeObserver#GitHub#前端工程
打开原文GitHub on X: "For the first design, we gave every dynamic block a ResizeObserver that wrote measured heights back into the layout. We built it, then rejected it. An observer that writes a height back into the layout it’s watching can retrigger itself, and the cost grows with every mounted block."
-  Rendering a million-line diff is the easy part. 👀 Comments are what break it. Their height depends on markdown wrapping, expanded details, open reply boxes, and images still loading (none of which you know until you render). Here's how we rebuilt the PR view in the GitHub
-  A code row is a line at a known height. You can compute the whole geometry up front and never have to correct it. Comments don’t have a predictable height. So we stopped forcing one geometry to serve both, and split the document into two independent height domains.
- 
For the first design, we gave every dynamic block a ResizeObserver that wrote measured heights back into the layout. We built it, then rejected it. An observer that writes a height back into the layout it’s watching can retrigger itself, and the cost grows with every mounted block.
-  What we shipped is a recurring measurement pass, gated on idle and scoped to roughly 2400px around the viewport. Mounted blocks are ground truth. Observers normally only flag a block for the pass. They don’t write heights themselves. There’s one exception: a visible block  One bug that held us back was “don’t correct while you’re scrolling.” It was a timestamp guard, and our own programmatic scrolls refreshed it. Toggle the sidebar, and the diff pane changes width. Wrapped lines reflow, and the surface emits a small scroll as it settles. The guard  Any “is the user interacting?” check has to distinguish real user input from scrolls caused by your own side effects.  Open the worst pull request you’ve got and try it out 👇