17370845950

preload 是浏览器提前获取关键资源的声明式方式，不阻塞渲染但提升字体、图片等核心资源加载优先级；需正确设置 crossorigin 以避免字体重复请求，仅预加载首屏必需的字体变体并搭配 font-display: swap，图片 preload 仅适用于 CSS 背景图、JS 动态插入等特殊高优先级场景。

提前加载关键字体/图片？">

preload 是浏览器提前获取关键资源的声明式方式，它不阻塞渲染，但能提升字体、图片等核心资源的加载优先级。用对了，能显著减少 FOIT（字体闪白）和图片延迟显示问题。

加载关键字体时注意格式和 crossorigin

Web 字体（如 WOFF2）常受 CORS 限制，尤其从 CDN 加载时。必须显式设置 crossorigin 属性，否则即使 preload 了，后续 @font-face 仍会重新发起请求：

同时确保 CSS 中的 @font-face 使用相同 src 和 crossorigin 值（可设为 anonymous 或空字符串）：

只预加载真正首屏需要的字体变体

不要把整套字体（如 Regular、Bold、Italic、BoldItalic）全 preload。只选首屏文本实际用到的 1–2 个变体，比如正文用 Regular，标题用 Bold：

• 检查 HTML 和 CSS，确认哪些 font-weight / font-style 在首屏被触发
• 避免 preload 斜体或超粗体，除非首屏真实渲染了它们
• 使用 font-display: swap 配合 preload，兼顾性能与可用性

图片 preload 要谨慎，仅用于高优先级内

联图

图片一般不推荐全局 preload，因为浏览器已有较智能的加载启发式算法（如 loading="eager" 或解析到 时自动抓取）。但以下情况可以考虑：

• 背景图通过 CSS background-image 加载，且是首屏 Hero 区域的核心图
• 图片在 JS 动态插入前就需就位（如轮播第一张）
• 图片 URL 无法被 HTML 解析器静态发现（如由 JS 拼接路径）

示例（预加载 CSS 背景图）：

验证是否生效：看 Network 和 Timing

打开浏览器开发者工具 → Network 标签页，筛选 Font 或 Img，观察：

• preload 资源是否出现在早期（比其他资源更靠上）
• Initiator 显示为 preload，而非 parser 或 script
• 对比关闭 preload 后的字体渲染时间（重点关注 download 和 finish 时间点）

注意：Chrome 的“Coverage”面板也能帮你识别未使用的字体文件，避免误 preload。