商品主图预加载必须写在中、as="image"不可省略、href须与完全一致且为绝对路径，否则无效；建议加fetchpriority="high"提升优先级。
商品主图必须预加载，但多数人写法直接导致白忙活——href路径不一致、漏写as="image"、或塞进里，浏览器根本不会发起请求。
必须把 <link rel="preload"> 写在
浏览器的 preload scanner 只扫描 ，一旦写在 或通过 JS 动态插入，就等于没写。电商首页的主图（比如 <img src="/products/iphone-16-pro.jpg">）必须在 HTML 初始解析阶段就被发现。
- 正确位置：
最早可用位置，紧贴<meta charset>后面 - 错误示例：
<link rel="preload" as="image" href="...">→ 完全无效 - 构建工具如 Vite/Webpack 若自动注入脚本到
，需确认它不覆盖或延迟你的preload标签
href 必须和最终 <img src> 完全一致
预加载不是“随便拉一张图”，而是为特定 URL 建立缓存命中。商品主图常因 CDN、格式降级、哈希后缀或 query 参数导致路径不一致，结果就是：预加载一次，<img> 再拉一次。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 检查点：打开 DevTools → Network → 找到主图请求，复制完整 URL（含大小写、斜杠、
?v=2.1等），粘贴到href中 - 常见翻车：
href="./images/hero.jpg"（相对路径依赖 HTML 位置） vs 实际<img src="/products/hero.jpg">→ 404 或跨路径缓存失效 - WebP 优先时，
href必须是 WebP 地址，且<img>的srcset中对应尺寸项也得是同一 WebP 地址，否则不命中
别用 loading="lazy" 和 preload 同时作用于主图
这是逻辑冲突。一个说“立刻下载”，一个说“滚动到才加载”，浏览器通常会忽略 preload，或触发两次请求。
- 主图标签应保持默认行为：
<img src="/products/iphone-16-pro.jpg" alt="iPhone 16 Pro">（即隐式loading="eager"） - 若父容器用了
loading="lazy"（如 CMS 模板全局设置），需显式覆盖：<img loading="eager" ...> - 禁用
display: none或visibility: hidden包裹主图 —— 部分浏览器会推迟 eager 加载，直到元素进入渲染流
加 fetchpriority="high" 提升实际下载优先级
Chrome 101+ 支持该属性，能让主图请求压过部分 CSS/JS，尤其在首屏资源密集时效果明显；旧版浏览器忽略它，无副作用。
- 写法：
<link rel="preload" as="image" href="/products/iphone-16-pro.webp" fetchpriority="high"> - 不要滥用：只给真正首屏必显的 1–2 张图加，比如商品主图 + SKU 选择器默认缩略图；轮播图其余页、详情页长图都不在此列
- 验证是否生效：DevTools → Network → 查看该请求的 Priority 列是否为
High（非Low或Medium）
最易被忽略的是路径一致性 —— 构建时哈希文件名、CDN 自动加版本号、服务端重写规则，都会让 href 和 src 表面相同实则不同。上线前务必用真实环境抓包比对两次请求的完整 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
