加了却没提速，因其仅提前发起请求而不控制执行时机；漏写 as="script"、integrity 不匹配、url 不一致或位置错误（未置于 最早处且在对应 前），均导致缓存无法复用或优先级降为 low。
为什么 <link rel="preload" as="script"> 加了却没提速
因为 preload 只管“提前发起请求”，不管“什么时候执行”。如果脚本本身是 <script src></script> 同步加载，浏览器仍会阻塞解析；如果是 async 或 defer，preload 能复用缓存，但不会改变执行时机。更关键的是：漏写 as="script"、没配 integrity（若原 <script></script> 有）、或脚本 URL 不完全一致，都会导致 preload 缓存无法命中。
-
as必须是"script"，写成"js"或省略 → 浏览器当普通 fetch，Priority 降为 Low - 原
<script src="main.js" integrity="sha256-..."></script>，preload 必须带相同integrity，否则缓存不复用 - URL 必须完全一致（含查询参数），
main.js?v=1和main.js?v=2视为两个资源 - preload 后脚本不会自动执行，必须保留原有
<script></script>标签，否则只下载不运行
<link rel="preload" as="script"> 的正确写法和位置
它必须出现在 中、<meta charset> 之后、所有对应 <script></script> 标签之前。放在 或靠后位置，浏览器可能已开始解析 JS，失去“抢时间”意义。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅ 正确顺序：
<meta charset="utf-8">→<link rel="preload" href="main.js" as="script">→<script src="main.js" defer></script> - ❌ 错误：插在
<link rel="stylesheet">下方，或动态用 JS 插入（document.createElement('link')） - ⚠️ 若脚本有
type="module"，preload 依然有效，但需确保crossorigin存在（模块脚本默认 CORS）
和 fetchpriority="high" 混用会怎样
fetchpriority 在 <link> 上对 rel="preload" 完全无效——preload 本身已锁定 Highest 优先级，再加 fetchpriority 是冗余且被忽略的。它只在 <link rel="stylesheet"> 上有调度意义（Chromium 112+ / Safari 17.2+），对 script 类型无作用。
- 不要写：
<link rel="preload" href="main.js" as="script" fetchpriority="high">（属性被静默丢弃） - 真正需要控制脚本调度时，优先用
defer或type="module"，它们天然参与浏览器加载队列排序 - 想验证是否生效？打开 Chrome DevTools → Network → 筛选
Initiator: preload，看 Priority 列是否为Highest
哪些脚本真该 preload，哪些纯属浪费
preload 的价值在于“浏览器发现太晚，但首屏立刻要用”。JS 文件若已通过 <script src></script> 直接声明，浏览器在 HTML 解析阶段就能发现，无需 preload。只有那些藏在内联代码、@import、或动态 import() 里的关键模块，才值得手动 preload。
- ✅ 该用：紧跟
<script type="module"></script>后的主 chunk（如app.[hash].js）、首屏依赖的 Web Component bundle、关键 polyfill（如regenerator-runtime） - ❌ 别碰：Analytics SDK、第三方评论框、非首屏轮播逻辑、所有带
async且无渲染依赖的脚本 - ⚠️ 特别注意：不要对
<script></script>内联代码 preload——它没有 URL，无法声明href，写了也无效
as、一次遗漏的 integrity、或一行放错位置的 <link>，都可能让预加载变成空转。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
