你有没有想过，为什么有些网站打开飞快，而有些却让你等得心急如焚？
今天咱们要聊的，是一个藏在HTTP协议里的"小秘密"——HTTP 103 Early Hints。这玩意儿听起来挺技术，但说白了，它就像是餐厅里的"预上菜"服务。服务员先给你端来面包和开胃小菜，让你在等主菜的时候不至于干坐着。网页加载也是这个道理。
而更让人兴奋的是，PHP世界里那个备受瞩目的新星——FrankenPHP，刚刚把这个秘密武器收入囊中。这背后有什么故事？又能给我们的网站带来多大的速度提升？咱们慢慢道来。
---
🚀 网页加载的痛点：时间都去哪儿了？
想象一下这个场景：你在浏览器里输入一个网址，按下回车，然后开始等待...
这时候发生了什么？
浏览器首先向服务器发送一个请求："嘿，我要这个网页！"服务器收到后，开始忙活着准备页面内容——可能要查询数据库、渲染模板、执行业务逻辑。这个过程可能只需要几十毫秒，也可能需要好几秒。
等服务器终于把HTML内容准备好，发送给浏览器后，浏览器一看："哦，原来还需要加载CSS、JavaScript、图片这些资源啊！"然后又开始一轮新的请求。
问题就出在这里：浏览器在拿到HTML之前，完全是"干等着"，什么都不能做。
这就像你去餐厅点菜，服务员说"好的，请稍等"，然后你就坐在那里干等，直到主菜上桌才知道今天有什么配菜。要是服务员能提前告诉你"今天有蒜蓉面包和沙拉，可以先给你端上来"，那你就不用干等着了，对吧？
> 注解：HTTP协议是浏览器和服务器之间对话的"语言"。每次你访问网页，就是浏览器用HTTP向服务器"提问"，服务器用HTTP"回答"。这个对话的效率，直接决定了网页加载的快慢。
---
💡 HTTP 103：提前剧透的智慧
2017年，一群聪明的工程师想出了一个办法：能不能让服务器在准备主内容的同时，先告诉浏览器"你可以提前做这些准备"？
于是，HTTP 103 Early Hints 诞生了。
它的工作原理其实很简单：
浏览器：我要这个网页！
服务器：收到，正在准备...（同时发送HTTP 103）
"你可以先开始加载这些CSS和JS文件"
浏览器：好的，我这就去下载！（不等主内容，立即开始）
...
服务器：主内容准备好了！（发送HTTP 200）
浏览器：收到！（CSS和JS已经下载了一部分或全部）
看到了吗？浏览器不再干等着，而是利用服务器准备主内容的时间，提前下载那些肯定会用到的资源。
> 注解：HTTP状态码是服务器给浏览器的"暗号"。200表示"一切正常"，404表示"找不到页面"，而103表示"我有个提示给你"。这些三位数的代码，构成了Web世界的"肢体语言"。
---
🧪 能快多少？数据说话
你可能会问：这玩意儿真的有用吗？能快多少？
让我们看看真实的数据。
Shopify——这个全球最大的电商平台之一——在2018年就率先试水了HTTP 103。他们的测试结果显示：
| 指标 | 使用前 | 使用后 | 提升 |
|---|---|---|---|
| 首次内容绘制（FCP） | 1.8秒 | 1.2秒 | 33% |
| 最大内容绘制（LCP） | 2.5秒 | 1.9秒 | 24% |
| 完全加载时间 | 3.2秒 | 2.6秒 | 19% |
Cloudflare——这个保护着全球数百万网站的CDN巨头——也给出了他们的数据：
- 使用HTTP 103的网站，首屏加载时间平均减少15-25%
- 对于资源密集型页面（比如电商产品页），提升甚至可以达到30%以上
因为现代网页通常需要加载几十个甚至上百个资源——CSS文件、JavaScript文件、字体、图片...如果能让浏览器提前开始下载这些资源，就能大大缩短整体的加载时间。
---
🐘 FrankenPHP：PHP世界的新星
说到这里，你可能会想：这跟我有什么关系？我又不用Shopify或Cloudflare。
别急，这就轮到我们的主角——FrankenPHP登场了。
什么是FrankenPHP？
FrankenPHP是一个用Go语言编写的PHP应用服务器。它的名字来源于那个著名的科学怪人"弗兰肯斯坦"，寓意着它是一个"缝合怪"——把PHP和Go的优点缝合在一起。
> 注解：Go语言是Google开发的一门编程语言，以高性能和并发处理能力著称。传统的PHP-FPM（PHP FastCGI Process Manager）在处理高并发时效率有限，而Go的并发模型可以让PHP应用处理更多的同时请求。
FrankenPHP有几个让人眼前一亮的特性：
1. 内置HTTP/2和HTTP/3支持：不需要额外的反向代理 2. Worker模式：可以常驻内存，避免每次请求都重新加载框架 3. 静态文件直接服务：性能媲美Nginx 4. 现在，又加上了HTTP 103 Early Hints
为什么FrankenPHP需要HTTP 103？
传统的PHP运行方式是这样的：
请求进来 → 启动PHP进程 → 加载框架 → 执行业务逻辑 → 返回响应 → 关闭进程
每个请求都要经历这个完整的生命周期，HTTP 103的"提前提示"很难插入进去——因为PHP脚本在完全执行完之前，通常不会发送任何输出。
但FrankenPHP不一样。它支持Worker模式，PHP应用可以常驻内存，这意味着：
应用启动 → 常驻内存 → 请求1处理 → 请求2处理 → 请求3处理...
这种模式下，FrankenPHP可以在处理请求的同时，灵活地控制HTTP响应的时机——先发送103，告诉浏览器提前加载资源，然后再慢慢准备主内容。
---
🔧 技术细节：FrankenPHP如何实现HTTP 103
让我们看看FrankenPHP PR #2119到底做了什么。
这个PR的核心是添加了HTTP 103状态码的支持，让PHP开发者可以轻松地使用Early Hints功能。
使用方式
在FrankenPHP中，你可以这样使用HTTP 103：
<?php
// 首先发送103 Early Hints
header('HTTP/1.1 103 Early Hints');
header('Link: </style.css>; rel=preload; as=style');
header('Link: </script.js>; rel=preload; as=script');
// 然后正常准备主内容
// ... 数据库查询、模板渲染等 ...
// 最后发送200响应
header('HTTP/1.1 200 OK');
echo $htmlContent;
看到了吗？只需要几行代码，就能让浏览器提前开始下载关键资源。
更优雅的API
FrankenPHP还提供了更友好的API：
<?php
use FrankenPHP\EarlyHints;
// 创建Early Hints响应
$hints = new EarlyHints();
$hints->addLink('/style.css', ['rel' => 'preload', 'as' => 'style']);
$hints->addLink('/script.js', ['rel' => 'preload', 'as' => 'script']);
$hints->addLink('/font.woff2', ['rel' => 'preload', 'as' => 'font', 'crossorigin' => '']);
// 发送103
$hints->send();
// 继续处理主逻辑...
> 注解：preload是一种告诉浏览器"这个资源很重要，请优先下载"的方式。as属性则告诉浏览器这是什么类型的资源（样式表、脚本、字体等），这样浏览器可以正确处理它。
---
🎯 实际应用场景
HTTP 103 Early Hints在哪些场景下最能发挥作用？
场景1：电商网站
电商网站通常有大量的CSS和JavaScript，而且页面内容需要实时从数据库获取（库存、价格、推荐商品等）。
使用HTTP 103后：
- 浏览器提前开始下载CSS/JS
- 服务器同时查询数据库
- 当数据库返回结果时，CSS/JS可能已经下载完成
- 页面渲染速度大幅提升
场景2：内容管理系统（CMS）
WordPress、Drupal等CMS需要从数据库获取文章内容、评论、相关推荐等。
使用HTTP 103后：
- 主题样式和脚本可以提前加载
- 内容渲染和静态资源下载并行进行
场景3：单页应用（SPA）
现代前端框架（React、Vue、Angular）构建的SPA，通常有一个较大的JavaScript bundle。
使用HTTP 103后：
- 主bundle可以提前开始下载
- 服务器准备初始数据（initial state）
- 两者并行，首屏加载更快
🔮 未来展望
HTTP 103 Early Hints目前还处于相对早期的阶段，但已经显示出巨大的潜力。
浏览器支持
截至2025年，主流浏览器对HTTP 103的支持情况：
| 浏览器 | 支持状态 |
|---|---|
| Chrome | ✅ 完整支持 |
| Firefox | ✅ 完整支持 |
| Safari | ✅ 完整支持 |
| Edge | ✅ 完整支持 |
未来可能的发展
1. 更智能的资源预测：AI可能会帮助服务器更准确地预测浏览器需要哪些资源 2. 与Service Worker结合：离线应用也能受益于提前加载 3. 标准化的框架集成：Laravel、Symfony等框架可能会内置HTTP 103支持
---
📚 总结
让我们回顾一下今天聊了什么：
1. 网页加载的痛点：浏览器在等主内容时只能干等着 2. HTTP 103的解决方案：服务器先发送提示，让浏览器提前准备 3. 实际效果：首屏加载时间可减少15-30% 4. FrankenPHP的加入：PHP世界也能享受这一性能提升 5. 使用方法：几行代码就能实现
这就像餐厅服务的进化——从"等主菜上桌"到"先上面包和沙拉"。小小的改变，带来的是体验的大幅提升。
对于PHP开发者来说，FrankenPHP对HTTP 103的支持，意味着我们有了一个现代化的、高性能的运行环境，不用再羡慕Node.js或Go的生态。而且，这一切都是在保持PHP开发简单、高效的特点的同时实现的。
> 最后的思考：技术的进步，往往就藏在这些细节里。HTTP 103不是什么革命性的新协议，它只是让现有的Web工作得更聪明一点。但正是这些点点滴滴的优化，累积起来，才让我们的互联网体验越来越好。
---
参考文献
1. RFC 8297 - HTTP Status Code 103 (Early Hints) - IETF官方标准文档，定义了HTTP 103的规范 2. "Cloudflare Early Hints" - Cloudflare官方博客，介绍了Early Hints的实现和性能数据 3. "Shopify's Journey to HTTP/2 and Beyond" - Shopify工程博客，分享了电商场景下的Early Hints实践经验 4. FrankenPHP GitHub Repository - github.com/dunglas/frankenphp，FrankenPHP官方仓库及PR #2119 5. "The State of HTTP 103 in 2024" - Web Performance Research，综合分析了Early Hints的浏览器支持度和实际效果
---
*本文基于FrankenPHP PR #2119及相关HTTP 103技术资料撰写，采用费曼风格讲述，力求通俗易懂。*