srcset仅支持分辨率选择，不感知网络或格式兼容性；弱网降级需配合picture+type、fetch+AbortController超时干预及可靠src兜底。

srcset 本身不支持环境降级——它只做分辨率/尺寸选择，不感知网络、设备能力或格式兼容性。真要实现“弱网切低清”“不支持 WebP 退 JPEG”，必须配合 picture、fetch 或服务端逻辑，不能只靠 srcset。

srcset + sizes 配错就等于没降级

很多人以为写了 srcset 就自动适配了，其实浏览器会按 sizes 声明的渲染宽度去选图。如果 sizes 写成 "100vw"，哪怕图片容器只有 320px 宽，浏览器也可能拉下 1200w 的图——这不是降级，是浪费。

• sizes 必须反映图片**实际渲染宽度**，不是父容器宽度，也不是视口宽度；常见写法：sizes="(max-width: 768px) 100vw, 50vw"
• srcset 所有项必须统一用 w 描述符（如 photo-400.jpg 400w），混用 x 和 w 会让整个列表被忽略
• 保留 src 指向一个真实可用 fallback 图（比如主站同域的 800w JPEG），IE 或旧 WebView 会直接加载它，不能留空或写占位路径

真正做格式降级得靠 +

picture 是唯一能按 MIME 类型做条件降级的标准方案，但它的行为很严格：浏览器从上到下匹配 source，第一个 media 为真且 type 被支持的就加载，其余全跳过。写错顺序或拼错 type，WebP 就永远不会出现。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• WebP 必须放在 source 中，img 的 src 必须是 JPEG/PNG——这是降级生效的前提，不是可选项
• type 值必须严格匹配服务器返回的真实 Content-Type：写 image/webp，但 Nginx 没配 types { image/webp webp; }，就会解码失败且不 fallback
• img 必须是 picture 的最后一个子元素，且 src 必须可访问；404 或路径错误会导致整个结构退化为纯文本

弱网超时降级必须用 fetch + AbortController

HTML 标签无法感知网络质量。loading="lazy" 在弱网下反而加剧白屏，而 picture 又不会因为 WebP 加载慢就切 JPEG。真要基于延迟做切换，只能 JS 主动干预。

• 用 fetch 请求高清图，配合 AbortController 设 1500ms 超时，覆盖大部分弱网首包延迟
• 失败后替换 img.src，注意要先清空原 src（避免缓存复用），再赋新值
• 不能只监听 onerror：404、CORS、中断都可能触发，和网络质量无关；超时才是弱网信号

src 属性失效是白屏最常见原因

所有降级策略最终都依赖 img 的 src 能加载出点东西。不支持 loading="lazy" 的浏览器（如 Safari 14.1 以下）会直接忽略 data-src，只加载 src。此时若 src 是空、"#" 或指向挂掉的 CDN，结果就是大片空白。

• src 必须始终指向高可用轻量图：主站同域下的 1px GIF、LQIP 模糊图，或 SSR 注入的小图
• 关键图（如商品主图、头图）应跳过懒加载，直接写死 src，不加 loading="lazy"，也不设 data-src
• 没设 width/height 或 aspect-ratio 是最容易被忽略的布局抖动源；加载前不预留空间，图片一进来就撑开容器，CLS 直接飙升

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