用6行HTML代码，让你的网站加载速度飞起来
你有没有遇到过这种情况？点击一个链接后，屏幕中央出现一个旋转的加载图标，网页内容迟迟不显示。这种等待很影响体验。
最近，我尝试了一个简单到不可思议的方法。它只需要在网页里添加一小段html代码，就能让浏览器“猜”出用户下一步可能要访问哪个页面，并提前做好准备。
效果非常明显。之前那个转个不停的加载图标，几乎再也看不到了。页面的切换变得非常流畅，感觉就像网站会读心术一样。
实现这个效果的秘密，就是下面这6行代码：
<script type="speculationrules">
{
"prerender": [
{ "source": "document", "eagerness": "moderate" }
]
}
</script>把这串代码放在你的网页里，浏览器就会在用户空闲时，默默加载他们最可能点击的下一页。当用户真的点击那个链接时，页面几乎是立刻打开的，几乎没有延迟。
这并非什么神奇的“偏方”，而是现代浏览器（如Chrome和Edge）自带的一项强大功能，它的名字叫 Speculation Rules api。
Speculation Rules API 是什么？
简单来说，它是一种你用代码“告诉”浏览器规则的方式。你不需要写复杂的预测逻辑，只需要定义一些规则，告诉浏览器：“我觉得用户可能会去这几个页面，你可以提前准备一下。”
浏览器提供了两种不同力度的准备方式，你可以把它们想象成准备晚餐：
Prefetch（预获取）：这种方式比较“省力”。浏览器会提前把你指定页面的HTML主体文件下载下来，并存进缓存里。它不会执行页面里的JavaScript，也不会进行布局或加载图片。这就像你先去厨房把碗筷摆好，但还没开始做饭。它节省资源，也很安全。
Prerender（预渲染）：这种方式非常“彻底”。浏览器会在一个完全隐藏的标签页里，把你指定的页面完整地加载一遍——包括执行所有JavaScript、获取数据、加载样式和图片等等。当用户点击链接时，浏览器直接把这个已经准备好的页面展示出来，实现瞬间切换。这就像你把整顿饭都做好，并用保温罩盖着，客人一到，立刻上菜。
我们前面用到的那6行代码，使用的就是效果更强的“预渲染”模式。
为什么要把决定权交给浏览器？
你可能会想，我可以用JavaScript在用户鼠标悬停在链接上时，就提前加载页面啊。为什么非要使用这个新的API呢？
原因在于，浏览器掌握的信息比你多得多。它能知道：
用户当前的网络速度是快是慢。
手机设备的电量是否充足。
用户是不是正在使用其他标签页，当前页面是否可见。
用户过去的行为习惯。
把这些决策权交给浏览器，它就能做出更聪明的判断。比如，当它发现用户手机电量很低或者网络很慢时，它可能会选择不进行预加载，以免消耗用户过多的资源和电量。这比你写的简单JavaScript判断要智能和贴心得多。
Prefetch 和 Prerender，我该用哪个？
理解两者的区别很重要，这能帮助你正确使用它们。
Prefetch（预获取）：核心是 “下载文档”。它只获取目标页面的HTML，不运行其中的任何代码。它的优点是资源消耗低、风险小。当你对用户下一步行为的预测不是特别有把握，或者需要为大量链接做提前准备时，Prefetch是首选。
Prerender（预渲染）：核心是 “完整加载”。它几乎重现了一次真实的页面访问。它的优点是体验极致，点击后零等待。缺点是消耗更多计算资源和网络流量。因此，它最适合用在那些你非常有把握用户会点击的地方，比如：
“加入购物车”之后的“结算”按钮。
文章底部的“下一篇”链接。
用户登录后肯定会去的“个人主页”链接。
总结
通过Speculation Rules API，我们只用几行简单的代码，就能极大地提升用户在网站上的浏览体验。它让页面切换变得无比顺滑，让网站感觉更快、更智能。
这项技术目前主要被基于Chromium内核的浏览器（如Chrome、Edge、新版Opera等）支持，已经覆盖了相当大比例的用户。如果你的网站用户主要使用这些浏览器，现在就是开始尝试的好时机。
你不妨也在自己的网站上试试这6行代码，亲身体验一下它带来的速度飞跃。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！