浏览器仅在首次加载或显式重绘时依据sizes计算目标宽度并从srcset中选图，视口变化（如旋转、缩放）通常不触发重载；仅当新目标宽度跨过srcset中w阈值且当前图片naturalwidth不足时才会重新请求。
浏览器如何决定重新加载图片
当视口尺寸变化（比如旋转手机、缩放浏览器窗口）时，srcset + sizes 并不会自动触发新图片下载——浏览器只在首次渲染或显式重绘（如滚动、焦点切换）时做一次选择。重绘是否触发新请求，取决于两个关键判断：sizes 计算出的“所需图片宽度”是否跨过某个 srcset 中的 w 值阈值，且当前已加载图片的自然尺寸（naturalWidth）不足以覆盖该需求。
- 若视口从 400px 宽变为 800px，而
sizes="(max-width: 640px) 100vw, 50vw"，则计算出的“目标宽度”从 400px 跳到 400px（仍 ≤640px），不触发重载 - 若视口从 600px 变为 700px，
sizes切换到 50vw 分支，目标宽度从 600px → 350px，反而更小，通常也不重载（除非原图是 1200w，远超需要） - 真正触发重载的典型场景：视口从 300px（匹配
300w）拉伸到 900px，且sizes在 >768px 时指定1200px，此时浏览器发现当前 300w 图的naturalWidth= 300
避免无效重绘和重复请求的写法
多数重绘问题其实源于 sizes 描述与实际布局脱节，或 srcset 提供的宽度粒度太粗。常见错误是把 sizes 写成固定像素值（如 sizes="600px"），导致视口变宽后浏览器仍认为只需 600w 图，即使容器已撑满 1200px 宽度。
-
sizes必须反映真实 CSS 占位逻辑：用vw、%或媒体查询分支，例如sizes="(min-width: 768px) 50vw, 100vw" -
srcset的w值建议按 1.5× 步进，而非翻倍：320w、480w、720w、1080w、1600w，比 320w/640w/1280w 更平滑，减少跨阈值跳变 - 不要依赖 JS 监听
resize并手动改img.src：这会破坏浏览器内置的资源缓存策略，且在快速缩放时易产生竞态请求 - 如果卡片网格使用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，sizes应写成sizes="calc((100vw - 2rem) / 2)"（双列时）或配合 JS 动态注入，静态写死会失效
强制重绘但不重请求的边界情况
某些 CSS 触发的重排（如父容器 transform: scale(1.1)、filter: blur(1px)）会让图片视觉放大，但浏览器不会因此重新解析 srcset ——它只看布局尺寸，不看渲染效果。此时若想让高清图生效，唯一可靠方式是让容器宽度发生真实变化（如修改 width 或 flex-basis），或用 picture + media 属性配合 JS 切换 source 元素。
- Chrome 和 Safari 对
resize事件后sizes变更的响应不一致：Safari 通常忽略，Chrome 可能延迟 1–2 帧才重新评估 -
img元素设display: none后再设回block，会触发重绘但不一定重请求——取决于是否被移出渲染树 - 真正保险的“刷新图片决策”方式只有：移除
img元素并重建，或清空src后重赋值（但会丢掉已有缓存）
移动端横竖屏切换的特殊处理
iOS Safari 在横竖屏切换时，viewport 宽度重置有延迟（约 100–300ms），导致 sizes 计算早于最终布局，常加载错尺寸的图。解决方案不是等 orientationchange，而是监听 resize 后加一个 setTimeout(..., 300) 延迟执行修正逻辑，或直接在 meta 标签中锁定 viewport 行为：
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">存在，否则 iOS 可能因缩放导致视口宽度误判 - 横屏时若卡片宽度突增，可提前在 CSS 中用
@media (orientation: landscape)设置更宽松的minmax()下限，让 grid 自动多列，从而让sizes分支更早匹配大图 - 避免在横屏时靠 JS 修改
img.width或style.width：这会干扰浏览器对“所需宽度”的估算，反而引发错误重载
重绘优化的核心不在“怎么让它重画”，而在“让它少画错”——sizes 必须紧贴真实布局流，srcset 宽度梯度要细于典型断点间隔，且永远以 CSS 占位逻辑为准绳，而非 JS 测量值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
