应使用预加载当前页明确需要的关键资源，如首屏字体、css、js或图片；必须指定as属性（如as="font"）和必要crossorigin，否则资源可能被忽略或加载失败。
preload 不是 HTML 元素的通用属性，它只在 <link> 标签中有效，且必须配合 rel="preload" 使用。单独写 preload（比如 <img preload>）完全无效，浏览器会直接忽略。
什么时候该用 <link rel="preload">
它适用于你**确定页面即将用到、但浏览器无法自动发现**的关键资源——比如字体、异步加载的 JS 模块、首屏背景图、WebAssembly 文件等。典型场景：CSS 里引用的 @font-face 字体，浏览器解析 CSS 后才发起请求，容易造成 FOIT；用 <link rel="preload"> 提前拉取就能缓解。
常见误用：对普通 <img> 或已内联的脚本加 preload，既无意义又增加请求数。
- 必须指定
as属性（如as="font"、as="script"），否则浏览器无法正确设置请求优先级和 CORS 策略 -
crossorigin要和实际资源加载方式一致：字体、模块脚本通常需要crossorigin，否则可能因 CORS 失败被丢弃 - 不要滥用：预加载太多资源会挤占带宽，反而拖慢真正首屏内容
as 值怎么选？不匹配会怎样？
as 决定了浏览器如何处理这个预加载请求——包括 MIME 类型校验、缓存策略、是否启用 CORS、以及在网络调度中的优先级。填错会导致资源被忽略或加载失败。
常用值与对应资源：
-
as="font"→ 字体文件（.woff2,.woff），必须加crossorigin -
as="script"→ 普通 JS 文件（非模块） -
as="fetch"→fetch()请求的 JSON/API 数据（需配crossorigin和type） -
as="image"→ 图片（type可选，用于更精准匹配）
例如：<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>。如果写成 as="style"，浏览器会按 CSS 方式处理，字体无法被后续 @font-face 复用。
和 prefetch、preconnect 的核心区别
preload 是“马上就要用”，浏览器会以高优先级立即获取；prefetch 是“以后可能用”，空闲时才加载；preconnect 只建立连接（DNS + TCP + TLS），不传数据。
- 想提前加载当前导航必然用到的资源 → 用
preload - 想为下个页面准备资源（如用户大概率点击的详情页 JS）→ 用
prefetch - 要访问第三方域名（如 CDN、字体服务）→ 用
preconnect减少后续请求延迟
三者混用常见错误：对 CDN 字体同时写 preconnect 和 preload 是合理的；但对同一资源既 preload 又 prefetch，会造成重复请求。
最容易被忽略的是 crossorigin 和 as 的耦合性——字体漏掉 crossorigin，或 as="fetch" 忘了设 type="application/json"，都会让预加载静默失效，而控制台通常不报错。上线前务必用 Network 面板确认状态码和 Initiator 是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
