与“预”相关的 link rel 属性值简单介绍

与“预”相关的 link rel 属性值简单介绍

引言

在网络开发中，优化网站性能至关重要。其中，预加载技术发挥着至关重要的作用，它允许浏览器提前下载和缓存资源，从而提升加载速度和用户体验。link rel 属性值提供了预加载功能，本文将深入浅出地介绍与“预”相关的 link rel 属性值及其作用。

preload

作用： 用于声明哪些资源需要在浏览器主渲染机制介入前进行预加载。

语法：

<link rel="preload" href="path/to/resource" as="resource-type" />

参数：

• href：要预加载的资源的 URL。
• as：指定资源的类型，可以是以下值之一：
  • script：脚本文件
  • style：样式表
  • image：图像文件
  • font：字体文件
  • media：媒体文件

例子：

<link rel="preload" href="main.css" as="style" />
<link rel="preload" href="logo.png" as="image" />

prefetch

作用： 用于声明哪些文档和资源在将来有可能被访问，浏览器可以提前加载这些资源，以减少后续加载时的延迟。

语法：

<link rel="prefetch" href="path/to/resource" />

参数：

• href：要预取的资源的 URL。

例子：

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

prerender

作用： 用于声明一个链接页面，浏览器会提前解析和渲染该页面，并在用户点击链接时快速显示。

语法：

<link rel="prerender" href="path/to/page" />

参数：

• href：要预渲染的页面的 URL。

例子：

<link rel="prerender" href="article.html" />

其他相关属性

除了上述主要属性外，还有一些其他与“预”相关的 link rel 属性值：

• preconnect： 用于声明一个远程服务器，浏览器会建立一个持久连接，以减少后续请求的延迟。
• dns-prefetch： 用于预解析一个域名的 DNS 记录，以加快后续加载资源的速度。

SEO 优化

这些预加载属性可以帮助改善网站的 SEO。通过提前加载关键资源，浏览器可以在用户点击链接之前呈现网站的内容，从而提升页面加载速度，提高用户体验和搜索引擎排名。

---