preload、preconnect、prefetch 的作用

preload、preconnect、prefetch 的作用

这些是现代 HTML 中用于 预加载资源（preloading resources）、预连接服务器（preconnecting to servers） 以及 预获取资源（prefetching resources） 的标签和属性，都是为了优化网页加载性能，尤其是在 首次渲染 时。

1. preload

作用：
在文档加载过程中，提前加载一些关键资源，如图片、字体、脚本、样式表等，以便在实际需要的时候更快地使用。它是 通过 <link> 标签 定义的，并且使用 rel="preload" 属性。

示例：

<link rel="preload" href="app.js" as="script">
<link rel="preload" href="style.css" as="style">

预览外部浏览器打开

特点：

• 预加载的资源可以是 任何 MIME 类型的文件。
• 资源会在页面解析的过程中加载，可能 提前于 onload 事件。
• 必须显式地指出资源类型（as 属性）以优化加载顺序。
• 在服务端返回的时候，浏览器就会开始加载指定的资源。

好处：

• 用于关键资源的提前加载（如 JavaScript、CSS、字体）以提升性能。
• 可结合 media 属性使用（如 media="notprint"）来控制资源是否只在特定场景下加载。

2. preconnect

作用：
预连接到远程服务器，以便在需要的时候更快地建立 TCP 连接。
这是通过 <link> 标签的 rel="preconnect" 来实现的。

示例：

<link rel="preconnect" href="https://fonts.googleapis.com">

预览外部浏览器打开

特点：

• 用于提前建立与远程服务器的连接，包括 DNS 解析 和 TCP 手shake。
• 预连接帮助减少网络延迟，特别是在第一次访问其他站点时。
• 如果资源已经在缓存中，可以避免重新连接。
• 必须指定 href（目标服务器地址）和可选的 rel="preconnect"，但 as 属性不可用。

好处：

• 提前准备网络连接路径，提升后续资源加载的速度。
• 特别适用于常用的第三方资源（如字体、CDN、API）。
• 可配合 crossorigin 这个属性使用以支持 CORS。

3. prefetch

作用：
用于预获取资源，这些资源通常是页面中将要用到的（例如下一页面），但不一定需要立即执行。
这是通过 <link> 标签的 rel="prefetch" 来实现的。

示例：

<link rel="prefetch" href="/next-page.html">

预览外部浏览器打开

特点：

• 通常用于非关键的资源或文件，如下一页面、图片等。
• 资源会在当前页面的加载（onload 事件）之后加载，但是在空闲时间进行的。
• 适合用于前端导航时的页面预加载。
• 不会阻塞当前页面的渲染，更多是浏览器后台加载。

好处：

• 预加载接下来可能会访问的页面（如链接点击后的页面或锚点页面），大幅降低首次访问的延迟。
• 可以用来加载图片或 CSS，也可以用来加载 JavaScript，不过这取决于资源类型和使用方式。