本文详细介绍了如何在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: <URL>; rel="relationship"; as="type"; ...登录后复制
其中：
<URL>：指向相关资源的URL。rel：描述了当前文档与链接资源之间的关系，例如preload（预加载）、preconnect（预连接）等。as：当rel为preload时，指定资源的类型，如style、script、image等，这有助于浏览器正确处理预加载的资源。在PHP中发送Early Hints的link Header
在PHP中，我们可以使用header()函数来发送HTTP头部。为了发送link Header作为Early Hints，我们需要注意几个关键点。
立即学习“PHP免费学习笔记（深入）”；
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代码示例：
Flawless AI 好莱坞2.0，电影制作领域的生成式AI工具
32 查看详情 
<?php// 确保在任何输出之前调用 header() 函数// 发送一个预加载CSS文件的link Header，并明确指定nopushheader("link: <https://example.com/style.css>; rel=preload; as=style; nopush", false);// 你可以继续发送其他Early Hintsheader("link: <https://example.com/script.js>; rel=preload; as=script; nopush", false);// ... 你的PHP业务逻辑和页面内容生成 ...// 例如，模拟一些耗时操作sleep(1); echo "<!DOCTYPE html>";echo "<html>";echo "<head>";echo " <title>Early Hints 示例</title>";echo " <link rel='stylesheet' href='https://example.com/style.css'>";echo " <script src='https://example.com/script.js'></script>";echo "</head>";echo "<body>";echo " <h1>欢迎来到 Early Hints 页面</h1>";echo " <p>这个页面使用了Early Hints来优化资源加载。</p>";echo "</body>";echo "</html>";?>登录后复制在上述代码中：
header("link: ...", false);：false参数是关键，它指示PHP不要替换同名的现有头部，而是追加一个新的link头部。这样你就可以发送多个不同的link头部。; nopush：这个指令明确告诉服务器，这不是一个HTTP/2服务器推送请求，而是一个纯粹的预加载提示。2. 发送rel=preconnect提示
除了预加载具体资源，预连接（preconnect）到其他域名也是一种有效的优化手段。它指示浏览器提前与目标域名建立连接（包括DNS解析、TCP握手和TLS协商），从而在后续请求该域名的资源时节省时间。
以下是发送一个预连接提示的PHP代码示例：
<?php// 预连接到另一个域名，例如用于CDN或第三方服务header("link: <https://cdn.example.com>; rel=preconnect; nopush", false);header("link: <https://fonts.gstatic.com>; rel=preconnect; nopush", false);// ... 后续代码 ...?>登录后复制请注意，preconnect通常不需要as属性，因为它只是建立连接，而不是下载特定类型的资源。同样，nopush指令在这里也是推荐的。
综合示例与注意事项
在一个实际的PHP应用中，你可能会根据页面所需资源发送多个Early Hints：
<?php// 在任何输出之前发送Early Hints// 预连接到CDN和字体服务器header("link: <https://cdn.example.com>; rel=preconnect; nopush", false);header("link: <https://fonts.gstatic.com>; rel=preconnect; nopush", false);// 预加载关键CSSheader("link: <https://cdn.example.com/css/main.css>; rel=preload; as=style; nopush", false);// 预加载关键Javascriptheader("link: <https://cdn.example.com/js/app.js>; rel=preload; as=script; nopush", false);// 预加载字体header("link: <https://fonts.gstatic.com/s/robotocondensed/v25/ieVl2ZhAtThgpb_nFUUSPDqzyxN7pGzJSQ.woff2>; rel=preload; as=font; crossorigin; nopush", false);// 模拟页面内容生成（可能耗时）sleep(2); // 输出HTMLecho "<!DOCTYPE html>";echo "<html>";echo "<head>";echo " <title>优化页面</title>";echo " <link rel='stylesheet' href='https://cdn.example.com/css/main.css'>";echo " <script src='https://cdn.example.com/js/app.js'></script>";echo " <link rel='preload' href='https://fonts.gstatic.com/s/robotocondensed/v25/ieVl2ZhAtThgpb_nFUUSPDqzyxN7pGzJSQ.woff2' as='font' crossorigin>";echo "</head>";echo "<body>";echo " <h1>页面内容</h1>";echo " <p>这是一个经过Early Hints优化的页面。</p>";echo "</body>";echo "</html>";?>登录后复制注意事项：
服务器/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，并遵循最佳实践来选择和管理预加载的资源。
以上就是在PHP中利用link Header发送Early Hints优化网页加载的详细内容，更多请关注php中文网其它相关文章！
