无需登录 数据私有 本地保存

HTTP/2 Server Push测试 - Link头解析

13
0
0
0

HTTP/2 Server Push 测试 — Link 头解析器

解析 HTTP Link 响应头，验证 rel=preload 推送配置，快速调试 HTTP/2 Server Push。

快速示例：
如何获取 Link 响应头？
1
浏览器开发者工具

F12 → Network → 选中请求 → Response Headers → 找到 link 头 → 右键复制值

2
curl 命令

curl -I https://example.com 查看响应头，复制 link: 行

3
在线检测工具

使用 nghttp 或在线 HTTP/2 检测服务获取完整响应头信息

HTTP/2 Server Push & Link 头 — 常见问题

HTTP/2 Server Push 是一种服务器主动向客户端推送资源的机制。当客户端请求一个页面时，服务器可以提前推送该页面所需的 CSS、JS、图片等资源，而无需等待客户端解析 HTML 后再逐个请求。这减少了往返延迟（RTT），加快页面加载速度。服务器通过 Link 响应头声明要推送的资源，格式为 Link: </style.css>; rel=preload; as=style。浏览器接收到推送后会将资源缓存，当页面真正需要时直接使用缓存内容。

根据 RFC 5988 / RFC 8288，Link 头的标准格式为：
Link: <URL>; param1=value1; param2=value2

多个链接用逗号分隔。常用参数包括：
• rel — 关系类型，如 preload、preconnect、stylesheet
• as — 资源类型（preload 时必须），如 style、script、image、font、fetch
• crossorigin — 跨域属性，值通常为 anonymous 或 use-credentials
• type — MIME 类型，如 text/css、application/javascript
• nopush — 明确告知不要推送该资源（HTTP/2 特有）
• media — 媒体查询条件

rel=preload：告诉浏览器预先加载并缓存指定资源，适用于当前页面确定会使用的关键资源（CSS、JS、字体、图片等）。需要配合 as 属性使用，浏览器才能正确设置优先级和缓存策略。

rel=preconnect：仅提前建立与第三方域的连接（DNS 解析 + TCP 握手 + TLS 协商），不加载具体资源。适用于即将使用的跨域资源，如 CDN、API 域名。它比 preload 更轻量，适合不确定具体资源路径但确定需要跨域连接的场景。

两者可以组合使用：先用 preconnect 建立连接，再用 preload 加载关键资源。

验证 Server Push 的几种方法：
1. 浏览器 DevTools：F12 → Network 标签 → 查看资源的 "Initiator" 列，如果显示 "Push" 则表示来自服务器推送。
2. HTTP/2 检测工具：使用 nghttp -v https://example.com 查看推送流。
3. 检查响应头：查看页面请求的响应头中是否包含 Link 头及 preload 指令。
4. 使用本工具：将响应头中的 Link 值粘贴到解析器中，验证格式是否正确。
5. Chrome net-export：chrome://net-export/ 可导出详细的网络日志进行分析。
注意：浏览器可能因缓存或已持有资源而忽略推送，使用无痕模式测试更准确。

Server Push 虽好，但也有一些需要注意的问题：
• 过度推送：推送浏览器已缓存的资源会浪费带宽，反而降低性能。
• 占用连接：推送流会占用 HTTP/2 的并发流，可能阻塞更关键的请求。
• 无法协商：服务器无法知道浏览器是否已有缓存，可能推送冗余资源。
• 配置复杂：需要后端配置 Link 头或使用专门的推送 API。
• 浏览器支持差异：不同浏览器对推送的处理策略略有不同。
• Chrome 已弃用：Chrome 106+ 已默认禁用 Server Push，建议优先使用 <link rel="preload"> 标签作为替代方案。
建议：仅推送首次加载必需的关键资源，并结合 nopush 参数精确控制。

Nginx 配置：
http2_push_preload on; 开启后，Nginx 会自动识别上游应用返回的 Link 头并推送资源。或在 location 块中手动指定：
add_header Link "</style.css>; rel=preload; as=style";
http2_push /style.css;

Apache 配置（mod_http2）：
Header add Link "</style.css>; rel=preload; as=style"
或在 <Location> 中使用 H2PushResource /style.css。

Node.js / Express：
使用 res.setHeader('Link', '</style.css>; rel=preload; as=style');
或使用 http2stream.pushStream() 方法主动推送。

有效的 as 属性值：audio、document、embed、fetch、font、image、object、script、style、track、video、worker。

为什么必须指定 as？
• 浏览器根据 as 值确定资源优先级和请求头。
• 正确的 as 确保资源以正确的 CSP 策略加载。
• 没有 as 的 preload 会被浏览器视为无效，等同于普通 fetch，失去预加载的优先级优势。
• 错误的 as 值（如把样式表标记为 as=script）会导致资源被忽略或产生重复请求。

两者都能实现资源的提前加载，但机制不同：

Server Push（HTTP/2）：
• 服务器主动推送，在响应HTML之前就把资源发送给客户端
• 通过 HTTP 响应头 Link 声明
• 节省一次往返（RTT），但可能推送已缓存资源
• Chrome 106+ 已弃用

<link rel="preload">（HTML标签）：
• 浏览器解析HTML后发起预加载请求
• 在 HTML <head> 中声明
• 浏览器可以结合缓存判断是否需要加载
• 目前所有主流浏览器均支持，是推荐的预加载方式

建议：优先使用 <link rel="preload">，Server Push 作为辅助手段（如 Nginx 的 http2_push_preload 自动转换 Link 头）。
🔧 相关工具