rel=“dns-prefetch“和rel=“preconnect“ 结合使用，以及link属性的详细介绍

使用 dns-prefetch

DNS-prefetch 尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。

为什么要使用 dns-prefetch？

当浏览器从（第三方）服务器请求资源时，必须先将该跨源域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少此延迟，但 DNS 解析可能会给请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。

dns-prefetch 可帮助开发人员掩盖 DNS 解析延迟。HTML <link> 元素通过设置 rel 属性值为 dns-prefetch 提供此功能。然后在 href 属性中指明要跨源的域名：

语法

HTMLCopy to Clipboard

<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

示例

HTMLCopy to Clipboard

<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><link rel="dns-prefetch" href="https://fonts.googleapis.com/" /><!-- 其他 head 元素 --></head><body><!-- 你的页面内容 --></body>
</html>

每当站点引用跨源资源时，都应在 <head> 元素中放置 dns-prefetch 提示，但是要记住一些注意事项。

最佳实践

请记住以下三点：

首先，dns-prefetch 仅对跨源域上的 DNS 查找有效，因此请避免使用它来指向你的站点或域。这是因为，到浏览器看到提示时，你的站点背后的 IP 已经被解析了。

其次，还可以通过使用 HTTP Link 字段将 dns-prefetch（以及其他资源提示）指定为 HTTP 标头之一：

HTTPCopy to Clipboard

Link: <https://fonts.googleapis.com/>; rel=dns-prefetch

再其次，考虑将 dns-prefetch 与 preconnect 提示配对。dns-prefetch 只执行 DNS 查询，而 preconnect 则是建立与服务器的连接。这个过程包括 DNS 解析，以及建立 TCP 连接，如果是 HTTPS 网站，就进一步执行 TLS 握手。将这两者结合起来，可以进一步减少跨源请求的感知延迟。你可以像这样安全地将它们结合起来使用：

HTMLCopy to Clipboard

<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

备注： 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。preconnect 提示最好仅用于最关键的连接。对于其他的连接，只需使用 <link rel="dns-prefetch"> 即可节省第一步——DNS 查询——的时间。

配对这些提示的逻辑是因为对 dns-prefetch 的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到 dns-prefetch 来获得更多好处。由于这是 HTML 特性，因此容错性很强。如果不支持的浏览器遇到 dns-prefetch 提示（或任何其他资源提示），则网站不会中断，只是不会获得它提供的好处。

一些资源（如字体）以匿名模式加载。在这种情况下，应使用预连接提示设置 crossorigin 属性。如果省略了它，则浏览器将仅执行 DNS 查找。

转自：使用 dns-prefetch - Web 性能 | MDN

扩展：

<link>标签可以包含以下属性：

as：指定被链接资源的类型。
crossorigin：指定如何处理跨域请求。
disabled：禁用被链接资源的加载。
href：指定被链接文档的URL。
hreflang：指定被链接文档的语言。
media：指定被链接样式表适用的媒体类型。
rel：指定当前文档与被链接文档之间的关系。
sizes：指定被链接资源的尺寸。
title：指定被链接资源的标题。
type：指定被链接文档的MIME类型。
integrity：用于验证资源完整性。
referrerpolicy：指定请求的Referer HTTP头部的策略。

当使用<link>标签引入外部资源时，可以使用以下属性来进一步定义资源的相关信息：

as属性：指定被链接资源的类型，用于告诉浏览器资源的实际类型，以便更好地处理和优化加载。例如：

<link rel="preload" href="font.woff2" as="font">

crossorigin属性：指定如何处理跨域请求。常用值包括：

anonymous：不发送用户凭据（如cookie）。

use-credentials：发送用户凭据。

例子：<link rel="stylesheet" href="styles.css" crossorigin="anonymous">

disabled属性：禁用被链接资源的加载。当设置为disabled时，该资源不会被加载。例如：

<link rel="stylesheet" href="styles.css" disabled>

href属性：指定被链接文档的URL。指定外部资源的路径。例如：

<link rel="stylesheet" href="styles.css">

hreflang属性：指定被链接文档的语言。用于指定被链接文档的语言。例如：

<link rel="alternate" href="alternate.html" hreflang="en">

media属性：指定被链接样式表适用的媒体类型。例如，media="screen"表示样式表适用于屏幕显示。示例：

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

rel属性：指定当前文档与被链接文档之间的关系。常用值包括：

stylesheet：被链接文档是一个样式表。

icon：被链接文档是一个图标。

例子：<link rel="stylesheet" href="styles.css">

sizes属性：指定被链接资源的尺寸。用于指定被链接资源的尺寸。例如：

<link rel="icon" href="favicon.ico" sizes="16x16">

title属性：指定被链接资源的标题。用于指定被链接资源的标题。例如：

<link rel="stylesheet" href="styles.css" title="Main Stylesheet">

type属性：指定被链接文档的MIME类型。用于指定被链接文档的MIME类型。例如：

<link rel="stylesheet" href="styles.css" type="text/css">

integrity属性：用于验证资源完整性，可以防止资源被篡改。可以设置为包含资源的哈希值的字符串。示例：

<link rel="stylesheet" href="styles.css" integrity="sha256-BXC3tFv8X7lS8wCHZt7zq7e8w3mGqf3a">

referrerpolicy属性：指定请求的Referer HTTP头部的策略。常用值包括：

no-referrer：不发送Referer头部。

no-referrer-when-downgrade：在SSL连接时不发送Referer头部。

例子：<link rel="stylesheet" href="styles.css" referrerpolicy="no-referrer">

<link>标签中的rel属性用于定义当前文档与被链接文档之间的关系。以下是常见的rel属性值及其含义：

alternate：指定当前文档的备用版本。常用于指定不同语言版本或格式的备用文档。
stylesheet：指定被链接文档是一个样式表。
icon：指定被链接文档是一个图标。
preload：指定被链接资源应该在页面加载时预加载。
canonical：指定当前文档的规范URL，用于指定页面的主要版本。
dns-prefetch：指定被链接资源的域名应该进行DNS预解析。
preconnect：指定被链接资源应该在页面加载前进行连接。
prefetch：指定被链接资源应该在页面加载时预取。
prerender：指定被链接资源应该在后台进行预渲染。
search：指定当前文档是一个搜索入口。
next：指定当前文档是下一个文档。
prev：指定当前文档是前一个文档。
help：指定当前文档是一个帮助文档。
license：指定当前文档是一个许可证文档。

<link>标签中常用的rel属性值及其详细含义：

alternate：指定当前文档的备用版本。常用于指定不同语言版本或格式的备用文档。例如，<link rel="alternate" href="alternate.html" hreflang="en">表示提供英语版本的备用文档。
stylesheet：指定被链接文档是一个样式表。例如，<link rel="stylesheet" href="styles.css" type="text/css">用于引入外部样式表。
icon：指定被链接文档是一个图标。通常用于指定网站的favicon。例如，<link rel="icon" href="favicon.ico" sizes="16x16">用于指定网站的图标。
preload：指定被链接资源应该在页面加载时预加载。可以用于提前加载页面所需的资源，以加快页面加载速度。例如，<link rel="preload" href="image.jpg" as="image">用于预加载图片资源。
canonical：指定当前文档的规范URL，用于指定页面的主要版本。可以帮助搜索引擎确定页面的主要版本。例如，<link rel="canonical" href="https://www.example.com/page.html">用于指定规范URL。
dns-prefetch：指定被链接资源的域名应该进行DNS预解析。可以提前解析域名，以减少域名解析时间。例如，<link rel="dns-prefetch" href="//example.com">用于DNS预解析域名。
preconnect：指定被链接资源应该在页面加载前进行连接。可以提前建立连接，以减少资源加载时间。例如，<link rel="preconnect" href="https://example.com">用于预连接资源。
prefetch：指定被链接资源应该在页面加载时预取。可以提前获取资源，以加快后续资源加载速度。例如，<link rel="prefetch" href="image.jpg" as="image">用于预取图片资源。
prerender：指定被链接资源应该在后台进行预渲染。可以在后台渲染页面，以提前展示给用户。例如，<link rel="prerender" href="https://www.example.com/page.html">用于预渲染页面。
search：指定当前文档是一个搜索入口。用于指定当前页面是一个搜索入口页面。例如，<link rel="search" href="/search" title="Search">用于指定搜索入口。
next：指定当前文档是下一个文档。用于指定当前页面的下一个文档。例如，<link rel="next" href="next.html">用于指定下一个文档。
prev：指定当前文档是前一个文档。用于指定当前页面的前一个文档。例如，<link rel="prev" href="prev.html">用于指定前一个文档。
help：指定当前文档是一个帮助文档。用于指定当前页面是一个帮助文档。例如，<link rel="help" href="/help" title="Help">用于指定帮助文档。
license：指定当前文档是一个许可证文档。用于指定当前页面是一个许可证文档。例如，<link rel="license" href="/license" title="License">用于指定许可证文档。

Canonical标签

Canonical标签应该有一部分人是有一点了解的，主要是用于放我们的网站不可避免的出现了相同内容的东西有几个url地址的情况，这个时候可以在head标签之添加一行Canonical的标签指定一个标注页面的地址，告诉搜索引擎按照哪个链接作为标准版本，有利于降低相同内容收录导致权重分散的情况。

搜索引擎会通过算法对网页内容及链接进行识别，对内容完全相同或者高度相似的网页，会计算出一个系统认为规范的网页结果建立索引并供用户查询。支持Canonical标签以后，站长可以通过将元素和rel="canonical"属性添加到该网页非规范版本的部分，为搜索引擎指定规范网页。添加此链接和属性可以告诉搜索引擎：“在内容相同或高度相似的所有网页中，该网页为最规范最有价值的页面，推荐将该网页排在搜索结果中靠前的位置。”可通过在每个非规范版本的HTML网页的部分中，添加一个rel="canonical"链接来进行指定规范网址。

rel="canonical" 可与相对链接或绝对链接一起使用，但建议使用绝对链接，以最大程度地减少可能出现的混乱或问题。如果网站需要更换域名，且使用的服务器不能创建服务器端重定向网址的情况下，就可以使用rel="canonical" 链接元素指定希望百度收录域的网址。用法是

使用Canonical 标签时要特别注意的两点

1，百度虽然支持Canonical标签，但并不保证完全遵守该标签。请站长注意，最好在完全相同的网页中使用Canonical标签——这样可以提升Canonical标签的使用效果。之前的帮助文档中的确提到高度相似的网页也可以使用Canonical标签，但在实际过程中我们发现，相似网页使用Canonical标签的成功率较低。

2，还有一点非常非常重要，请各位站长在设置Canonical标签前，仔细检查两个网页是否真的完全相同——一旦百度发现其中一个Canonical标签有问题，会不信任该站点的所有Canonical标签。

alternate标签

如今移动的流量越来越大，可以说不属于PC端的流量，因此也就越来越多的站长么开始优化移动端的排名，但是我们会发现pc如果简单的做个响应式、适配还是会很在灵活性的问题，尤其时结构比较复杂的网站，可以说只有单独建立移动站点，才能更好的满足业务需求，但是虽然说移动和PC是两个站点了，但是本质上是一个网站，内容都是一份的只是结构和排版上有点区别而已，一方面我们可以站长后台提交适配规则来解决，PC和移动页面的URL对应关系。

同时我们可以采用alternate和Canonical标签来完善这个问题，我们可以在pc端加上，在移动页面加上；通过在PC端和移动使用对应的标签来指定对应页面的地址，来告诉搜索引擎pc和移动的关系结构。

link标签的属性
我们知道标签就是定义文档与外部的关系，它最常见的的用途是链接样式表。通常写的时候它只存在head部分中，不过它可以出现任何次数。接下来我们具体的分析一下link标签中的属性：

href
规定被连接文档的位置

<link rel='stylesheet'  href='./ease.css' type='text/css'  />

hreflang
规定被链接文档中文本的语言
*几乎没有主流浏览器支持

media
规定被链接文档被显示在什么设备上

*rel
规定当前文档与被链接文档之间的关系

1.pingback
pingback是网志中常用的用来通知网志系统文章被引用情况的一种手段，当其他人链接至Web作者的网页时，Web作者将获取通知。这个方法使得Web作者可以追踪什么人链接至他的文章。

<link rel="pingback" href="www.fujieace.com/xmlrpc.php" />

2.profile

<link rel="profile" href="http://gmpg.org/xfn/11">

我们经常在模板中经常会看到如下 link 标签，这个到底有什么用呢？
不同浏览器可以根据自己设定的默认样式来呈现网页，比如你把朋友定义成“friend”，而我要按照拼音来定义成“pengyou”，彼此之间无法统一，该功能就变得没有丝毫的意义。所以我们在HTML文档的标签中使用 profile 属性引入一个声明，声明在这个HTML文档中使用了 XML Friends Network (XFN) 微格式，然后按照这份XFN微格式中约定的方式来描述关系网络，于是即使是不同用户代理器访问这些数据只要其遵循XFN的约定即可正确的读取出其中的关系数据。

3.canonical
移动站rel="canonical"标签是为了解决网站由于网站url链接不一样但网页内容是一样而造成百度重复收录的问题，对于这样的情况，如果不采用百度rel="canonical"标签，后果将导致百度对两个相同的网页收录和排名的问题上不知情，久而久之，当网站存在大量这样的网页的时候，可能导致网站大量重复内容而被降权、不收录甚至被K。

使用rel="canonical"标签的基本样式：<link rel="canonical"  href="网页权威链接"/>

写好这段代码之后，将其放入非权威的网页的头部中即可。

4.dns-prefetch
浏览器主动去执行域名解析的功能,DNS预获取 dns-prefetch 提升页面载入速度
DNS Prefetch，即DNS预获取，是前端优化的一部分。一般来说，在前端优化中与 DNS 有关的有两点：一个是减少DNS的请求次数，另一个就是进行DNS预获取。

<link rel="dns-prefetch" href="//api.share.zhix.net">

5.preconnect
浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。

<link rel="preconnect" href="//example.com">

6.prefetch
能够让浏览器预加载一个资源（HTML，JS，CSS或者图片等），可以让用户跳转到其他页面时，响应速度更快。

<link rel="prefetch" href="/library.js" as="script">

7.prerender
prerender不仅会加载资源，还会解执行页面，进行预渲染，但是这都是根据浏览器自身进行判断。
浏览器可能会
1.分配少量资源对页面进行预渲染
2.挂起部分请求直至页面可见时
3.可能会放弃预渲染，如果消耗资源过多

<link rel="prerender" href="//example.com/next-page.html">

8.alternate
在PC站点当中,在前加入

<link rel="alternate" href="http://m.abc.com/">

在对应的移动站点中前加入

<link rel="canonical" href="http://www.abc.com/">

9.stylesheet
文档的外部样式表。

<link rel='stylesheet' href='style.min.css' type='text/css' media='all' />

10.icon
为网页标题添加自定义图标

<link rel="icon" href="https://xxx/wp-content/uploads/2019/12/VidMate-fav.png" sizes="64x64" />

type 属性
type 属性规定被链接文档的 MIME 类型。

该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。

<link rel="stylesheet" type="text/css" href="theme.css" />

最下面的link标签的属性原文链接：https://blog.csdn.net/meng2lin/article/details/105725584