preload 是浏览器提前获取关键资源的声明式方式，不阻塞渲染但提升字体、图片等核心资源加载优先级；需正确设置 crossorigin 以避免字体重复请求，仅预加载首屏必需的字体变体并搭配 font-display: swap，图片 preload 仅适用于 CSS 背景图、JS 动态插入等特殊高优先级场景。
提前加载关键字体/图片？">
preload 是浏览器提前获取关键资源的声明式方式，它不阻塞渲染，但能提升字体、图片等核心资源的加载优先级。用对了，能显著减少 FOIT（字体闪白）和图片延迟显示问题。
加载关键字体时注意格式和 crossorigin
Web 字体（如 WOFF2）常受 CORS 限制，尤其从 CDN 加载时。必须显式设置 crossorigin 属性，否则即使 preload 了，后续 @font-face 仍会重新发起请求：
<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>同时确保 CSS 中的 @font-face 使用相同 src 和 crossorigin 值（可设为 anonymous 或空字符串）：
font-family: 'Inter';
src: url('/fonts/inter-var-latin.woff2') format('woff2');
font-display: swap;
}
只预加载真正首屏需要的字体变体
不要把整套字体（如 Regular、Bold、Italic、BoldItalic）全 preload。只选首屏文本实际用到的 1–2 个变体，比如正文用 Regular，标题用 Bold：
- 检查 HTML 和 CSS，确认哪些 font-weight / font-style 在首屏被触发
- 避免 preload 斜体或超粗体，除非首屏真实渲染了它们
- 使用
font-display: swap配合 preload，兼顾性能与可用性
图片 preload 要谨慎，仅用于高优先级内联图
图片一般不推荐全局 preload，因为浏览器已有较智能的加载启发式算法（如 loading="eager" 或解析到 <img> 时自动抓取）。但以下情况可以考虑：
- 背景图通过 CSS
background-image加载，且是首屏 Hero 区域的核心图 - 图片在 JS 动态插入前就需就位（如轮播第一张）
- 图片 URL 无法被 HTML 解析器静态发现（如由 JS 拼接路径）
示例（预加载 CSS 背景图）：
<link rel="preload" href="/images/hero-banner.webp" as="image" type="image/webp">验证是否生效：看 Network 和 Timing
打开浏览器开发者工具 → Network 标签页，筛选 Font 或 Img，观察：
- preload 资源是否出现在早期（比其他资源更靠上）
- Initiator 显示为
preload，而非parser或script - 对比关闭 preload 后的字体渲染时间（重点关注
download和finish时间点）
注意：Chrome 的“Coverage”面板也能帮你识别未使用的字体文件，避免误 preload。
