preload会抢占带宽导致LCP延迟300ms，prefetch在移动端等场景常被忽略；as属性必须正确设置以确保优先级和缓存复用，且preload须置于head内靠前位置。
preload 会抢带宽，prefetch 几乎不抢
浏览器对 rel="preload" 的请求标记为 Highest 或 High 优先级，一解析到就发请求，可能挤掉 critical.css 或首屏图片；rel="prefetch" 默认是 Low，只在 onload 后空闲时发起，网络忙或内存吃紧时直接跳过。
- 实测：把本该
prefetch的detail.js改成preload，LCP 拖慢 300ms -
prefetch在移动端、节电模式、2G 网络下大概率被忽略 - 不要用
prefetch加首屏图——它根本等不到渲染开始
as 属性漏写或写错，preload 就失效
as 不是可选装饰，它决定浏览器怎么发请求：是否带 CORS 头、用什么优先级、缓存是否复用。漏写或类型错，Priority 直接掉到 Medium，和普通 fetch 无异。
-
as="font"必须配crossorigin，Chrome 120+ 即使同域也强制检查 -
as="style"需手动触发解析：onload="this.onload=null;this.rel='stylesheet'" -
as="image"不支持srcset或sizes，只适合确定尺寸的单图 -
as="script"若后续<script src></script>带integrity，preload也得带上，否则缓存不匹配
位置放错，preload 根本不触发
preload 必须写在 里，且越靠前越好——浏览器解析到就发请求，不等 DOM 构建。放错位置等于白写。
- ✅ 正确位置：紧贴
<meta charset>后、<title></title>前 - ❌ 错误位置：跟在
<link rel="stylesheet">下方；或用document.createElement('link')动态插入；或放在里（完全无效）
prefetch 的 as 值必须合法，否则降级为普通 fetch
prefetch 虽然不强制要求 as，但浏览器靠它推断资源用途和缓存策略。写错或不写，可能被忽略，或加载后无法复用。
立即学习“前端免费学习笔记（深入）”；
- 合法值包括：
document、script、style、image、font等，不能写json或自定义字符串 - 预取整页 HTML？用
as="document"，不是as="html" - 跨域
prefetch兼容性差，部分浏览器直接拒收，优先保证同源
