本文详细介绍了如何在php脚本中正确发送http `link` header以实现early hints功能，从而优化网页加载性能。重点阐述了`rel=preload`和`rel=preconnect`的使用方法，并强调了在发送这些头部时必须添加`nopush`指令，以避免与http/2 push混淆，确保浏览器能有效利用这些预加载提示。
理解Early Hints与Link Header
Early Hints（早期提示）是一种HTTP/2和HTTP/3的特性，允许服务器在发送主响应之前，提前向客户端发送一个HTTP 103（Early Hints）状态码，其中包含Link头部，用于提示浏览器预连接（preconnect）、预加载（preload）或预取（prefetch）关键资源。这可以显著减少页面加载时间，因为浏览器可以在等待服务器生成完整HTML响应的同时，并行地开始下载或连接必要的资源。
Link Header是HTTP响应头部的一部分，用于在HTML文档之外声明资源关系。其基本语法如下：
Link:; rel="relationship"; as="type"; ...
其中：
：指向相关资源的URL。 - rel：描述了当前文档与链接资源之间的关系，例如preload（预加载）、preconnect（预连接）等。
- as：当rel为preload时，指定资源的类型，如style、script、image等，这有助于浏览器正确处理预加载的资源。
在PHP中发送Early Hints的Link Header
在PHP中，我们可以使用header()函数来发送HTTP头部。为了发送Link Header作为Early Hints，我们需要注意几个关键点。
1. 发送rel=preload提示
当我们需要预加载（preload）关键CSS、JavaScript文件或字体等资源时，可以使用rel=preload。一个常见的误解是，只需发送Link头部即可。然而，为了确保这是Early Hints的预加载提示，而不是HTTP/2服务器推送（Push），必须添加nopush指令。
如果没有nopush，一些HTTP/2服务器可能会将其解释为HTTP/2 Push，这在某些情况下可能不是期望的行为，或者与CDN的Early Hints机制冲突。
以下是发送一个CSS文件预加载提示的正确PHP代码示例：
; rel=preload; as=style; nopush", false);
// 你可以继续发送其他Early Hints
header("Link: ; rel=preload; as=script; nopush", false);
// ... 你的PHP业务逻辑和页面内容生成 ...
// 例如，模拟一些耗时操作
sleep(1);
echo "";
echo "";
echo "";
echo " Early Hints 示例 ";
echo " ";
echo " ";
echo "";
echo "";
echo " 欢迎来到 Early Hints 页面
";
echo " 这个页面使用了Early Hints来优化资源加载。
";
echo "";
echo "";
?> 在上述代码中：
- header("Link: ...", false);：false参数是关键，它指示PHP不要替换同名的现有头部，而是追加一个新的Link头部。这样你就可以发送多个不同的Link头部。
- ; nopush：这个指令明确告诉服务器，这不是一个HTTP/2服务器推送请求，而是一个纯粹的预加载提示。
2. 发送rel=preconnect提示
除了预加载具体资源，预连接（preconnect）到其他域名也是一种有效的优化手段。它指示浏览器提前与目标域名建立连接（包括DNS解析、TCP握手和TLS协商），从而在后续请求该域名的资源时节省时间。
以下是发送一个预连接提示的PHP代码示例：
; rel=preconnect; nopush", false);
header("Link: ; rel=preconnect; nopush", false);
// ... 后续代码 ...
?> 请注意，preconnect通常不需要as属性，因为它只是建立连接，而不是下载特定类型的资源。同样，nopush指令在这里也是推荐的。
综合示例与注意事项
在一个实际的PHP应用中，你可能会根据页面所需资源发送多个Early Hints：
; rel=preconnect; nopush", false);
header("Link: ; rel=preconnect; nopush", false);
// 预加载关键CSS
header("Link: ; rel=preload; as=style; nopush", false);
// 预加载关键JavaScript
header("Link: ; rel=preload; as=script; nopush", false);
// 预加载字体
header("Link: ; rel=preload; as=font; crossorigin; nopush", false);
// 模拟页面内容生成（可能耗时）
sleep(2);
// 输出HTML
echo "";
echo
"";
echo "";
echo " 优化页面 ";
echo " ";
echo " ";
echo " ";
echo "";
echo "";
echo " 页面内容
";
echo " 这是一个经过Early Hints优化的页面。
";
echo "";
echo "";
?> 
"";
echo "";
echo " 注意事项：
- 服务器/CDN支持： Early Hints的实际工作需要你的Web服务器（如Nginx）或CDN（如Cloudflare）支持并配置了Early Hints功能。PHP脚本负责生成正确的Link头部，但由服务器负责将其包装在HTTP 103响应中发送。
- nopush指令： 始终记得为Early Hints的Link头部添加nopush指令，以避免与HTTP/2服务器推送混淆。
- header()函数调用位置： header()函数必须在任何实际内容输出到浏览器之前调用，否则会导致“Headers already sent”错误。
- 选择关键资源： 仅对页面渲染至关重要的资源使用Early Hints。过度使用Early Hints可能会导致不必要的网络请求和资源浪费。
- as属性的重要性： 对于rel=preload，as属性是强制性的，它告诉浏览器如何处理预加载的资源（例如，作为样式表、脚本或图片），这对于正确的优先级和缓存行为至关重要。
- crossorigin属性： 当预加载字体或某些跨域资源时，可能需要添加crossorigin属性，以避免CORS问题。
总结
在PHP中发送Early Hints的Link Header是优化网页加载性能的有效策略。通过正确使用header()函数，结合rel=preload、rel=preconnect以及至关重要的nopush指令，开发者可以指示浏览器提前获取或连接关键资源，从而显著提升用户体验。请务必确保你的服务器或CDN环境支持Early Hints，并遵循最佳实践来选择和管理预加载的资源。
