---

title: 103 Early Hints 与 Preload：替代 Server Push 的实践

keywords:

• 103 Early Hints
• Preload
• Server Push
• Link 头
• HTTP/2
• DevTools

description: 解释 103 Early Hints 如何在服务器思考时间提前发送预连接/预加载指令，作为 Server Push 的替代，并提供部署与验证建议。

categories:

• 文章资讯
• 技术教程

---

概述

Server Push 在浏览器与服务器实现差异下逐步退场。103 Early Hints 通过信息响应在服务器准备最终响应期间提前发送 Link 提示（preconnect/preload），协同页面加载，改善关键资源发现与时机。

工作机制

• 服务器在处理主文档请求时先返回 103 Early Hints，包含 Link 头（如 preconnect、preload），浏览器立即建立连接或请求资源；待主文档就绪再返回 200 OK［参考1,2,5］。
• 建议在 HTTP/2 及以上使用，部分旧客户端对 100 段信息响应支持有限［参考2］。

实践建议

• 在主文档的关键资源（CSS/JS、字体）上使用 Link: <...>; rel=preload; as=... 以及 preconnect。
• 配合 DevTools 观察 early-hints 触发的缓存与资源加载；注意响应式图片不能通过 103 链接头预加载［参考5］。
• 与 CSP 合作：早期提示可携带 CSP 限制源域，提升安全性［参考1,2］。

参考与验证

• ［参考1］MDN：103 Early Hints（示例与 Link 头用法、CSP 协作）：https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status/103
• ［参考2］MDN：103 状态与兼容性说明（建议 HTTP/2+）：https://mdn.org.cn/en-US/docs/Web/HTTP/Status/103
• ［参考3］技术博客：Server Push 退场与 103 Early Hints 的替代实践（Chrome 106 移除）：https://blog.othree.net/log/2022/08/23/http-103-early-hints/
• ［参考4］社区讨论：Cloudflare/Workers 对 103 的关注与实验：https://community.cloudflare.com/t/support-for-status-code-103-early-hints/225879
• ［参考5］Chrome 文档：Early Hints 部署与 DevTools 验证、限制与注意：https://developer.chrome.com/docs/web-platform/early-hints

关键词校验

关键词聚焦 Early Hints 与 Preload 的协同，与正文一致。