Preload用于当前页关键资源，需指定as和fetchpriority；Prefetch用于未来页，低优先级且无需指定属性；二者须结合构建工具与路由逻辑，并通过DevTools验证Priority和Waterfall。
预取（Prefetch）和预加载（Preload）是浏览器原生支持的两种资源提示机制，它们不改变资源本身，而是通过提前干预加载时机与优先级，显著优化用户体验。关键区别在于：Preload 服务于当前页面，确保关键资源“马上要用、立刻就下”；Prefetch 则面向未来，利用空闲带宽为可能跳转的下一页准备资源。
明确用途：别把 Prefetch 当 Preload 用
混淆两者最直接的后果是带宽浪费或阻塞渲染。例如：
-
Preload适合首屏必需但发现较晚的资源：比如在
<head>中声明<link rel="preload" href="main.css" as="style">，能避免 CSS 阻塞解析；再如<link rel="preload" href="hero.webp" as="image" fetchpriority="high">可让首屏大图抢占下载队列。 -
Prefetch适合用户行为可预测的后续页：比如电商列表页中，根据点击热区预取前3个商品详情页的 JS 和关键 CSS：
<link rel="prefetch" href="/product/123.js">，用户点进去时已缓存，秒开。
正确写法：as 属性和优先级不能省
Preload 必须指定 as 属性，否则浏览器无法判断资源类型，可能重复下载或降级为普通请求。常见值包括 script、style、font、image、document 等。
同时，配合 fetchpriority 可微调紧迫性：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
fetchpriority="high"：适用于首屏核心图像或字体，强制提升队列位置； -
fetchpriority="low"：适合非视口内、交互后才用的资源，避免抢带宽。
Prefetch 不支持 as 或 fetchpriority，它默认低优先级，只在当前页加载完成后才开始，无需手动干预优先级。
搭配使用：和代码分割、懒加载形成闭环
单独加 Preload/Prefetch 效果有限，必须嵌入构建流程和路由逻辑：
- Webpack/Vite 中结合动态
import()+/* webpackPrefetch: true */注释，自动注入 Prefetch 标签； - React Router 或 Vue Router 的路由组件，对
lazy(() => import('./NextPage'))同时配置 Prefetch，实现“用户悬停时预取，点击即响应”； - 首屏图片用 Preload，非首屏图片保留
loading="lazy"，避免预加载挤占关键资源带宽。
验证与避坑：用开发者工具盯紧 Priority 和 Waterfall
打开 Chrome DevTools 的 Network 面板，重点关注两列：
-
Priority：Preload 资源应显示为 Highest 或 High；Prefetch 应为 Low；若 Preload 显示 Medium 或 Low，说明漏了
as或路径错误； - Waterfall：观察 Preload 是否在 HTML 解析早期就开始下载；Prefetch 是否出现在主资源（HTML、CSS、JS）之后；若有大量 Prefetch 并发，导致当前页加载变慢，需限制数量（一般不超过3个）。
