Chrome 全新 API：僅六行 HTML！讓頁面秒開！
如果你也厭倦了無窮無盡的 loading 動畫，今天介紹的 Speculation Rules API 能讓你瞬間解脫。
它內置于所有現代 Chromium 瀏覽器（Chrome/Edge/Brave 等），不依賴任何框架！
只要寫六行聲明式 HTML，就能讓頁面“看起來比用戶還懂用戶”。
?? 核心原理：讓瀏覽器做“預測”
模式 | 做了什么 | 資源消耗 | 副作用 |
Prefetch | 提前下載 HTML/JS/CSS，放入緩存 | 低 | 無 |
Prerender | 在后臺完整跑完頁面（腳本、API 全跑） | 高 | 可能有 |
??六行代碼，直接生效
把下面這段放進 <head>，立刻啟用 moderate 級別的 prerender：
<script type="speculationrules">
{
"prerender": [{ "source": "document", "eagerness": "moderate" }]
}
</script>瀏覽器會自動掃描當前頁面所有鏈接，當用戶 懸停 或 聚焦 時，后臺就開始預渲染。
?? 三步落地，零成本迭代
(1) 廣撒網：prefetch 做兜底
對整站同域鏈接先啟用 prefetch，網絡開銷極低：
{ "prefetch": [{ "source": "document", "eagerness": "moderate" }] }(2) 重點捕撈：prerender 高價值路徑
例如商品 → 結賬、文章 → 下一篇：
{
"prerender": [{
"source": "document",
"where": { "href_matches": "/checkout" },
"eagerness": "eager"
}]
}(3) 跨域別忘了加響應頭
如果目標站點是 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://medium.com/@fireprogrammer/make-any-app-load-faster-with-just-6-lines-of-html-fe091cb9fdf6
