Link 标头
HTTP Link
标头提供了一种在 HTTP 标头中序列化一个或多个链接的方法。这允许服务器将客户端指向另一个包含有关所请求资源元数据的资源。此标头与 HTML <link>
元素具有相同的语义。使用 Link
标头的一个好处是,浏览器可以在 HTML 本身被获取和处理之前开始预连接或预加载资源。
实际上,大多数rel
链接类型在与 HTTP 标头一起使用时不起作用。例如,icon
关系仅在 HTML 中有效,而 stylesheet
在浏览器之间不可靠(仅在 Firefox 中)。唯一可靠的关系是 preconnect
和 preload
,它们可以与 103 Early Hints
结合使用。
头类型 | 响应标头、请求标头 |
---|---|
禁止请求头 | 否 |
CORS-safelisted 响应头 | 否 |
语法
Link: <uri-reference>; param1=value1; param2="value2"
<uri-reference>
-
URI 引用,必须用
<
和>
括起来并进行百分比编码。
参数
Link 标头包含参数,这些参数用 ;
分隔,并且等同于 <link>
元素的属性。值可以根据字段值组件规则进行引用或不引用,因此 x=y
等同于 x="y"
。
示例
将 URL 括在尖括号中
URI(绝对或相对)必须用 <
和 >
括起来
Link: <https://example.com>; rel="preconnect"
Link: https://bad.example; rel="preconnect"
编码 URL
URI(绝对或相对)必须对大于 255 的字符代码进行百分比编码
Link: <https://example.com/%E8%8B%97%E6%9D%A1>; rel="preconnect"
Link: <https://example.com/苗条>; rel="preconnect"
指定多个链接
您可以指定多个用逗号分隔的链接,例如
Link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect"
通过链接分页
Link
标头可以向客户端提供分页信息,这通常用于以编程方式访问资源
Link: <https://api.example.com/issues?page=2>; rel="prev", <https://api.example.com/issues?page=4>; rel="next", <https://api.example.com/issues?page=10>; rel="last", <https://api.example.com/issues?page=1>; rel="first"
在这种情况下,rel="prev"
和 rel="next"
显示上一页和下一页的链接关系,并且有 rel="last"
和 rel="first"
参数提供搜索结果的第一页和最后一页。
控制获取优先级
即使使用 preload
尽可能早地获取资源,不同类型的内容也会根据浏览器的内部优先级设置更早或更晚地获取。fetchpriority
属性可用于向浏览器提示特定资源对用户体验的影响与同类型其他资源相比更大或更小。
例如,以下标头可用于以高于其他样式表的优先级预加载 style.css
Link: </style.css>; rel=preload; as=style; fetchpriority="high"
请注意,获取资源的内部优先级设置和 fetchpriority
指令的效果都取决于浏览器。fetchpriority
指令应谨慎使用,并且仅在浏览器无法推断特定资源应以不同优先级处理的情况下使用。
规范
规范 |
---|
Web 链接 # 头 |
浏览器兼容性
加载中…
另见
103 Early Hints
<link>
- 链接关系 IANA 注册表
- 使用 Fetch Priority API 优化资源加载,了解此 API 如何影响 Chrome 上的优先级。