预加载（Preloading）和预获取（Prefetching）预加载（Preloading）和预获取（Prefetch

预加载（Preloading）和预获取（Prefetching）都是前端优化技术，用于提高页面加载速度和用户体验。这两种技术在目的和应用场景上有所不同，但都能显著提升性能。下面详细介绍这两种技术的区别、应用场景以及实现方法。

1. 预加载（Preloading）

预加载是指在页面加载时提前加载关键资源，确保这些资源能够尽快准备好，从而提高页面的渲染速度和功能可用性。

应用场景

关键 CSS：确保页面样式能够立即应用。
关键 JavaScript：确保页面功能能够立即使用。
字体文件：确保页面字体能够立即显示。

实现方法

<link rel="preload"> ：使用 rel="preload" 属性提前加载关键资源。
```
html
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
```
- 关键 CSS：as="style" 表示提前加载样式表。
- 关键 JavaScript：as="script" 表示提前加载脚本文件。
- 字体文件：as="font" 表示提前加载字体文件。

优点

快速加载关键资源：确保页面关键资源在页面加载时已经准备好。
提高渲染速度：确保页面样式和功能能够立即应用。

2. 预获取（Prefetching）

预获取是指提前加载用户可能访问的下一个页面或资源，从而减少用户等待时间。预获取适用于用户即将访问的资源，而不是当前页面的关键资源。

应用场景

下一个页面：提前加载用户可能访问的下一个页面。
相关资源：提前加载相关资源（如图片、视频等）。

实现方法

<link rel="prefetch"> ：使用 rel="prefetch" 属性提前加载资源。
```
html
<link rel="prefetch" href="next-page.html">
<link rel="prefetch" href="image.jpg" as="image">
```
- 下一个页面：href="next-page.html" 表示提前加载下一个页面。
- 相关资源：as="image" 表示提前加载图片资源。

优点

减少用户等待时间：提前加载用户可能访问的下一个页面或资源，减少用户等待时间。
提高用户体验：确保用户在访问下一个页面时能够快速加载。

区别

目标不同：
- 预加载：提前加载当前页面的关键资源，确保这些资源能够立即使用。
- 预获取：提前加载用户可能访问的下一个页面或资源，减少用户等待时间。
应用场景不同：
- 预加载：适用于当前页面的关键资源（如 CSS、JavaScript、字体等）。
- 预获取：适用于用户可能访问的下一个页面或相关资源。
加载时机不同：
- 预加载：在当前页面加载时立即加载。
- 预获取：在当前页面加载时提前加载，但不一定立即使用。

示例代码

预加载示例

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Preloading Example</title>
    <link rel="preload" href="styles.css" as="style">
    <link rel="preload" href="script.js" as="script">
    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is an example of preloading.</p>
    <script src="script.js"></script>
</body>
</html>

预获取示例

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prefetching Example</title>
    <link rel="prefetch" href="next-page.html">
    <link rel="prefetch" href="image.jpg" as="image">
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is an example of prefetching.</p>
    <a href="next-page.html">Go to Next Page</a>
</body>
</html>

总结

预加载：提前加载当前页面的关键资源，确保这些资源能够立即使用。
预获取：提前加载用户可能访问的下一个页面或资源，减少用户等待时间。

通过合理使用预加载和预获取技术，可以显著提高页面加载速度和用户体验。在实际应用中，可以根据具体需求选择合适的技术来优化页面性能。