用户在电商网站从产品列表点击进入详情页，哪怕页面已经做了静态生成和CDN缓存，仍然要经历网络请求、HTML解析、CSS和JS加载、图片渲染这些步骤。在慢速网络或者低端设备上，白屏时间仍然可以长到让用户失去耐心。SPA框架通过客户端路由缓解了这个问题，但带来了复杂度的大幅增加。
Chrome 108引入的Speculation Rules API为这个问题提供了原生解决方案。它允许开发者在HTML中通过一段JSON配置，告诉浏览器提前预取甚至完整预渲染用户可能导航到的页面。当用户真正点击链接时，页面已经就绪，切换瞬间完成。本文通过一个完整的电商列表到详情页的预渲染案例，把这项技术的配置、调试和优化细节完整展展开。
一、Speculation Rules是什么
Speculation Rules是通过<script type="speculationrules">注入的一组预判规则，浏览器根据这些规则决定在闲暇时预先加载哪些资源或页面。目前支持两种动作：
- prefetch：仅预取页面的HTML文档（可能包括关键子资源），但不执行JS也不渲染，点击时仍需解析和渲染，但省去了网络请求时间。
- prerender：对页面进行完整渲染，包括执行JavaScript、加载图片、创建DOM树和CSSOM树，用户点击时页面直接激活，几乎零延迟。
规则写在页面<head>或<body>中，浏览器在空闲时解析并执行。一个最简单的预渲染规则示例：
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/product/1", "/product/2"]
}
]
}
</script>浏览器会尝试预渲染/product/1和/product/2这两个页面（受限于资源上限）。这是列表模式，明确指定URL。更强大的模式是文档规则，可以基于链接的匹配条件自动进行预判。
二、案例：产品列表页到详情页的预渲染
假设我们有一个产品列表页/products，展示50件商品，每个商品链接到/product/<id>。我们需要在用户浏览列表时，预渲染当前视口附近的产品详情页，使得点击进入时瞬间呈现。
2.1 列表页HTML结构
<!DOCTYPE html>
<html>
<head>
<title>产品列表</title>
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{ "href_matches": "/product/*" },
{ "not": { "selector_matches": ".no-prerender" } }
]
},
"eagerness": "moderate"
}
]
}
</script>
</head>
<body>
<h1>产品列表</h1>
<div class="product-grid">
<a href="/product/101" rel="external nofollow" class="product-card">
<img src="/img/101.jpg" alt="产品101">
<span>产品101</span>
</a>
<a href="/product/102" rel="external nofollow" class="product-card">
<img src="/img/102.jpg" alt="产品102">
<span>产品102</span>
</a>
<!-- 更多产品卡片 -->
</div>
</body>
</html>2.2 规则解析
- source: “document”：使用文档规则，根据页面上的链接动态匹配。
- where.and：组合两个条件。第一个条件
href_matches匹配所有路径以/product/开头的链接。第二个条件排除带有.no-prerender类的链接，允许开发者在特定链接上禁止预渲染。 - eagerness: “moderate”：预判的急迫程度。可选值有
immediate、eager、moderate、conservative。moderate表示当用户悬停或聚焦链接时触发预渲染；eager则在页面加载完成后立即开始预渲染符合条件的链接（更激进）；conservative仅在用户开始触摸或点击（pointerdown）时触发。这里选择moderate可以在悬停时预渲染，覆盖大多数用户行为，同时不会因列表太长而浪费资源。
三、按需控制预渲染范围
如果列表太长（比如分页加载100条），全部预渲染会消耗大量内存和网络。我们需要更精细的控制：只预渲染可见或即将可见的链接。这可以通过在滚动时动态注入规则或者使用selector_matches结合可视区域判断来实现。但文档规则本身不直接支持“视口内”条件。一个折中方案是配合JavaScript动态调整规则：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const link = entry.target.querySelector('a');
// 针对进入视口的卡片，动态添加高优先级预渲染规则
addSpeculationRule(link.href);
}
});
});
function addSpeculationRule(url) {
const script = document.createElement('script');
script.type = 'speculationrules';
script.textContent = JSON.stringify({
prerender: [{ source: 'list', urls: [url] }]
});
document.head.appendChild(script);
}
// 观察产品卡片
document.querySelectorAll('.product-card').forEach(card => observer.observe(card));这种方式将列表规则用于具体URL，只在卡片进入视口时添加预渲染规则，既精准又节省资源。不过需要注意，频繁添加规则可能增加开销，因此也可以采用批量添加或使用文档规则配合eagerness: conservative来达到按需效果。
四、验证预渲染效果
浏览器开发者工具提供了完整的预渲染调试支持：
- 在Application面板的Speculative Loads部分，可以看到当前页面发起的预渲染或预取列表，状态包括“pending”、“running”、“ready”等。
- 在Network面板中，预渲染的资源请求会标记为“Prerender”或“Prefetch”，可看出加载时机和耗时。
- 在Performance面板中录制导航，如果页面是从预渲染激活的，导航耗时几乎为零，Timeline上会显示“Activation”标记。
实际测试中，在一个较快网络下，产品详情页原本需要350ms左右完成首次内容绘制（FCP），使用悬停触发的预渲染后，点击进入的FCP降至5ms以内，用户感知上完全是瞬间打开。
五、预渲染对页面行为的影响
预渲染的页面在激活前处于不可见的后台标签页状态，其JavaScript可以执行，但受到限制：不允许播放音频、不允许访问摄像头、不允许弹出窗口，且某些分析统计代码可能会在后台执行导致计数不准。可以通过document.prerendering检测当前是否处于预渲染阶段，并延迟统计上报：
if (document.prerendering) {
document.addEventListener('prerenderingchange', () => {
// 激活后执行
sendAnalytics();
});
} else {
sendAnalytics();
}同时，预渲染页面中如果有轮询请求或WebSocket连接，建议在prerenderingchange事件激活后再建立，避免后台浪费资源。
六、预取（prefetch）作为轻量替代
如果不需要完整渲染（比如页面有大量用户特定内容或动态数据），可以使用prefetch只预加载HTML和关键子资源。配置方式几乎相同，只需把prerender换成prefetch：
<script type="speculationrules">
{
"prefetch": [
{
"source": "document",
"where": { "href_matches": "/product/*" },
"eagerness": "moderate"
}
]
}
</script>prefetch不会执行JavaScript也不会渲染，但能让浏览器提前完成DNS解析、TCP连接和HTML文档下载，将导航耗时缩短一半以上，同时无任何副作用风险。
七、实际部署中的注意事项
- 跨域限制：预渲染目前仅支持同源链接。跨域链接只能使用prefetch。
- 资源上限：浏览器会限制同时预渲染的页面数量（通常为1-2个），超出后新的规则会排队等待或丢弃。
- CPU和内存影响：预渲染会占用额外内存和CPU，对于低端设备需要谨慎使用。可以使用
eagerness: conservative搭配moderate以降低开销。 - 与现有预加载技术的关系：Speculation Rules可以替代部分手动
<link rel="prerender">的用法，而且更灵活、更易管理。
八、总结
Speculation Rules API把原本需要复杂SPA或手写预加载脚本才能实现的“瞬间导航”体验，变成了浏览器原生能力。只需在HTML中插入几行JSON规则，就能让页面之间的切换快到感觉不到。配合合适的eagerness策略和动态规则管理，可以在不牺牲设备性能的前提下，大幅提升用户导航体验。
如果你的网站有典型的多页面浏览路径（比如列表→详情、文章列表→文章页），现在就可以从小范围试验开始，用预渲染或预取改善加载体验。浏览器支持已经覆盖绝大多数用户，是时候让原生能力替代那些复杂的自定义预加载方案了。
