Chrome中重复添加同URL预渲染规则失效问题求助

核心问题原因 #

Chrome预渲染系统会对已完成（状态变为success）的URL保留内部状态记录，直接移除旧规则再添加同URL的新规则时，浏览器会判定该URL无需再次预渲染，导致新规则始终处于not-triggered状态。

具体解决方案 #

1. 移除旧规则前强制清空预渲染状态 #

在移除旧规则前，调用document.prerendering.clear()清空所有预渲染任务及浏览器的状态记录：

// 清空所有预渲染相关状态
if ('prerendering' in document) {
  document.prerendering.clear();
}
// 移除页面中已存在的预渲染规则脚本
const existingRules = document.querySelectorAll('script[type="speculationrules"]');
existingRules.forEach(rule => rule.remove());

2. 注入新规则时添加唯一标识 #

给每个新规则的source字段设置唯一值（比如结合时间戳、模板ID），让浏览器识别为全新的预渲染任务：

// 生成唯一source标识
const uniqueSource = `list-${Date.now()}-${templateId}`;
// 创建并注入新规则
const ruleScript = document.createElement('script');
ruleScript.type = 'speculationrules';
ruleScript.textContent = JSON.stringify({
  prerender: [
    {
      source: uniqueSource,
      urls: cfg.urls,
      eagerness: cfg.eagerness ?? 'immediate',
      target_hint: cfg.targetHint ?? '_blank',
    },
  ],
});
document.head.appendChild(ruleScript);

3. 页面返回时自动重置状态 #

监听页面visibilitychange事件，当用户从新标签页返回原页面时，主动清空旧状态：

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    // 页面重新可见时清空预渲染状态
    if ('prerendering' in document) {
      document.prerendering.clear();
    }
    // 移除旧规则脚本
    const existingRules = document.querySelectorAll('script[type="speculationrules"]');
    existingRules.forEach(rule => rule.remove());
  }
});

4. 验证预渲染触发状态 #

注入新规则后，可通过API查看任务状态，确认是否正常触发：

// 延迟检查状态，确保规则已生效
setTimeout(() => {
  const entries = document.prerendering.getEntries();
  entries.forEach(entry => {
    console.log(`预渲染任务：${entry.url} - 状态：${entry.state}`);
  });
}, 1000);

关键注意事项 #

• 需使用Chrome 113及以上版本（Speculation Rules API稳定版）
• document.prerendering.clear()会终止所有预渲染任务并清除状态记录，是重置的核心操作
• 唯一source值是避免新旧规则冲突的关键，确保浏览器识别为独立任务

内容的提问来源于stack exchange，提问作者D yh