HTML中的pre-load 和 pre-fetch

当浏览器加载网页时，通常会遵循一个默认的流程，先加载 HTML、CSS 和 JavaScript，然后再加载图片、音频、视频等资源。这个默认的流程可能会导致网页加载速度变慢，用户体验不佳。因此，可以使用一些技术来优化网页加载的速度，其中之一就是按需加载。

按需加载是指根据用户实际需要，动态地加载资源，而不是一次性加载所有资源。这样可以减少页面加载时间，提高用户体验。

在按需加载中，HTML 提供了一些标识，如 pre-load 和 pre-fetch。

 

pre-load 和 pre-fetch 是两种 HTML 资源提示，它们用于告诉浏览器预先加载或获取资源，以便在页面上更快地显示内容。这两种技术的目的是优化用户体验，提高页面加载速度，降低用户感知到的延迟。下面分别介绍这两个标识：

 

 

pre-load（预加载）

pre-load 是一种资源提示，用于指示浏览器尽早请求并加载关键资源，以便在页面渲染过程中减少延迟。pre-load 用于那些页面需要立即使用的资源，如关键的 CSS、JavaScript 文件或者图像。在 HTML 中，可以使用 <link> 标签的 rel 属性设为 preload，来实现预加载。

示例：

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="image.jpg" as="image">

其中，href 属性指定要加载的资源路径，as 属性指定资源的类型，可以是 image、font、script、style 等。浏览器在加载资源时，会根据 as 属性的值，选择合适的加载方式。

 

 

pre-fetch（预获取）
pre-fetch 也是一种资源提示，它告诉浏览器在后台获取资源，以便在用户浏览其他页面时快速加载。与 pre-load 不同，pre-fetch 用于加载对当前页面不是关键性的资源，例如下一页可能用到的 CSS、JavaScript 文件或图像。这些资源在页面渲染时不会被立即使用，但可以在稍后用到时直接从缓存中获取。

示例：

<link rel="prefetch" href="next-page.css" as="style">
<link rel="prefetch" href="next-page-script.js" as="script">
<link rel="prefetch" href="next-page-image.jpg" as="image">

其中，href 属性指定要预先获取的资源路径。浏览器会在空闲时段，预先获取资源，以提高页面的访问速度。

需要注意的是，pre-fetch 可能会消耗用户的带宽和电量，因此在使用时需要慎重考虑。

 

总之，pre-load 和 pre-fetch 都是 HTML 中用于优化页面加载性能的资源提示技术。pre-load 主要用于加载当前页面的关键资源，而 pre-fetch 用于预获取可能在后续页面中用到的资源。这两种技术都可以通过 <link> 标签的 rel 属性来实现。

原文链接：https://www.cnblogs.com/ronaldo9ph/p/17309125.html