当前位置：首页 > news >正文

只加了6行代码，我的网站快得像一道闪电！还在写卡顿网页的你，真的out了

news 2026/5/12 8:54:51

你的网站为什么慢？因为你还在用老古董的方法写代码！

只要在你的网站<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）。这样，鼠标悬停时下载的页面才能被缓存住，等真正点击时直接从缓存读取。