link rel="prerender"在2026年chrome/edge中已失效，仅作兼容层，firefox/safari完全忽略；真正有效的是speculationrules api，需通过声明，支持hover/focus触发、路径匹配与低开销预渲染。
link rel="prerender" 在 2026 年的 Chrome/Edge 中已不触发实际预渲染，写它等于没写；Firefox 和 Safari 完全忽略。别再把它当加速手段用。
为什么 link rel="prerender" 现在基本无效
这不是配置错误，而是浏览器策略变更：
- Chrome 自 M94（约 2021 年）起重构为 Prerender2.0，旧标签降级为兼容层，仅极少数内部导航场景可能响应
- Chrome v110+ 默认禁用，需手动打开
chrome://flags/#prerender2才可能生效，Edge 同步弃用 - 目标页必须同源、无查询参数（
/product✅，/product?id=123❌）、无 hash，业务中几乎无法满足 - Network 面板查不到 HTML/JS/CSS 请求，Performance 面板看不到 “Prerender” 阶段，控制台也无任何提示
真正能用的替代方案：speculationrules
Chromium（Chrome/Edge ≥110）唯一支持的声明式预渲染机制是 speculationrules，它通过 <script type="speculationrules"></script> 告诉浏览器“哪些链接值得预渲染”：
- 必须放在
中，且脚本内容是合法 JSON（不能带注释、尾逗号） - 基础写法：
{"prerender":[{"source":"document","eagerness":"moderate"}]} -
eagerness: "eager"适用于高转化路径（如/checkout），"moderate"更保守，适合悬停/聚焦触发 - 可配合
href_matches精确匹配路径："where":{"href_matches":"/article/\d+"} - 不执行 JS、不加载图片、不发统计请求，只构建 DOM/CSSOM，内存开销比旧版低 60%+
检查是否真生效的三个硬指标
别信控制台或文档描述，只看真实行为：
- 打开 Chrome DevTools → Application → Rendering → 确认 “Prerendering” 面板里有活跃实例（显示 URL + 状态）
- Network 面板过滤
document，点击目标链接前看到对应 HTML 的请求（状态码 200，Initiator 是speculation） - 跳转后 Performance 面板的导航记录里出现 “Prerender” 阶段，且
Navigation Start → First Contentful Paint时间明显缩短（通常
容易被忽略的兼容性与降级问题
speculationrules 只在 Chromium 系列中有效，且依赖运行时支持：
- 用
HTMLScriptElement.supports('speculationrules')检测是否可用，不可用时应 fallback 到prefetch或 preload - 服务端不能依赖它做 SEO 渲染——爬虫不识别该脚本，也不会执行其中逻辑
- 页面内若有同步阻塞 JS（如未加
defer的长任务）、未处理的window.localStorage读取，会导致预渲染中止 - 用户切出 Tab、系统节电、内存紧张时，浏览器会立即丢弃预渲染页，这点必须纳入前端异常监控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
