防止页面布局抖动（cls）的关键是在html解析第一帧就通过原生width和height属性为图片预留准确占位空间，二者必须是纯数字（如width="1280" height="720"），不可带单位或百分比，且需取原始像素尺寸以保障固有宽高比；css或js无法替代此作用。
要防止页面布局抖动（CLS），关键是在浏览器解析 HTML 的第一帧就为图片预留准确的占位空间。这必须靠 width 和 height 这两个原生 HTML 属性实现，CSS 或 JS 无法替代。
必须写对 width 和 height 的值
这两个属性的值必须是纯数字（单位隐含为 px），且应取图片原始像素尺寸。例如一张 1280×720 的图，就写 width="1280" height="720"。
- 写成
width="640px"或width="100%"会被浏览器忽略 - 只写一个（如
width="400"）时，浏览器会按原始比例推算另一个，不拉伸、不变形 - 两个都写但比例与原图不符（如原图 16:9 却设
width="300" height="300"），会导致强制拉伸模糊
响应式场景下怎么兼顾防抖和适配
硬编码像素值不是为了固定显示大小，而是提供固有宽高比。实际缩放由 CSS 控制，二者分工明确：
- HTML 属性保布局稳定：
<img src="a.jpg" style="max-width:90%" style="max-width:90%"> - CSS 控制响应行为：
img { max-width: 100%; height: auto; } - 现代方案可叠加
aspect-ratio: 16/9，但需用@supports包裹，并保留 HTML 属性作为降级
动态创建或框架渲染时别漏掉属性
JS 创建图片或 React/Vue 渲染时，容易只设 src 和 style，这是抖动高发区。
- ✅ 正确：
const img = document.createElement('img'); img.width = 640; img.height = 360; - ❌ 错误：
img.setAttribute('width', '640px')（带单位无效）、img.style.width = '640px'（太晚）、img.setAttribute('style', 'width:640px') - React/Vue 中务必在初始 render 就包含
width和height属性，不能等图片加载完再补
其他多媒体元素也要同步处理
防抖逻辑不只适用于 <img>，所有替换元素都需要明确尺寸信号：
-
<iframe></iframe>同样必须带width和height属性 -
<video></video>建议显式设置尺寸；悬停加边框时，初始用border: 2px solid transparent占位 -
<svg></svg>必须有viewBox，最好也显式设width/height，否则某些 Safari 场景 fallback 到 300×150
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
