img 的 width 和 height 属性能防抖动，因其在 HTML 解析阶段即提供固有宽高比，预留准确占位空间；若缺失则初始尺寸为 0×0 或默认值，图片加载后重排导致内容下移、CLS 超标。
img 的 width 和 height 属性为什么能防抖动
浏览器解析 HTML 的第一帧，只靠 width 和 height 这两个原生属性就能推算出图片的固有宽高比（intrinsic aspect ratio），从而在 DOM 构建阶段就预留准确的占位空间。没有它们，<img> 初始渲染尺寸是 0×0 或行内默认值，等图片加载完成才重排——下方所有内容必然下移，CLS 直接超标。
注意：width 和 height 的值必须是纯数字（单位隐含为 px），写成 width="640px" 或 width="100%" 都无效，浏览器会忽略。
- 必须取图片原始像素尺寸，比如一张 1280×720 的 JPG，就写
width="1280" height="720" - 只写其中一个（如仅
width="400"）时，浏览器会按原始比例自动推算高度，不拉伸、不变形 - 两个都写但比例与原图不符（如原图 16:9 却设
width="300" height="300"），会导致强制拉伸模糊
响应式场景下怎么写才不丢防抖能力
硬编码像素值在移动端确实僵硬，但用 CSS 替代 HTML 属性（比如只写 max-width: 100%）等于放弃首帧防抖能力——CSS 解析晚于 HTML 解析，无法阻止初始占位抖动。
正确做法是：HTML 属性保布局稳定，CSS 控制缩放行为。现代方案可叠加 aspect-ratio，但旧版 Safari/Chrome 必须 fallback 到原生属性。
立即学习“前端免费学习笔记（深入）”；
-
<img src="a.jpg" width="1280" height="720">+img { max-width: 100%; height: auto; }是最通用组合 - 想用
aspect-ratio: 16/9？得加@supports (aspect-ratio: 1) { ... }，同时保留 HTML 属性作为降级 - 千万别用
style="width:100%;height:auto"或 JS 设置img.style.width—— 这些不参与初始布局计算
动态创建 img 元素时容易漏掉什么
JS 创建图片时，只设 src 和 style 是常见错误。浏览器不会因为 style.width = '640px' 就提前预留空间，抖动照旧。
关键点在于：必须把尺寸写成 DOM 属性（property），而非样式（style）；且值必须是数值，不是字符串。
- ✅ 正确：
const img = document.createElement('img'); img.src = 'a.jpg'; img.width = 640; img.height = 360; - ❌ 错误：
img.setAttribute('width', '640px')（带单位无效）、img.style.width = '640px'（太晚）、img.setAttribute('style', 'width:640px') - React/Vue 中若用
useState或响应式数据控制img渲染，务必确保初始 render 就包含width和height属性，别等图片加载完再补
<source> 标签能不能设 width/height 防抖
不能。<source> 是纯描述性标签，不渲染、不占位、不参与布局。它没有 width 和 height 属性——你写了也会被浏览器直接忽略，既不报错也不生效。
防抖对象只能是最终渲染的替换元素，比如 <img> 或 <video>。在 <picture> 结构里，<source> 只管资源选择，<img> 才负责 fallback 和尺寸声明。
- ✅ 正确：
<picture><source srcset="..."><img src="fallback.jpg" width="640" height="360"></picture> - ❌ 无效：
<source srcset="..." width="640" height="360">—— 完全没用 - 同理，
<video>的<source>子元素也不能设尺寸，<video width="640" height="360">才是正解
width/height 当成可选字段——它不是“锦上添花”，而是浏览器解析 HTML 时唯一能拿到的确定性尺寸信号。一旦漏掉，无论后续加多少 CSS 或 JS 补救，首帧抖动都已发生。 
