preload 必须同时指定 as 和 crossorigin 才能正确生效，漏写任一属性会导致字体加载失败或优先级降为 low；prefetch 仅在空闲时低优先级加载，不影响关键渲染，且需同源静态声明；preconnect 需加 crossorigin 才在 safari 生效，仅优化连接建立。
preload 必须带 as 和 crossorigin 才能生效
漏写 as，浏览器会当成普通 GET 请求处理，优先级降为 low，资源可能卡在队列末尾；漏写 crossorigin，字体类资源直接失败，控制台只报 CORS 错误，且无 fallback 机制。
常见错误写法：<link rel="preload" href="fonts/inter.woff2"> —— 缺 as 和 crossorigin，字体加载失败率超 70%。
-
as="font"用于字体，必须配crossorigin（即使同源） -
as="script"仅限动态 import 的模块，别对main.js重复 preload -
as="style"用于首屏关键 CSS，配合media属性做条件加载 - 验证方式：Chrome DevTools → Network → 查
Priority列，必须是high
prefetch 不会在 onload 前发起，也从不保证执行
写了 <link rel="prefetch" href="/js/step2.js"> 却看不到 Network 请求，大概率不是代码错，而是页面还没触发 window.onload，或主线程被长任务阻塞，或用户已跳转。
prefetch 是低优先级、空闲时才尝试的投机行为。它不参与关键渲染路径，对 FCP/LCP 零影响。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须放在
中静态声明，JS 动态插入基本无效 - 目标 URL 必须同源，
href="./step2.js"在子路由下会解析失败 - Chrome 默认过滤 prefetch 请求，需手动勾选 “prefetch” 过滤器才能看到
- 返回头必须含
Cache-Control: public, max-age=31536000，否则下次跳转仍要重下
多步表单里写 prefetch 是典型误用
表单每步跳转都触发完整页面生命周期，prefetch 只缓存 JS/CSS 字节流，不执行代码、不恢复状态、不预拉接口——用户点「下一步」后照样白屏、重请求、重校验。
真正瓶颈不在资源下载，而在整页 reload 和组件重复 mount。
- 别 prefetch 中间步骤资源，它们路径难预测、使用概率低、体积不可控
- 唯一可考虑的是最终提交页（如
/submit），且必须是纯静态、无参数、同源 - 更有效方案：改造成 SPA 路由 +
React.lazy懒加载 + 提前fetch()下一步数据 - prefetch 对
fetch()请求、JSON API、跨域字体全部无效
preconnect 要和 crossorigin 配合才在 Safari 生效
只写 <link rel="preconnect" href="https://api.example.com">，Safari 和旧版 Chrome 不会建立 TLS 连接，DNS 和 TCP 可能提前做了，但握手仍要等首次请求。
高频跨域 API 域名才值得 preconnect，别滥用——每个 preconnect 占一个 HTTP/2 连接槽位。
- 正确写法：
<link rel="preconnect" href="https://api.example.com" crossorigin> - 搭配
<link rel="dns-prefetch" href="https://api.example.com">可覆盖不支持 preconnect 的老浏览器 - 别对 CDN 域名 preconnect，除非你确认所有关键请求都走它（比如图片、JS 全托管）
- 验证方式：Network → 查看 Initiator 为
preconnect的条目，Timing 里 DNS/TLS 时间应显著缩短
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
