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 无异。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 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 兼容性差，部分浏览器直接拒收，优先保证同源

真正难的不是加哪行标签，而是判断“这个资源到底属于当前导航，还是下一个”。写错归属，性能优化就变成负优化。

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