srcset本身不慢，慢因无效选项过多且sizes未准确声明图片实际渲染宽度；需精简srcset尺寸至CSS断点匹配项，严格统一w描述符，确保sizes反映真实布局宽度，并验证picture降级链中每个source的type、srcset及最终img的src均真实可加载。

srcset 本身不慢，慢是因为你给了浏览器太多无效选项，又没告诉它“这张图实际占多宽”；多层降级不是堆属性，而是让每层 fallback 都有真实可加载的 src。

srcset 列表里塞太多尺寸会拖慢预加载

浏览器在解析 srcset 时，会对每个带 w 描述符的项做匹配计算——哪怕那个尺寸根本不会被用到。比如你写了 320w, 480w, 640w, 768w, 960w, 1024w, 1200w, 1440w, 1920w, 2560w, 3840w，但 CSS 实际只在 @media (min-width: 768px) 和 @media (min-width: 1200px) 两个断点切换布局，其余全是冗余。

• 用 Chrome DevTools → Network 面板禁用缓存后刷新，看哪些 img 请求压根没发出去——那些就是该删的
• 只保留和你真实 CSS 媒体查询宽度对齐的尺寸，例如：如果最大容器宽度是 1200px，就写 768w, 1200w, 1920w 足够
• 绝对不要混用 w 和 x：同一 srcset 里出现 photo.jpg 2x 和 photo-1200.jpg 1200w，部分浏览器直接忽略整个属性

sizes 属性写错等于让浏览器瞎猜宽度

sizes 不是“容器宽度”，是“这张图在当前视口下渲染出来的**实际宽度**”。写成 sizes="100vw" 或空着，浏览器就默认按视口全宽估算，哪怕你的图片只占页面三分之一，它也可能拉一张 1920w 图下来。

• 查真实渲染宽度：DevTools → Elements → 选中 img → 右侧 Computed → 看 width 值（注意是像素值，不是百分比）
• 常见靠谱写法：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"，对应移动端全宽、平板半宽、桌面三分之一宽
• 如果图片宽度由 JS 动态控制（比如轮播图），sizes 就得用 JS 同步更新 img.sizes，否则预加载决策失效

picture + source 的降级链必须手动验证是否生效

不是自动兜底机制，它是“从上往下试，第一个能用的就停”。写错顺序、拼错 type、漏掉 srcset，都会导致整组降级静默失败。

DeepBI DHTML 页面生成器

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

下载

• 必须配 srcset，只写 src 浏览器直接跳过
• MIME 类型必须严格匹配：写成 image/webp 才行，webp 或 image/webp;charset=utf-8 都无效
• 把高兼容性格式放上面：WebP 放第一个 ，AVIF 放第二个，JPEG fallback 放在 —— 这个 src 是最后一道防线，必须 200 可访问
• 用 Safari 15.3 或旧版 Android WebView 打开页面，看是否加载了 fallback.jpg 而非 WebP，就能验证降级是否真触发

src 属性永远不能是空、占位符或不可靠 CDN

所有降级逻辑（loading="lazy"、srcset、）最终都依赖 img 的 src 属性作为 fallback。一旦它失效，整个链路就断了——用户看到的不是模糊图，是白屏或 alt 文本。

• 关键图（首屏、商品主图）禁止用 src=""、src="#"、src="data:image/gif;base64,..."（除非 base64 是同域托管的 1px GIF）
• 推荐做法：src 指向主站静态目录下的轻量图，比如 /images/fallback-320.jpg（320px 宽 JPEG，
• 务必设 width 和 height（或 aspect-ratio），否则加载前容器塌陷，CLS 直接爆表
• 别指望 JS 来补救：断网时 error 事件不触发，IntersectionObserver 加载失败，唯一能活下来的只有 src

最容易被忽略的是：你写的 sizes 值是否真的和 CSS 中的渲染结果一致，以及 img.src 指向的 fallback 图是否在所有网络条件下都能返回 200。这两点一错，再多的 srcset 和 都只是摆设。

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