当前位置：首页 > news >正文

前端性能优化-web资源加载优先级

news 2025/6/24 3:31:01

前言

资源加载优先级是指在页面渲染的过程中，浏览器决定加载哪些资源并优先加载它们的一种机制。正确配置资源加载的优先级可以显著改善页面加载性能，确保关键资源优先加载，提高用户感知的加载速度。

Web 资源加载方式

同步加载

同步加载是指浏览器在加载 HTML 页面时，按照资源出现的顺序依次加载和解析，每个资源加载完成后才会继续加载下一个资源。

当浏览器遇到一个资源请求（如<script>、<link>、<img>）时，会立即发送请求并阻塞页面渲染，直到该资源加载完成。这种方式可以确保资源按顺序执行，但也可能导致页面阻塞，特别是对于较大的资源。

异步加载

异步加载是指浏览器在遇到异步资源时，会继续渲染页面而不等待该资源的加载和执行，从而提高页面的加载性能。

通过设置 <script> 标签的 async 或 defer 属性，可以实现脚本的异步加载。异步脚本在下载过程中不会阻塞页面的渲染，但执行时可能会影响到正在进行的渲染。

预加载（Preload）

预加载是一种通过告知浏览器提前加载将来可能会用到的关键资源的机制，以便在需要时能够更快地获取这些资源。预加载通常用于加载与当前页面交互无关但在后续页面中可能会用到的资源，比如异步加载的脚本、字体、图片等

我们可以通过在页面的<head> 部分使用 <link> 元素来指定预加载资源。

<!-- 预加载样式表 -->
<link rel="preload" href="styles.css" as="style" /><!-- 预加载脚本 -->
<link rel="preload" href="script.js" as="script" /><!-- 预加载图片 -->
<link rel="preload" href="image.jpg" as="image" />

适用场景：

关键资源优化：预加载适用于首屏渲染所需的关键资源，如页面的主样式表、主脚本等。通过在页面加载过程中提前加载这些关键资源，可以提高页面加载速度。
异步加载的资源：适用于那些在页面加载时不会立即使用，但在稍后可能会用到的资源。例如，异步加载的脚本、字体或一些后续页面中可能用到的图片。
资源依赖关系：当某个资源依赖于其他资源时，预加载可以确保这些依赖资源在需要时已经被提前加载。
关键用户路径优化：针对一些特定的用户路径，预加载可以确保用户在进行特定操作时所需的资源已经就绪，提高用户体验。

预取（Prefetch）

预取（Prefetch）是一种告知浏览器在空闲时提前获取将来可能会用到的资源的机制，以便在用户导航到相关页面时能够更快地加载这些资源。预取通常用于加载与当前页面无关但在用户即将访问的下一个页面中可能会用到的资源，以提高用户在导航时的加载速度。

我们通过在页面的部分使用元素来指定预取资源。

<!-- 预取样式表 -->
<link rel="prefetch" href="styles.css" as="style" /><!-- 预取脚本 -->
<link rel="prefetch" href="script.js" as="script" /><!-- 预取图片 -->
<link rel="prefetch" href="image.jpg" as="image" />

适用场景：

下一页面的资源：预取适用于加载用户即将访问的下一个页面所需的资源。通过在当前页面上提前获取下一个页面可能用到的资源，可以在用户导航时提高加载速度。

一个项目中的具体例子是项目课件详情页需要加载进行课件解析的内容，而且用户大概率会进入到课件解析页，这时候就可以使用预取来提前加载课件解析页的资源，以提高用户在导航时的加载速度。

预取用户可能浏览的内容：预取可以用于加载用户可能浏览的内容，例如懒加载的图像、异步加载的组件等。

预渲染（Prerender）

预渲染是一种在用户尚未点击链接之前提前加载并渲染链接指向的页面的技术。它实际上是在后台构建并渲染下一个页面，以便在用户导航至该页面时可以瞬间呈现。

我们使用<link> 元素的 rel 属性来指定预渲染。

<!-- 预渲染下一个页面 -->
<link rel="prerender" href="next-page.html" />

适用场景：预渲染通常适用于对用户体验要求极高的场景，例如单页应用（SPA）中的某个视图或特定的 landing 页面。

Fetch Priority

Fetch Priority（获取优先级）是一种在网络请求时指定资源加载优先级的机制。它允许开发者通过设置优先级，控制浏览器在处理多个请求时哪些资源应该首先被获取和加载。 Fetch Priority 主要用于优化页面加载性能，确保关键资源能够尽快加载，提高用户体验。

在发起网络请求时，可以通过设置请求的 priority 参数来指定资源的优先级。优先级分为 “very-low”、“low”、“medium”、“high”、“very-high” 五个级别。

fetch("example.jpg", { priority: "high" }).then((response) => response.blob()).then((data) => {// 处理获取到的数据});

注意事项

兼容性： Fetch Priority 可能不被所有浏览器完全支持，因此在使用时需要注意浏览器的兼容性。
网络条件：实际的资源加载优先级可能受到网络条件的影响，例如在弱网络环境下，即使设置了高优先级，也可能因为网络延迟而无法立即获取资源。
合理使用： Fetch Priority 应该根据具体的页面需求合理使用，不宜过度设置，以免产生不必要的网络负担。

总结

资源加载方式	适用场景	示例代码
同步加载	关键脚本、必要资源	`<script src="main.js"></script>`
异步加载	非关键脚本、提高性能	`<script async src="analytics.js"></script>`
预加载 (Preload)	关键资源、异步加载资源、资源依赖关系	`<link rel="preload" href="style.css" as="style">`
预取 (Prefetch)	下一个页面的资源、提前加载用户可能浏览的内容	`<link rel="prefetch" href="next-page.html">`
预渲染 (Prerender)	对用户体验要求极高的场景	`<link rel="prerender" href="next-page.html">`
Fetch Priority	精细化控制资源加载顺序、网络请求优先级	`fetch('example.jpg', { priority: 'high' })`

本文首发于个人博客前端开发笔记，由于笔者能力有限，文章难免有疏漏之处，欢迎指正

前言