link标签的加载模式：preload，prefetch以及默认的同步加载

最新推荐文章于 2025-05-22 10:21:56 发布

曹梦秋

最新推荐文章于 2025-05-22 10:21:56 发布

阅读量843

点赞数 15

CC 4.0 BY-SA版权

文章标签：前端 javascript web

本文链接：https://blog.youkuaiyun.com/dashuforever/article/details/146238132

最近面试问到了关于页面加载的时候link标签相关的问题，之前只知道preload和prefech有什么区别，以及具体的使用场景。于是有空仔细看了下文档：

<link> 标签中的 rel="preload" 和 rel="prefetch" 都是用于优化网页性能的，可以提前加载资源，但它们的目的和行为有所不同。

1. 用途

prefetch
- 目的：主要用于在浏览器空闲时预加载未来可能会使用的资源。这个资源可能在当前页面的响应周期后才会被需要，通常用于提高后续页面的加载速度。
- 示例：当用户正在浏览当前页面时，可以预先加载用户可能会点击的下一个页面的资源（例如样式表、脚本或其他媒体）。
```
<link rel="prefetch" href="next-page.html">
```
preload
- 目的：主要用于优先加载当前页面所需要的关键资源，确保这些资源尽早下载并准备好以提高信誉。
- 示例：如果你知道当前页面需要某个图片或 CSS 文件，使用 preload 可以确保它们在页面渲染的早期就被加载。
```
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="image.jpg" as="image">
```

2. 加载时机

prefetch
- 浏览器在空闲时下载这些资源。这意味着 prefetch 是一种低优先级的加载，通常在满足当前页面需求之后才处理。
preload
- 浏览器会立即加载这些资源，通常优先级更高，确保在当前页面的渲染过程中尽早获取这些文件。它是在渲染阶段的紧密集成的一部分。

3. 资源的使用范围

prefetch
- 专注于即将到来的页面或资源，适用于那些预测用户行为的场景。
preload
- 用于确保当前页面需要的资源可以尽早加载。适用于关键渲染路径中必不可少的资源。

4. 浏览器的处理方式

prefetch 和 preload 的优先级在大多数浏览器中有所不同，通常 preload 的优先级较高。preload 会被视为当前页面渲染的必要部分，而 prefetch 则是为了优化后续的体验。

所以：

prefetch：
- 用于在用户访问当前页面时，预加载未来可能用到的资源（降低延迟）。
- 加载优先级较低，通常在空闲资源时处理。
preload：
- 用于提前加载当前页面需要的关键资源（如样式表、脚本等）。
- 加载优先级较高，确保在页面渲染过程中尽早获取。

可是，如果预加载的目的是让资源尽早加载，为什么不直接放在head中同步加载，让资源必定会在渲染前加载完成？preload让资源异步加载的话，那岂不是反而让资源加载放在了渲染后？

事实上确实如此，这里涉及到了网页性能优化中的一些细微差别。使用<link rel="preload">和将资源同步加载（如通过<script>和<link rel="stylesheet">）各有利弊，下面详细解释一下为什么在某些情况下使用preload能够更有效地优化资源加载。

1. 同步加载 VS 异步加载

同步加载：使用<link rel="stylesheet">或没有任何属性的<script>标签等资源会阻塞HTML的解析，意味着浏览器在下载并解析这些资源之前，不会继续渲染其他内容。这保证了在渲染之前，相关资源确实是可用的。
```
<link rel="stylesheet" href="styles.css"> 
<script src="script.js"></script> 
```
异步加载 (如使用 preload)：
- 在使用preload加载资源时，资源会尽早开始下载，但不会对页面的解析和渲染造成阻塞。
- 这意味着页面的内容可以在浏览器开始解析和显示时仍在继续进行，而所需的资源（如 CSS 或 JavaScript）将并行下载。

2. 优先级和加载策略

资源的优先级：
- 一些资源（如重要的样式）在渲染过程中确实是必须的，放入<head>中以确保它们在渲染前加载是合适的。
- 但有些资源，特别是大文件（如图像、非关键 CSS）、某些 JavaScript 文件或不直接影响初次渲染的资源，使用preload允许它们在合适的时间加载，而不会因为一次性加载大量文件而导致页面解析延迟。

3. 减少渲染阻塞

降低阻塞渲染的风险：
- 如果所有内容都放在 <head> 中一并同步加载，尤其是当资源文件非常大或网络延迟较高时，可能导致较长的白屏时间，用户在页面没有内容呈现时等待的时间会变得更久。
- 使用 preload，可以在页面内容（如文本、布局等）开始呈现时并行下载同样重要的资源，提高用户体验。

4. 渲染性能优化

关键渲染路径：
- 理解“关键渲染路径”是优化的重要一环。通过识别哪些资源对于首屏内容至关重要，可以决定哪些应当同步加载，哪些可以异步加载。
- 在加载影响用户首次看到内容的资源时，使用同步加载是合适的；而对于其他非关键资源，则可以使用 preload，使得这些资源能在用户交互或进一步浏览时迅速可用。

所以：

在设计网页性能时， preload 提供了一种灵活的方式来优化资源的下载，而不必强制网页所有内容都同步加载，这样能够更好地平衡用户体验与资源的高效加载。通过合理使用 preload，开发者可以确保在不显著增加初始渲染时间的情况下提前获取和存储资源，为进一步的交互或更新增加平滑的体验。因此，虽然 preload 是异步加载，但它确实是一种带有优先级的策略，能够在不阻碍页面渲染的情况下，尽可能高效地获取重要资源。