preload必须写在最前面且静态声明，动态插入无效；as属性必须精准匹配资源类型并配齐crossorigin等要求，否则降级为low优先级；仅对浏览器发现太晚但首屏急需的资源（如@font-face字体、内联style背景图）有效，错用会抢带宽拖慢首屏。

preload必须写在最前面，动态插入完全无效

浏览器只在 HTML 解析初期（parser 阶段）识别 rel="preload"，一旦开始构建 DOM 或进入 ，后续的 <link rel="preload"> 就被忽略。JS 动态创建并 append 的标签，比如 document.createElement('link')，根本不会触发预加载——不报错、不警告，只是静默失效。

常见错误包括：

• 把 <link rel="preload"> 放在 <link rel="stylesheet"> 后面、<title></title> 下方，甚至塞进
• 在 React/Vue 的 useEffect 或 mounted 钩子中插入
• 用 innerHTML 往 追加（旧版 Safari 可能解析，但行为不可靠）

✅ 正确做法：服务端渲染时生成，或在 HTML 模板顶部硬编码，位置紧接 <meta charset> 之后、<title></title> 之前。

as属性必须准确匹配资源类型，漏写或写错等于没写

as 不是提示，是强制声明。浏览器靠它决定请求头、CSP 策略、缓存分区和优先级。填错或不填，Network 面板里 Initiator 显示为 (Other)，Priority 降为 Low，实际效果和没写一样。

典型配对必须严格满足：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• CSS 文件 → as="style"（不是 "stylesheet"）
• 字体（.woff2/.woff）→ as="font" + crossorigin（同源也必须加）
• JS 脚本 → as="script"（模块脚本也用这个，不用配 type="module"）
• 图片 → as="image"（as="img" 或 as="picture" 全部无效）
• JSON 接口 → as="fetch"，且响应头需含 Access-Control-Allow-Origin

漏掉 crossorigin 的字体 preload，Chrome 和 Safari 会直接跳过——FOIT 问题照旧，且控制台无报错。

preload只下载不执行，CSS 和字体要额外处理

<link rel="preload" href="main.css" as="style"> 只负责下载，不会解析、不会应用。如果再写一个 <link rel="stylesheet" href="main.css">，路径稍有差异（比如斜杠、大小写、查询参数），就会触发二次请求。

正确做法：

• CSS：<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
• 字体：必须带 crossorigin，且需配合 @font-face 中的 src URL 完全一致（含扩展名、查询参数）
• JS：preload 后仍需 <script src="app.js"></script>；若有 integrity，preload 也得带上，否则缓存不匹配
• 图片：as="image" 不支持 srcset 或 sizes，只适合确定尺寸/格式的单图；对普通 <img src> 无效，不如直接设 fetchpriority="high"

哪些资源真该用 preload，哪些千万别碰

rel="preload" 只对“浏览器本来看不见、但首屏立刻要用”的资源有效。浏览器只能自动发现 <img>、<script src></script>、<link rel="stylesheet"> 里的资源，以下几类常被“藏”着，导致 FOIT、FOUC 或首屏图延迟：

• ✅ 该用：@font-face 引用的字体（尤其 .woff2）、内联 <style></style> 里的 background-image、紧跟 <script type="module"></script> 后的主 chunk、首屏 <picture></picture> 中关键 <source></source>
• ❌ 别碰：analytics.js、非首屏轮播图、第三方 widget 脚本、懒加载模块、<img src>（直接设 fetchpriority="high" 更简单）

滥用会抢带宽、拖慢首屏，甚至白屏。验证是否生效不能只看 HTML 有没有那行——打开 Chrome DevTools → Network 面板，筛选 Initiator = preload，检查 Priority 是否为 Highest 或 High，Time 是否比未加前提前 200–600ms。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！