预渲染

在用户点击链接之前，预先在后台完成页面渲染的优化技术。可实现点击后的即时显示效果。

2025年12月2日 · 约 1 分钟阅读

重定向

预渲染 (Prerender) 是一种在后台预先完成页面渲染 (HTML 解析、CSS 应用、JavaScript 执行) 的优化技术，针对用户可能即将访问的页面提前处理。当用户实际点击链接时，已渲染完成的页面会立即呈现，体感上实现零延迟的页面切换。

Chrome 通过 Speculation Rules API 支持预渲染功能。在 HTML 中编写 <script type="speculationrules"> 标签，指定预渲染目标的 URL 模式，Chrome 会预测用户行为，对可能被点击的链接进行预渲染。

预渲染对于改善短链接的重定向体验尤为有效。通常点击短链接后需要经历 DNS 解析、TCP 连接、重定向响应、目标页 DNS 解析、页面加载等多个步骤。如果预渲染已生效，这些步骤均已提前完成，点击后页面即刻呈现。

预渲染的注意事项包括资源消耗问题。预渲染会在后台加载完整页面，消耗用户的网络带宽和设备内存。在移动环境下，数据流量的增加可能成为问题，因此应仅对高确定性的链接启用预渲染。

预渲染的渐进替代方案包括 dns-prefetch (仅 DNS 解析)、preconnect (DNS + TCP + TLS) 和 prefetch (仅下载资源)，可根据资源消耗与效果的平衡灵活选用。相关书籍可在 Amazon 上查阅。

这篇文章对您有帮助吗？

常见问题

预渲染和 prefetch 有什么区别？

prefetch 仅下载资源 (HTML、CSS、JS、图片)。预渲染不仅下载资源，还会提前完成 HTML 解析、CSS 应用和 JavaScript 执行。预渲染效果更显著，但资源消耗也更大。

所有浏览器都支持预渲染吗？

Speculation Rules API 从 Chrome 109 开始支持。Firefox 和 Safari 目前尚未支持。仅在兼容浏览器中生效，不兼容的浏览器会回退到常规加载方式。

预渲染会增加数据流量吗？

是的，即使用户未点击的页面数据也会被预先下载，因此流量会增加。建议在检测到 Save-Data 请求头时禁用预渲染，以照顾移动用户的流量需求。

想要创建短链接吗？