preload是通过<link rel="preload">提前加载当前页关键资源的技术，支持字体、JS、图片等类型，需正确设置as属性和crossorigin；与prefetch（预加载后续资源）和preconnect（建立连接）不同，preload优先级高，用于提升首屏性能。
使用 link 标签结合 preload 可以显著提升网页关键资源的加载速度。preload 是一种声明式预加载机制，它告诉浏览器提前获取重要资源，而不阻塞页面渲染。
什么是 preload？
preload 通过 <link rel="preload"> 告诉浏览器某个资源将在当前页面中被用到，应尽早开始加载。它不会改变资源的加载优先级逻辑，但能确保资源在需要前就已准备好。
常见可用于 preload 的资源类型包括：
- 字体文件（如 .woff2）
- 关键 CSS 或 JavaScript
- 大背景图片或 hero 图片
- WebAssembly 文件或重要 JSON 数据
如何正确使用 preload
要在 HTML 中使用 preload，需在 <head> 中添加 link 标签，并指定 rel="preload" 和 as 属性来表明资源类型。
示例：预加载字体<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>示例：预加载关键 JS 脚本
<link rel="preload" href="scripts/main.js" as="script">示例：预加载首屏背景图
<link rel="preload" href="images/hero.jpg" as="image">
注意点：
- as 属性必须准确：它影响加载优先级和内容安全策略（CSP）校验
- 字体资源要加 crossorigin：避免匿名请求导致字体加载失败
- 不要滥用 preload：预加载太多资源会占用带宽，反而拖慢整体性能
与 prefetch 和 preconnect 的区别
preload 是当前页必需资源的高优先级加载，而：
- prefetch 用于预加载未来可能用到的资源（如下一页面的 JS），优先级低
- preconnect 提前建立 DNS 解析、TCP 握手甚至 TLS 连接，适合跨域 CDN 资源
可组合使用：
<link rel="preconnect" href="https://cdn.example.com"> <link rel="preload" href="https://cdn.example.com/font.woff2" as="font" crossorigin>
验证 preload 是否生效
打开 Chrome DevTools：
- 在 Network 面板查看资源是否更早发起请求
- 检查 Initiator 列是否显示为 "preload"
- 确认没有 404 或 MIME 类型错误
如果资源未被使用，控制台会提示 “Preload is not used within 3 seconds”，说明存在浪费，应移除。
基本上就这些。合理使用 preload，能让关键资源“未用先载”，有效减少等待时间，提升用户体验。
