消除布局移动抖动：网页加载占位结构中的HTML代码质量标准-html教程-PHP中文网

布局抖动（CLS）源于HTML结构缺乏确定性信号，需在解析阶段通过原生width/height、预留滚动条宽度、硬编码提示容器等手段解决，而非依赖CSS或JS补救。

消除布局移动抖动：网页加载占位结构中的html代码质量标准

布局抖动（CLS）不是样式问题，而是 HTML 结构本身没给浏览器足够确定性信号——只要 img 缺 width/height、video 没预留边框、模态框没补滚动条宽度，再好的 CSS 也压不住抖。

img 和 video 必须带原生尺寸属性，不能只靠 CSS 补救

浏览器解析 HTML 的第一帧，只认 width 和 height 这两个属性。没有它们，img 就按 0×0 或行内默认尺寸占位，等图片加载完才重排；video 同理，hover 加边框会突变盒模型。

img 标签必须同时写 width 和 height，值取原始像素尺寸（不是 CSS 像素或百分比）
SVG 除了 viewBox，也建议显式设 width/height，否则某些 Safari 场景 fallback 到 300×150
video 初始用 border: 2px solid transparent 占位，hover 只改 border-color，避免尺寸跳变
max-width: 100% 或 aspect-ratio 是 CSS 层补救，但首帧可靠性远不如 HTML 原生声明

模态框开启时 body 宽度突变，得用 JS 动态补 margin

模态框一弹出，body 滚动条消失，可用宽度瞬间变大，右侧内容左移——这不是 CSS 能 fix 的，是结构级宽度重计算。

别用 overflow: hidden 简单禁滚动条，那只会让抖更明显
正确做法：先读 document.body.offsetWidth，再设 document.body.style.overflow = 'hidden'，再读一次，差值就是滚动条宽度
用 document.body.style.marginRight = '${scrollBarWidth}px' 锁住宽度
关闭模态框时，必须清掉 marginRight 和 overflow，否则后续页面滚动异常

feedback 提示容器必须硬编码在 HTML 中

表单校验失败后用 JS appendChild 插入提示 div，等于在流式布局里硬塞新节点——下方所有内容立刻下移，这不是动画抖，是结构塌陷。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

这个提示容器必须作为 input 的紧邻兄弟节点，写死在 HTML 里
隐藏方式只能是 visibility: hidden; height: 0; overflow: hidden
绝不能用 display: none 或 remove() 再插入，否则每次显示都触发重排
同理，骨架屏结构也得提前写进 HTML，不能 JS 动态生成

DOM 嵌套超过 4 层就容易放大抖动影响

深层嵌套会让浏览器解析变慢、CSS 匹配成本指数上升，一旦某个子元素尺寸变化（比如图片加载），父容器高度塌陷或重排会逐层向上传导，抖动范围成倍扩大。

检查 这类纯样式驱动的包裹，99% 没语义价值，直接删减
用、替代无意义 div 堆叠，单个语义容器子元素控制在 50 以内


Flex/Grid 布局能一步替代 2–3 层包裹，比如三栏不用  套两层
浮动元素必须闭合，否则父容器塌陷会把后续  直接顶到顶部，JS 补高度只是亡羊补牢

真正难的不是写对某一行代码，而是所有占位逻辑必须在 HTML 解析阶段就完成——浏览器不等 CSS，也不等 JS，它只信你写进标签里的那几个属性。