burgess Chrome 全新 API：只需要 6 行 HTML！让你的页面秒开！
AI 概述
核心原理：让浏览器做“预测”6 行代码，直接生效三步落地，零成本迭代三档触发时机（eagerness）避坑指南总结
如果你也厌倦了无穷无尽的 loading 动画，今天介绍的 Speculation Rules API 能让你瞬间解脱。
它内置于所有现代 Chromium 浏览器（Chrome/Edge/Brave 等），不依赖任何框架！
只要写 6 行声...
目录
如果你也厌倦了无穷无尽的 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。
参考链接：点击这里
以上关于Chrome 全新 API：只需要 6 行 HTML！让你的页面秒开！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Chrome 全新 API：只需要 6 行 HTML！让你的页面秒开！
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Chrome 全新 API：只需要 6 行 HTML！让你的页面秒开！
