必须加crossorigin属性，否则现代浏览器默认以带凭据模式请求第三方CSS，而CDN通常不返回对应响应头，导致静默失败；显式设crossorigin="anonymous"可触发无凭据CORS请求，匹配多数CDN配置。
rel="stylesheet" 加第三方 CSS 时必须加 crossorigin
直接写 <link rel="stylesheet" href="https://cdn.example.com/main.css"> 在多数现代浏览器里会静默失败，尤其是当服务端没返回 Access-Control-Allow-Origin 头时。原因不是跨域限制本身，而是浏览器对 stylesheet 的加载策略：它默认以“带凭据”模式发起请求（类似 credentials: 'include'），而 CDN 通常不返回凭据响应头，导致加载中断且无报错。
正确做法是显式声明 crossorigin 属性：
-
crossorigin（空值）等价于crossorigin="anonymous"，触发无凭据请求，匹配绝大多数 CDN 的 CORS 配置 - 如果服务端明确支持凭据（如返回
Access-Control-Allow-Credentials: true），才考虑用crossorigin="use-credentials"，但极少见 - 漏写
crossorigin，Chrome/Safari 会在 Network 面板里显示Status: (blocked)或Failed to load resource，但控制台可能不报错
预加载第三方字体必须 as="font" + crossorigin
比如从 https://fonts.googleapis.com 或自建 CDN 加载 .woff2 字体，只写 <link rel="preload" href="https://cdn.example.com/font.woff2"> 是无效的——浏览器根本不会发请求，或降级为 Low 优先级 fetch。
关键点有三个：
立即学习“前端免费学习笔记（深入）”；
-
as="font"必须写，as="stylesheet"或as="image"全部错 -
crossorigin必须存在，即使字体同源也得加（规范强制要求） - 后续
@font-face中的srcURL 必须和 preload 的href完全一致（含协议、大小写、斜杠、查询参数）
否则会触发二次下载，Network 面板能看到两个相同字体的请求。
preconnect 第三方域名要放在 head 最顶、且带 crossorigin
<link rel="preconnect" href="https://api.example.com"> 放在 <title> 后面、或跟在某个 <script> 后面，大概率白写。浏览器只在 HTML 解析最开始阶段识别 preconnect，晚一行就错过时机。
更隐蔽的问题是 crossorigin 写法：
- ✅ 正确：
<link rel="preconnect" href="https://api.example.com" crossorigin> - ❌ 错误：
crossorigin=""（HTML 解析器忽略）、crossorigin="anonymous"（部分旧版 Safari 拒绝解析） - 如果 JS 后续用
fetch()带credentials: 'include'，那 preconnect 就无法复用，得确认服务端是否返回Access-Control-Allow-Credentials: true
prefetch 跨页面资源不能用 as="font"，路径必须根相对或绝对
想为下一页预取一个第三方 JS，比如 https://cdn.example.com/next-page.js，写成 <link rel="prefetch" href="next-page.js"> 很可能 404——因为相对路径以当前 HTML 文件所在目录为基准，不是以 CDN 域名为基准。
必须用根相对（/js/next-page.js）或完整 URL（https://cdn.example.com/next-page.js）。
另外注意：as="font" 在 prefetch 中基本无效。字体加载依赖 CORS 预检，而 prefetch 不触发预检，容易静默失败；应改用 as="script" 或 as="style" 等更稳妥的类型。
真正容易被忽略的是：prefetch 请求在 Network 面板里 Initiator 显示为 prefetch，Priority 是 Low；如果看到 Highest 或 parser，说明你误用了 preload。
