Chrome 全新 API：只需要 6 行 HTML！讓你的頁面秒開！
如果你也厭倦了無窮無盡的 loading 動畫，今天介紹的 Speculation Rules API 能讓你瞬間解脫。
它內置于所有現代 Chromium 瀏覽器（Chrome/Edge/Brave 等），不依賴任何框架！
只要寫 6 行聲明式 HTML，就能讓頁面“看起來比用戶還懂用戶”。
核心原理：讓瀏覽器做“預測”
| 模式 | 做了什么> | 資源消耗 | 副作用 |
|---|---|---|---|
| Prefetch | 提前下載 HTML/JS/CSS，放入緩存 | 低 | 無> |
| Prerender | 在后臺完整跑完頁面（腳本、API 全跑） | 高 | 可能有 |
6 行代碼，直接生效
把下面這段放進 <head>，立刻啟用 moderate 級別的 prerender：
瀏覽器會自動掃描當前頁面所有鏈接，當用戶 懸停 或 聚焦 時，后臺就開始預渲染。
三步落地，零成本迭代
- 廣撒網：prefetch 做兜底
對整站同域鏈接先啟用 prefetch，網絡開銷極低：
- 重點捕撈：prerender 高價值路徑
例如商品 → 結賬、文章 → 下一篇：
- 跨域別忘了加響應頭
如果目標站點是 b.example，需返回：
三檔觸發時機（eagerness）
- eager?? 鏈接一進可視區就開干
- moderate? 懸停或聚焦再干（默認，最均衡）
- conservative? 鼠標按下才干（最省資源）
避坑指南
| 場景 | 建議 |
|---|---|
| 頁面加載會寫數據庫 / 發消息 | 用 prefetch，別 prerender |
| 需要登錄態 | 提前校驗，避免預渲染 401 |
| 有埋點 / PV 統計 | 監聽 prerenderingchange 事件后再上報 |
| 不確定是否生效 | Chrome DevTools → Preloading 面板實時查看 |
總結
把等待時間從「用戶側」轉移到「瀏覽器空閑時間」，這就是 Speculation Rules API 的全部魔法。
下次產品說“再加個 loading 動畫”時，直接把這篇文章甩給他 —— 然后優雅地附上那 6 行 HTML。
參考鏈接：https://mybj123.com/26617.html
浙公網安備 33010602011771號