只加了6行代码,我的网站快得像一道闪电!还在写卡顿网页的你,真的out了
- 2026-04-03 05:30:26
来源丨经授权转自大迁世界（ID：qq449245885）
作者丨dev
你的网站为什么慢？因为你还在用老古董的方法写代码！
只要在你的网站 <head> 里塞进这短短几行 HTML，就能让页面切换瞬间完成。 别不信，这是谷歌 Chrome 团队给我们的“官方外挂”。
来，先看代码，这就是那个让无数开发者相见恨晚的“魔法”：
<scripttype="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 = {};functionpointerenterHandler () {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）。这样，鼠标悬停时下载的页面才能被缓存住，等真正点击时直接从缓存读取。
最后
这不仅仅是几行代码的问题，这是用户体验的降维打击。 当别人的网站还在转圈圈，你的网站已经秒开了。 这就叫专业。
2、IntelliJ IDEA 2026.1 EAP 3 紧急发布，AI 能力再次加强，回收站终于有了！
