Chrome 全新 API：只需要 6 行 HTML！让你的页面秒开！

如果你也厌倦了无穷无尽的 loading 动画，今天介绍的 Speculation Rules API 能让你瞬间解脱。

它内置于所有现代 Chromium 浏览器（Chrome/Edge/Brave 等），不依赖任何框架！

只要写 6 行声明式 HTML，就能让页面“看起来比用户还懂用户”。

核心原理：让浏览器做“预测”

模式做了什么>资源消耗副作用
Prefetch 提前下载 HTML/JS/CSS，放入缓存 低 无>
Prerender 在后台完整跑完页面（脚本、API 全跑） 高 可能有

6 行代码，直接生效

把下面这段放进 <head>，立刻启用 moderate 级别的 prerender：

<script type="speculationrules">
{
  "prerender": [{ "source": "document", "eagerness": "moderate" }]
}
</script>

浏览器会自动扫描当前页面所有链接，当用户 悬停 或 聚焦 时，后台就开始预渲染。

三步落地，零成本迭代

  • 广撒网：prefetch 做兜底
    对整站同域链接先启用 prefetch，网络开销极低：
{ "prefetch": [{ "source": "document", "eagerness": "moderate" }] }
  • 重点捕捞：prerender 高价值路径
    例如商品 → 结账、文章 → 下一篇：
{
     "prerender": [{
       "source": "document",
       "where": { "href_matches": "/checkout" },
       "eagerness": "eager"
     }]
   }
  • 跨域别忘了加响应头
    如果目标站点是 b.example，需返回：
Supports-Loading-Mode: credentialed-prerender

三档触发时机（eagerness）

  • eager   链接一进可视区就开干
  • moderate  悬停或聚焦再干（默认，最均衡）
  • conservative  鼠标按下才干（最省资源）

避坑指南

场景建议
页面加载会写数据库 / 发消息 用 prefetch，别 prerender
需要登录态 提前校验，避免预渲染 401
有埋点 / PV 统计 监听 prerenderingchange 事件后再上报
不确定是否生效 Chrome DevTools → Preloading 面板实时查看

总结

把等待时间从「用户侧」转移到「浏览器空闲时间」，这就是 Speculation Rules API 的全部魔法。

下次产品说“再加个 loading 动画”时，直接把这篇文章甩给他 —— 然后优雅地附上那 6 行 HTML。

参考链接：https://mybj123.com/26617.html

posted @ 2025-09-11 16:33  1024笔记  阅读(25)  评论(0)    收藏  举报