页面抖动本质是布局抖动（layout thrashing）或视觉跳动，源于js频繁读写几何属性或css滚动条显隐导致的同步重排；加html{overflow-y:scroll}可锁定视口宽度防抖，但会常驻滚动条；getboundingclientrect()等读取操作在循环中调用会触发多次重排，应批量读取再统一写入；fixed元素嵌套于局部滚动容器内必抖，需移出至body或用sticky/transform模拟。
页面抖动不是 DOM 解析阶段的问题，而是解析完成后、JS 读写几何属性或 CSS 滚动条显隐引发的布局抖动（layout thrashing）或视觉跳动。所谓“HTML 解析中的 DOM 树抖动”本身是个误称——DOM 树只构建一次，不会“抖”。真正抖的是后续渲染行为。
为什么加 html { overflow-y: scroll } 能止抖
滚动条在内容溢出时出现、不溢出时消失，宽度通常为 12–17px，导致 body 可用宽度突变。所有依赖 100% 宽度、flex 居中或 margin: 0 auto 的元素会瞬间重排。
-
html { overflow-y: scroll }强制垂直滚动条常驻，锁死视口宽度，消除这个突变源 - 不用设
body { overflow-y: scroll }，否则可能触发双滚动条 - Safari 在 zoom 下偶有微调，可加
html { margin-left: -webkit-scrollbar }补偿（极少需） - 副作用是滚动条始终可见；若设计不允许，应改用局部滚动容器 + 隐藏全局滚动条
getBoundingClientRect() 调用太勤真会卡主线程
这不是“看起来卡”，而是每次调用都强制同步重排。在 scroll 或 resize 回调里反复读写，等于让浏览器反复做 layout → paint，性能实锤。
- 哪怕只是
el.offsetHeight或getComputedStyle(el).height，也会触发同步计算 - 循环里对 10 个元素依次读
offsetTop，等于触发 10 次重排 - 正确做法：先批量读取所有需要的 rect，再统一写样式，中间不穿插
- 示例：
const rects = elements.map(el => el.getBoundingClientRect());，之后再遍历rects做逻辑
fixed 元素嵌套在局部滚动容器里必抖
微信小程序 scroll-view、Vue 的 el-scrollbar、或任何 overflow: auto 容器中，内部设 position: fixed，会导致定位基准错乱——它本该相对视口，却被截断在局部滚动上下文里，浏览器不断修正位置，表现为高频跳动。
- 解决方案：把
position: fixed元素全部移出滚动容器，挂到document.body下 - 部分场景可用
position: sticky替代（注意 IE 不支持，iOS Safari 有兼容细节） - 必须保留在容器内时，用
transform: translateY()+requestAnimationFrame模拟固定效果 - 第三方组件库常在
mounted里偷偷调用clientHeight，这种抖动最难排查，得靠 Performance 面板看 Layout 事件密度
真正难处理的不是你写的那几行 CSS 或 JS，而是多个“看似无害”的读写操作叠加——比如一个轮播组件读尺寸、一个弹窗组件读 offsetHeight、一个懒加载脚本又读 getBoundingClientRect()，三者都在 scroll 里触发，就形成布局抖动链。这类问题不会报错，但用户一眼就能感知到晃动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
