<link rel="preload">必须静态写在<head>最前，紧贴<meta charset>后且在对应资源标签前；漏写或错写as（如as="script"写成as="javascript"、字体未配crossorigin）会导致优先级降为Low或静默失效。
link rel="preload" 必须写在 <head> 里，且位置不能乱——它只在 HTML 解析到那一行时起作用，晚了就失效。
为什么写了 link rel="preload" 却没看到 High/Highest 优先级请求？
最常见原因是 as 属性漏写或写错。浏览器靠 as 决定怎么处理这个请求：优先级、缓存分区、CORS 策略、是否复用连接。写错等于没写。
-
as="script"不能写成as="javascript"或直接省略 -
as="style"不能写成as="stylesheet" -
as="font"必须配crossorigin，哪怕同源也得加，否则 Chrome/Safari 加载完直接丢弃 -
as="image"不支持srcset，只适合确定尺寸和格式的单图；普通<img src>不需要它
link rel="preload" 应该放在 <head> 的哪个位置？
必须紧挨着 <meta charset="utf-8"> 和 <title> 之后，且一定在对应资源标签（如 <link rel="stylesheet"> 或 <script src>）之前。
- 如果放在
<body>里，或<title>之前，浏览器根本不会识别 - 如果放在
<link rel="stylesheet">后面，字体或关键 JS 可能已被触发下载，preload就变成重复请求 -
<meta charset>必须是<head>中第一个标签（或紧随<title>后），否则编码重解析会连带让preload失效
对 CSS 文件用 rel="preload" 会出什么问题？
直接写 <link rel="preload" href="main.css" as="style"> 会导致只下载不解析，页面仍白屏——因为 preload 不执行，也不触发 CSSOM 构建。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是加上
onload回调：onload="this.onload=null;this.rel='stylesheet'" - 或者改用
rel="stylesheet" media="print" onload="this.media='all'"这种兼容方案 - 别对非首屏 CSS、分析脚本、第三方 widget 用 preload，它们不参与关键渲染路径，只会抢带宽
真正起作用的不是代码有没有写，而是 Network 面板里 Initiator 列是否显示 preload、Priority 是否为 Highest 或 High、以及资源是否被后续真实请求复用。漏掉任一环，就只是多发了一个无效请求。
