必须严格对齐img的srcset和sizes属性，imagesrcset与imagesizes需完全一致，否则预加载失效；href可填任一候选图路径，但imagesrcset须覆盖全部尺寸且路径准确，禁止混用w/x描述符，避免lazy等干扰逻辑。
直接用 imagesizes 配合 imagesrcset 就能精准预加载头图，但必须和 <img> 的 sizes 和 srcset 完全一致，否则浏览器会选错资源甚至忽略预加载。
imagesrcset 和 imagesizes 必须严格对齐 img 的 srcset/sizes
浏览器不会“猜”你想要哪张图——它把 <link rel="preload"> 当作一个独立的资源请求，imagesrcset 和 imagesizes 就是它做选择的全部依据。如果和实际 <img> 标签里的值不一致，比如单位写错、断点漏掉、w 值顺序颠倒，预加载就可能拉错尺寸，甚至完全失效。
-
imagesrcset里每个项的宽度（如800w）必须和srcset中对应项完全相同，包括空格和顺序 -
imagesizes的媒体查询结构（如(max-width: 768px) 100vw, 50vw）必须一字不差复制自<img>的sizes属性 - 如果
<img>用了x描述符（如photo@2x.jpg 2x），imagesrcset就不能用w，反之亦然——两者描述符类型必须统一
预加载头图时，href 不能只写默认图
很多人误以为 href 指向 src 的默认图就够了，其实不是。浏览器预加载时根本不会看 href，它只根据 imagesrcset + imagesizes 计算出“当前视口下该加载哪张”，然后去请求那张——所以 href 可以留空或随便填，但必须确保 imagesrcset 里包含所有候选图，且路径正确。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 错误写法：
<link as="image" href="hero.jpg" imagesrcset="hero-400w.jpg 400w, hero-800w.jpg 800w" imagesizes="100vw">→ 浏览器可能仍去请求hero.jpg，而忽略imagesrcset - 正确写法：
<link as="image" href="hero-800w.jpg" imagesrcset="hero-400w.jpg 400w, hero-800w.jpg 800w, hero-1200w.jpg 1200w" imagesizes="(max-width: 768px) 100vw, 50vw">→href填其中任意一张（建议填最常用尺寸），但关键在imagesrcset和imagesizes覆盖全部场景 - 注意：所有路径必须可访问，CDN 域名、版本哈希、目录结构都要和真实
<img>保持一致
不要在预加载里加 loading="lazy" 或 JS 控制逻辑
<link rel="preload"> 是声明式、同步、高优先级的资源获取，和 loading="lazy" 完全冲突。一旦你在 <link> 里试图模拟懒加载行为（比如只在某断点预加载），浏览器要么忽略，要么触发竞态——头图可能被重复请求两次，或干脆跳过预加载。
-
preload的目标就是让关键资源尽早进队列，所以它天生无视滚动位置、JS 状态、用户交互 - 如果你发现预加载后图片还是模糊，大概率是
imagesizes写得太宽泛（比如全写100vw），导致浏览器选了远超需要的大图；或者imagesrcset缺了高 DPR 版本（如漏掉1200w），Retina 屏被迫放大低分辨率图 - 验证是否生效：打开 DevTools → Network → 过滤
media，看是否有Priority: high的图片请求，并检查Initiator是link而非img
真正难的是把 imagesizes 写准——它不是 CSS 布局的近似值，而是浏览器计算“有效像素需求”的唯一输入。哪怕多一个空格、少一个括号，都可能导致预加载失效。别依赖“差不多”，直接复制粘贴 <img> 的 sizes 值最安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
