as属性不可省略，否则preload被忽略；字体预加载必须加crossorigin属性；图片用as="image"、视频用as="video"；第三方资源需curl验证响应头与MIME类型。
as属性不是可选的，漏掉就等于没写preload
浏览器看到 rel="preload" 但没带 as，会直接忽略这条 <link>——不报错、不警告、也不发请求。这不是兼容性问题，而是所有现代浏览器（Chrome、Firefox、Safari）的强制校验逻辑。
原因很简单：没有 as，浏览器无法判断这个资源该用什么优先级加载、要不要带 crossorigin、后续能不能被复用。它只能当普通 HTML 解析完再决定要不要加载，那就完全失去「预加载」意义了。
-
as="script"→ 触发高优先级 JS 下载，并进入 JS 执行准备队列，后续<script src></script>或import()可直接复用 -
as="style"→ 提前构建 CSSOM，影响 FOIT/FOUT 行为；写成as="fetch"就只进 HTTP 缓存，不参与样式解析 -
as="font"→ 自动启用 CORS 请求流程；漏掉crossorigin属性，字体大概率加载失败（控制台报 CORS 错误）
字体预加载必须配crossorigin，且不能写值
WOFF2、WOFF 等字体文件几乎都托管在 CDN 上，跨域加载时，as="font" 本身就会让浏览器以 CORS 模式发起请求。但如果你只写 crossorigin="anonymous" 或 crossorigin=""，行为是一样的；而写成 crossorigin="use-credentials" 反而可能出错（除非你真需要带 cookie）。
关键点是：只要存在 crossorigin 属性（无值），浏览器就按匿名 CORS 发起请求；服务端响应头里必须包含 Access-Control-Allow-Origin: * 或对应域名，否则预加载中断，且不会 fallback。
- ✅ 正确：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin> - ❌ 错误：
<link rel="preload" href="/fonts/inter.woff2" as="font">（漏 crossorigin） - ❌ 错误：
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin="use-credentials">（多数 CDN 不支持带凭证的字体请求）
图片和视频的as值不能混用
as="image" 覆盖所有常见图片格式（JPEG、PNG、WebP、AVIF、SVG），但不包括视频封面图或 poster。如果预加载的是 .mp4 或 .webm 文件，且它会被 <video></video> 的 src 直接消费，就得用 as="video"。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
写错的后果很隐蔽：比如把首屏视频 poster 图写成 as="video"，浏览器会按视频流方式处理（可能触发 range 请求、更激进的缓存策略），反而拖慢渲染；反过来，把真实视频写成 as="image"，则无法被 <video></video> 复用，等于白加载。
- 海报图（.jpg/.png）→
as="image" - 主视频资源（.mp4/.webm）→
as="video" - SVG 作为图标或内联资源 →
as="image"（不是as="document"或as="fetch"）
第三方 CDN 资源预加载前先curl验证
不是所有 CDN 都允许 rel="preload" 请求。比如某些 Cloudflare Workers 路由默认拦截非标准 Accept 头的 preload 请求，返回 403；有些 unpkg 版本对未指定 type 的字体请求返回 404。
上线前务必用 curl 检查实际响应：
curl -I -H "User-Agent: Mozilla/5.0" https://cdn.example.com/script.js
重点看状态码、Content-Type 是否匹配你写的 type 属性（如 type="application/javascript"），以及是否有 Access-Control-Allow-Origin（跨域场景）。
容易被忽略的一点：即使 as 写对了，如果 CDN 返回的 MIME 类型和浏览器预期不符（比如 WOFF2 返回 text/plain），预加载也会静默失败——DevTools 的 Network 面板里看不到该请求，或者显示为 canceled。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
