如何通过HTML的Speculation Rules的eagerness参数控制预渲染的触发时机

eagerness是浏览器对用户意图置信度的分级参数，控制预渲染或预获取触发时机，分为eager、moderate、conservative三档，权衡资源浪费与响应速度。

什么是 eagerness 参数，它控制什么

eagerness 不是“越 eager 越好”，而是浏览器对用户意图的置信度分级。它决定预渲染或预获取动作在什么信号下启动——本质是权衡「资源浪费」和「响应速度」。Chrome 当前只支持三档：eager、moderate、conservative，没有中间值，也不能自定义毫秒数。

eagerness: "eager" 什么时候该用，风险在哪

链接一进入视口（viewport）就触发，不等悬停、不等点击。适合高确定性路径，比如首页轮播图下方固定“立即购买”按钮的跳转页，或单页应用中已知用户 90%+ 会点的下一步按钮。

• 容易踩的坑：href_matches 若写成 "/*" 配合 eager，会导致首页所有链接（包括页脚版权链接、隐私政策）全被预渲染，内存暴涨，页面卡顿甚至崩溃
• 真实场景限制：仅同源页面生效；跨域链接即使匹配也静默忽略
• 注意兼容性：eager 在低内存设备（如部分 Android Chrome）可能被自动降级为 moderate，无法强制

eagerness: "moderate" 为什么是默认且最常用

这是唯一一个既防误触又保体验的平衡点：鼠标悬停或键盘聚焦链接后约 200ms 启动。浏览器内部做了去抖，不是一 hover 就开干，所以手滑划过不会白忙活。

• 适用绝大多数导航链接，比如顶部菜单栏、文章内“阅读更多”、产品列表页的每个商品卡片
• 若页面含大量动态生成的 <a>（如 React/Vue 渲染），moderate 仍有效——Speculation Rules 是 DOM 驱动的，只要元素在 document 中且满足 where 条件，就会被识别
• 不要手动加 onmouseover 或 addEventListener 去模拟，那反而干扰浏览器原生逻辑，还可能触发竞态

eagerness: "conservative" 的真实使用场景

鼠标按下（mousedown）那一刻才开始预渲染。不是“点击完成”，而是手指/光标按下的瞬间。这意味着：如果用户按住不放再拖走，预渲染已启动但不会取消；如果点了又快速返回，页面可能已部分加载。

立即学习“前端免费学习笔记（深入）”；

• 适合高代价操作：比如“提交订单”按钮跳转的支付页，或含大量计算、API 调用、第三方 SDK 初始化的后台页面
• 不适合普通导航：用户从按下到松开通常
• 注意副作用：某些页面在 prerender 阶段执行了 fetch 或 localStorage 写入，conservative 会让这些副作用提前发生——哪怕用户最终没松开鼠标

真正难的不是选哪个值，而是理解 eagerness 和 where 的组合效果。比如 href_matches: "/checkout/*" + eagerness: "eager" 很安全，但 href_matches: "/*" + eagerness: "eager" 几乎必然出问题。浏览器不会替你做业务判断，它只忠实地执行规则。