# 共同点
- 浏览器资源加载优化机制，通过提前加载资源来提升页面性能
- 都是
<link> 属性 rel 的关键字（值）
# 不同点
| 特性 |
prefetch |
preload |
| 用途 |
未来页面导航所需资源的预获取 |
当前页面渲染的关键资源的提前加载 |
| 优先级 |
低，浏览器空闲时才加载 |
高，立即加载 |
| 应用场景 |
后续导航可能用到的资源（例如单页应用的下一页面） |
当前页面渲染需要的关键资源（如关键 CSS、JS 等） |
| 浏览器行为 |
不会立即使用，未来可能会用到的资源 |
页面需要立即使用的资源 |
| 影响页面渲染 |
不影响当前页面渲染 |
加速页面渲染，优化加载顺序 |
# 适用场合
prefetch 适合用在用户未来可能访问的页面、资源上，以便页面切换时加载更快。preload 适合用在当前页面的关键资源上，优化初次渲染时的资源加载顺序，确保关键资源不会被阻塞。
例子：
| <link rel="prefetch" href="/next-page.js" /> |
| <link rel="preload" href="/styles.css" as="style" /> |
| <link rel="preload" href="/script.js" as="script" /> |
| <link rel="preload" href="/image.jpg" as="image" /> |
使用 preload 需要指定资源类型 (as 属性)，如 script、style、image 等，以便浏览器正确处理这些资源。
