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，不过这取决于资源类型和使用方式。