你的网站为什么慢？因为你还在用老古董的方法写代码！
只要在你的网站<head>里塞进这短短几行 HTML，就能让页面切换瞬间完成。 别不信，这是谷歌 Chrome 团队给我们的“官方外挂”。
来，先看代码，这就是那个让无数开发者相见恨晚的“魔法”：
<script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }], "prefetch": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }] } </script>是不是简单到令人发指？ 这就是Chrome Speculation Rules API（推测规则 API）。它正在把那个“点链接 -> 等白屏 -> 加载”的旧时代，狠狠地踢进垃圾桶。
它是怎么骗过你的眼睛的？
简单来说，它让浏览器学会了“读心术”。
通过这几行配置，浏览器会变得极其“势利眼”，提前去加载用户可能要看的内容：
prefetch（预获取）：告诉浏览器：“嘿，把那页的 HTML 先给我偷偷下下来！”它不渲染，只下载，省流量又快。
prerender（预渲染）：这个更狠。它告诉浏览器：“不仅要下载，还要在后台把页面完全画好！”CSS、JS、图片，全跑一遍。等用户一点，页面直接“瞬移”到眼前。
"eagerness": "moderate"：这是精髓。意思是：“当鼠标悬停在链接上超过 200 毫秒时，立刻动手！”
想象一下这个场景：用户正在看你的主页。 他的鼠标滑过“服务介绍”的链接，犹豫了 0.2 秒。 就在这眨眼的瞬间，浏览器已经疯了一样在后台把“服务介绍”页加载好了。 当他的手指真正按下鼠标左键时——BOOM！页面早就准备好了，零延迟，丝般顺滑。
以前我们为了这种效果，得去折腾 Hotwired Turbo 这种复杂的库，把网站搞成 SPA（单页应用）。 现在？几行 HTML 就搞定了，Hotwired Turbo 可以卸载了。
但是！（这里有个坑）
这么牛的功能，当然有脾气。 目前，只有Chrome 121及更高版本才支持这个 API。
那 Firefox 和 Safari 的用户就不配拥有速度吗？当然不！ 为了这部分用户，我给你们准备了Plan B。
下面这段 JavaScript 脚本，能让火狐和 Safari 也享受到类似的“鼠标悬停即预加载”的待遇。虽然没有 Chrome 原生的预渲染那么变态快，但依然能吊打普通网站。
把这个也加上：
<script> // 检测不支持 speculationrules 的浏览器 if (!HTMLScriptElement.supports || !HTMLScriptElement.supports('speculationrules')) { const preloadedUrls = {}; function pointerenterHandler () { if (!preloadedUrls[this.href]) { preloadedUrls[this.href] = true; const prefetcher = document.createElement('link'); // 判断是支持 prefetch 还是只能用普通的 fetch prefetcher.as = prefetcher.relList.supports('prefetch') ? 'document' : 'fetch'; prefetcher.rel = prefetcher.relList.supports('prefetch') ? 'prefetch' : 'preload'; prefetcher.href = this.href; document.head.appendChild(prefetcher); } } // 给所有内部链接绑定鼠标悬停事件 document.querySelectorAll('a[href^="/"]').forEach(item => { item.addEventListener('pointerenter', pointerenterHandler); }); } </script>老司机提示：为了让这段脚本在 Firefox 和 Safari 上完美运行，记得给你的页面加上Cache-Control响应头（带上max-age）。这样，鼠标悬停时下载的页面才能被缓存住，等真正点击时直接从缓存读取。
最后
这不仅仅是几行代码的问题，这是用户体验的降维打击。 当别人的网站还在转圈圈，你的网站已经秒开了。 这就叫专业。
全栈AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。
最后：
CSS终极指南
Vue 设计模式实战指南
20个前端开发者必备的响应式布局
深入React:从基础到最佳实践完整攻略
python 技巧精讲
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
