跳至主要内容
短.be

预渲染

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

2026 年 8 月 24 日 / 约 1 分钟阅读

重定向

预渲染 (Prerender) 是一种在后台预先完成页面渲染 (HTML 解析、CSS 应用、JavaScript 执行) 的优化技术,针对用户可能即将访问的页面提前处理。当用户实际点击链接时,已渲染完成的页面会直接呈现,几乎没有等待时间。不过预渲染只是给浏览器的提示,浏览器可能因内存状况或用户设置而不予执行。

Chrome 通过 Speculation Rules API 支持预渲染功能。在 HTML 中编写 <script type="speculationrules"> 标签,指定预渲染目标的 URL 模式,目标链接由站点自行声明,而非依赖浏览器预测,触发时机通过 eagerness 指定。immediate 在读取规则时立即执行,eager 与 moderate 在指针停留于链接上时执行,conservative 在指针按下时执行,其中 eagerness 的指定自 Chrome 121 起可用。

在短链接的场景下,首先需要确认预渲染能够覆盖的范围。通常点击短链接后需要经历 DNS 解析、TCP 连接、重定向响应、目标页 DNS 解析、页面加载等多个步骤。但 Speculation Rules API 的预渲染默认仅面向同源文档,源不同时也只有在同一站点内且目标页通过 Supports-Loading-Mode 请求头表示接受的情况下才可行。跨站点的预渲染不会执行,正在预渲染的页面一旦尝试跳转到其他站点,该预渲染会在请求发出前被丢弃。短链接往往与所在页面和目标页分属不同站点,因此无法用预渲染提前完成上述步骤。其适用范围主要是站内跳转,若希望加快跳往外部站点的重定向,可考虑后文提到的更轻量的手段。

预渲染的注意事项包括资源消耗问题。预渲染会在后台加载完整页面,消耗用户的网络带宽和设备内存。在移动环境下,数据流量的增加可能成为问题,因此应仅对高确定性的链接启用预渲染。Chrome 还限制同时保留的预渲染数量,immediate 最多 10 个,其他 eagerness 最多 2 个,超出后会从最早的开始丢弃。此外在指定 Save-Data、开启省电模式、内存不足或浏览器关闭页面预加载设置时,投机加载本身不会执行。

预渲染的渐进替代方案包括 dns-prefetch (仅 DNS 解析)、preconnect (DNS + TCP + TLS) 和 prefetch (仅下载资源),可根据资源消耗与效果的平衡灵活选用。这三者对跨源同样有效,因此对于导向外部站点的链接比预渲染更为现实。另外,早期使用的 <link rel="prerender"> 已被弃用,在当前 Chrome 中不再进行整页预渲染,其行为接近资源预取。页面级别的预读已由 Speculation Rules API 承接。

这篇文章对您有帮助吗?

相关术语

DNS 预解析

浏览器提前对链接目标域名进行 DNS 解析的优化技术。可缩短用户点击链接后的页面加载时间。

页面速度

网页加载和显示完成所需的时间,是用户体验和搜索排名的重要因素。

缓存

将已获取的数据临时保存以加速后续访问的机制。浏览器缓存和 DNS 缓存是最常见的例子。

CDN

通过分布在全球各地的服务器分发内容的网络。实现加速访问和负载均衡。

Core Web Vitals

Google 定义的三项核心网页性能指标,衡量加载速度、交互响应和视觉稳定性。

链接预取

在用户点击之前,于后台预先获取链接目标资源的浏览器功能。有时可以减少页面跳转的等待时间。

相关文章

重定向链对 Web 性能的影响 - 短链接的速度优化

定量解析短链接重定向链对 Core Web Vitals 和页面加载速度的影响。介绍重定向跳数优化、边缘重定向和 HTTP 状态码选择的实现方法。

点击链接后发生了什么?一起来看 0.5 秒背后的秘密

用冒险故事的方式,轻松讲解从点击链接到页面显示之间到底发生了什么。DNS 就像电话簿负责查地址、请求就像寄出的信件、响应就像收到的回信,用生活中的比喻帮你理解网络通信的全过程。还会通俗地讲解短链接的重定向跳转机制,让你明白多出的那一步是怎么回事。读完之后,每次点击链接都会觉得更有趣。

图解网址缩短原理 - 重定向的技术背景

结合 HTTP 响应示例和 Base62 编码计算实例,详细解说网址缩短服务实现重定向的技术原理。

常见问题

预渲染和 prefetch 有什么区别?
prefetch 仅下载资源 (HTML、CSS、JS、图片)。预渲染不仅下载资源,还会提前完成 HTML 解析、CSS 应用和 JavaScript 执行。预渲染效果更显著,但资源消耗也更大。
所有浏览器都支持预渲染吗?
Speculation Rules API 从 Chrome 109 开始支持。截至 2026 年 8 月,Firefox 尚未支持,Safari 也未默认启用。仅在兼容浏览器中生效,不兼容的浏览器会回退到常规加载方式。
预渲染会增加数据流量吗?
是的,即使用户未点击的页面数据也会被预先下载,因此流量会增加。在指定 Save-Data、开启省电模式或内存不足时,浏览器会主动跳过投机加载。站点一侧可做的是把目标限定在高确定性的链接,并选择较为保守的 eagerness 取值。

把知识用到真实链接上

免费缩短网址