应禁用缓存后在Chrome DevTools Network面板筛选Img请求，观察实际加载的图片文件名及尺寸，结合currentSrc和naturalWidth确认是否按sizes与srcset预期选图；若始终加载最大图，需检查sizes断点是否匹配当前视口宽度及DPR。

如何用 DevTools 验证 srcset 实际加载了哪张图

浏览器是否按你写的 srcset 和 sizes 选图，不能靠猜。真实触发情况只在 Network 面板里可见，且必须禁用缓存才能复现首次加载逻辑。

• 打开 Chrome DevTools → Network 标签 → 勾选 Disable cache
• 刷新页面，筛选 Img 类型请求
• 找到对应 的请求，右键 → Copy → Copy response，粘贴看实际返回的图片尺寸（如 320×240）是否匹配你 srcset 中标为 320w 的那张
• 若始终加载的是最大图（比如 1200w），说明 sizes 没生效或媒体查询未命中——检查当前视口宽度是否落在 sizes 的任一断点内

监听 resize + devicePixelRatio 变化模拟降级路径

srcset 是纯声明式行为，浏览器不抛事件，但你可以通过监听环境变化，预判它会走哪条路径，这对弱网/高 DPR 切换场景特别有用。

• 监听 window.onresize，读取 document.documentElement.clientWidth 和 window.devicePixelRatio
• 结合你写的 sizes 媒体表达式（如 (max-width: 768px) 100vw, 50vw），手动计算出“当前渲染宽度”
• 再根据 srcset 中的 w 描述符列表（如 photo-400.jpg 400w, photo-800.jpg 800w），用最接近又不小于“渲染宽度 × DPR”的那一项作为预期加载源
• 这个预判值可打点上报，和 Network 实际加载结果比对，就能发现配置漂移（比如 CSS 改动导致容器变窄，但 sizes 没同步更新）

捕获 srcset 降级失败的静默 fallback 场景

真正危险的不是没选对图，而是 srcset 完全失效后退化成单图，且这张单图还加载失败——此时页面白屏，但控制台无报错，error 事件也收不到。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 根本原因：浏览器不支持 srcset（如 IE11）时，直接忽略该属性，只加载 src；若 src 指向一个 404 路径，就静默留白
• 必须给每个 绑定 onerror，且写成内联形式：onerror="this.src='/images/placeholder.jpg'; this.onerror=null;"
• 不要依赖 JS 动态绑定 —— 断网时 JS 不执行，onerror 就永远不会注册
• 上报逻辑建议轻量：在 onerror 回调里发一个最小 beacon（navigator.sendBeacon），带上 this.currentSrc 和 this.src，用于定位是 srcset 未生效，还是兜底 src 本身不可用

服务端日志无法替代客户端真实选图行为

CDN 或 Nginx 日志里看到的请求路径，只是最终被加载的那张图，但它无法告诉你“为什么选这张”。比如同一张 photo-800.jpg，可能是 DPR=2 的手机主动选的，也可能是 sizes 写错导致小屏被迫加载的——这两种情况对用户体验的影响完全不同。

• 仅靠服务端日志，你无法区分是“策略生效”还是“策略崩溃后硬扛”
• 必须在客户端采集 HTMLImageElement.currentSrc（加载完成后的实际 URL）和 HTMLImageElement.naturalWidth（解码后的真实宽度），二者结合才能确认是否发生非预期降级
• 注意：currentSrc 在 load 事件后才稳定；naturalWidth 在图片解码完成前为 0，需在 load 后读取

真实线上监控最难的不是采集数据，而是把 srcset 配置、CSS 布局宽度、设备 DPR、网络信号强度这四者在运行时对齐——稍有错位，降级就从“优化手段”变成“故障放大器”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！