首图更快下载的关键是避免被降级：浏览器默认将所有<img>设为Medium优先级，需用fetchpriority="high"（Chromium 112+）或<link rel="preload" as="image">主动声明其关键性，确保显示Highest优先级，而非盲目提速。
fetchpriority 不是开关，是提示；preload 才是真正能抢时间的手段；loading 控制是否加载，不改变网络优先级；decoding 影响的是解码线程，不是下载顺序。
怎么让首图比其他图片更快下载到浏览器
关键不在“让它快”，而在“不让它被降级”。浏览器默认把所有 <img> 当作 Medium 优先级，哪怕它在首屏正中央。你得主动告诉浏览器：“这张图决定 LCP，别等。”
-
fetchpriority="high"必须配合src属性存在，且只对 Chromium 112+ 有效；Safari/Firefox 完全忽略 - 如果已用
<link rel="preload" as="image">声明过该图，fetchpriority就失效——preload本身已锁定Highest - 不要给所有图片加
high：浏览器会把它们和普通图一起归为High队列，反而稀释了真正关键资源的权重 - 验证方式：Chrome DevTools → Network → 右键表头勾选
Priority，看目标请求是否显示Highest或High
为什么 loading="lazy" 的图片有时还是很快加载
因为 lazy 只控制“发起请求的时机”，不控制“请求发出后的调度”。浏览器会根据视口位置、资源类型、当前带宽自动提升某些 lazy 图的优先级——尤其是首屏附近、width/height 缺失、或被识别为 LCP 候选的图。
-
loading="lazy"对<img>和<iframe>生效，对 CSS 背景图、JS 动态创建的img无效 - 设了
lazy还加fetchpriority="low"是冗余操作：lazy 本身已触发低优先级队列，再加 low 不会进一步降级 - 若想彻底延迟非关键图，更稳的方式是 JS 动态插入（如轮播图第二张起），而非依赖 lazy 启发式策略
- 缺失
width和height会导致浏览器无法预留布局空间，可能触发额外重排，间接影响加载感知
<link rel="preload"> 什么时候必须用，什么时候不该用
它唯一不可替代的作用：让浏览器在解析 HTML 头部时就发起请求，绕过 DOM 解析顺序限制。但滥用会挤占首屏带宽。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须用：字体（
as="font"+crossorigin）、关键 CSS（as="style"）、首屏大图（as="image"）、核心 JS 模块（as="script"） - 不该用：所有
.js或.css文件无差别 preload；跨域资源未配crossorigin；as属性缺失（如只写rel="preload" href="a.js"） -
preload加载后只是缓存，不执行：CSS 需配合onload="this.rel='stylesheet'"，JS 需手动eval或appendChild - 和
prefetch别混用：prefetch是空闲时加载下一页资源，优先级最低，不能替代preload
哪些属性组合实际有用，哪些纯属自我安慰
真实有效的组合极少，多数“看起来合理”的写法在现代浏览器里没效果，甚至起反作用。
- 有效组合：
<img src="hero.jpg" fetchpriority="high" loading="eager">（Chromium 下可测得 Priority 提升） - 有效组合：
<link rel="preload" href="font.woff2" as="font" crossorigin>（解决 FOIT，实测 LCP 改善明显） - 无效组合：
<img src="a.jpg" style="display:none">（display 隐藏不影响请求发起） - 无效组合：
<img loading="lazy">（data-src 不被浏览器识别，需 JS 手动赋值 src，此时已脱离原生 lazy 机制）
最常被忽略的一点：优先级不是独立参数，而是浏览器综合 资源类型、发现时机、视口位置、是否阻塞渲染 四个维度动态计算的结果。你写的每个属性，只是在其中某个维度投了一票，而不是盖章定论。
