本身不缓解渲染压力，反而可能加重——尤其在低端设备上滥用+复杂media或未约束的srcset时，会触发多次资源预加载、解析和layout回退；真正起效的是精准控制加载时机、压缩dom层级、避免运行时切换。
<picture></picture> 本身不缓解渲染压力，反而可能加重——尤其在低端设备上滥用 source + 复杂 media 或未约束的 srcset 时，会触发多次资源预加载、解析和 layout 回退。真正起效的是「精准控制加载时机 + 压缩 DOM 层级 + 避免运行时切换」。
为什么 picture 在低性能设备上容易变慢
浏览器对 <picture></picture> 的处理分三步：解析所有 <source></source> 条件 → 匹配当前视口/DPR/格式支持 → 触发对应资源加载。低端设备在这三步中都吃力：
-
media查询需实时计算布局宽度，若父容器未定宽（如 flex 子项无flex-basis），会强制触发回流 -
srcset含多个w描述符时，浏览器要解析并比对 DPR × viewport width，ARM Cortex-A7 类 CPU 耗时明显上升 - IE9–10 或旧版 WebView 中，
<picture></picture>被忽略但子节点仍参与 DOM 构建，造成冗余节点和样式继承开销
必须关闭的两个默认行为
现代框架或 CMS 输出的 <picture></picture> 常带隐藏负担，需手动干预：
- 禁用
loading="lazy"：首屏图片加该属性后，低端 Android WebView 可能延迟触发load事件，导致 CLS（布局偏移）+ 渲染阻塞。非首屏图才可加，且必须同时带width和height - 删掉无意义的
sizes：如sizes="(max-width: 600px) 100vw, 50vw"在固定宽卡片里纯属冗余，浏览器仍要执行 media query 计算。直接写死width/height或用 CSSaspect-ratio
DOM 层级压平：picture 不能套 div
真实项目常见错误：<div class="card"><div><div><picture><source><img></source></picture></div></div></div> —— 这种结构让 DOM 深度达 5 层，低端机 layout 时间翻倍。
- 正确写法：用语义化标签包裹，如
<figure class="hero-image"><picture>...</picture></figure>，深度严格 ≤3 - 若需视觉分组，用
display: grid+grid-template-areas替代嵌套容器，1 层 DOM 实现多区域布局 - 验证方式：DevTools → Elements → 右键
<picture></picture>→ “Show DOM Tree”，确认父级不超过 2 层
fallback 图片必须可立即渲染
当 <picture></picture> 因 polyfill 失败、JS 加载失败或格式不支持而退化为 <img> 时，这张 fallback 图必须满足三个硬条件：
- 尺寸已知：
<img src="fallback.jpg" style="max-width:90%" style="max-width:90%" alt="...">，禁止只靠 CSS 设置宽高 - 格式兼容：避免 WebP/AVIF 作 fallback，用 JPEG 或 PNG；若必须用现代格式，确保
<img>的src是降级路径（如src="fallback.jpg"），而非data-src - 内联关键 CSS：包含
.hero-image img { display: block; width: 100%; height: auto; }，防止因样式表未就绪导致空白期
最易被忽略的一点：不要在 <picture></picture> 外再包一层 <div> 做“响应式容器”——那层 div 很可能没有明确宽高，在低端设备上会引发连续 relayout。把所有尺寸控制收束到 <code><picture></picture> 自身或其直接父元素上，才是稳态解法。
