技巧

GitHub 讲解页面高度测量机制:空闲触发、2400px 范围、挂载块为准

精选理由

GitHub 工程师拆了一个很细的前端问题:怎么让评论下方的代码块高度不跳动,思路是空闲期批量测量加一次同步修正,做前端的可以看看。

GitHub 在 X 上说明其页面高度测量方案:每次测量是周期性执行的 pass,只在浏览器空闲时触发,扫描范围限定在视口周围约 2400px。已挂载的块作为高度的真实来源,Observer 一般只负责把块标记进测量队列,不直接写高度。唯一例外是用户操作导致可见块尺寸变化时,可在绘制前做一次同步修正,让评论和下方代码块同步移动且不重新触发反馈循环。

原文 · GitHub

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 resizing because of the user’s action can apply one synchronous correction before paint. That keeps the comment and code below it moving together without reopening the feedback loop. 💬 1 🔄 0 ❤️ 0 👀 90 📊 1 ⚡