用6行HTML代码，让你的网站加载速度飞起来

你有没有遇到过这种情况？点击一个链接后，屏幕中央出现一个旋转的加载图标，网页内容迟迟不显示。这种等待很影响体验。

最近，我尝试了一个简单到不可思议的方法。它只需要在网页里添加一小段html 代码，就能让浏览器“猜”出用户下一步可能要访问哪个页面，并提前做好准备。

效果非常明显。之前那个转个不停的加载图标，几乎再也看不到了。页面的切换变得非常流畅，感觉就像网站会读心术一样。

实现这个效果的秘密，就是下面这6行代码：

<script type="speculationrules">
{
  "prerender": [
    { "source": "document", "eagerness": "moderate" }
  ]
}
</script>

把这串代码放在你的网页里，浏览器就会在用户空闲时，默默加载他们最可能点击的下一页。当用户真的点击那个链接时，页面几乎是立刻打开的，几乎没有延迟。

这并非什么神奇的“偏方”，而是现代浏览器（如Chrome和Edge）自带的一项强大功能，它的名字叫 Speculation Rules api。

简单来说，它是一种你用代码“告诉”浏览器规则的方式。你不需要写复杂的预测逻辑，只需要定义一些规则，告诉浏览器：“我觉得用户可能会去这几个页面，你可以提前准备一下。”

浏览器提供了两种不同力度的准备方式，你可以把它们想象成准备晚餐：

Prefetch（预获取）：这种方式比较“省力”。浏览器会提前把你指定页面的HTML主体文件下载下来，并存进缓存里。它不会执行页面里的JavaScript，也不会进行布局或加载图片。这就像你先去厨房把碗筷摆好，但还没开始做饭。它节省资源，也很安全。
Prerender（预渲染）：这种方式非常“彻底”。浏览器会在一个完全隐藏的标签页里，把你指定的页面完整地加载一遍——包括执行所有JavaScript、获取数据、加载样式和图片等等。当用户点击链接时，浏览器直接把这个已经准备好的页面展示出来，实现瞬间切换。这就像你把整顿饭都做好，并用保温罩盖着，客人一到，立刻上菜。

我们前面用到的那6行代码，使用的就是效果更强的“预渲染”模式。

你可能会想，我可以用JavaScript在用户鼠标悬停在链接上时，就提前加载页面啊。为什么非要使用这个新的API呢？

原因在于，浏览器掌握的信息比你多得多。它能知道：

把这些决策权交给浏览器，它就能做出更聪明的判断。比如，当它发现用户手机电量很低或者网络很慢时，它可能会选择不进行预加载，以免消耗用户过多的资源和电量。这比你写的简单JavaScript判断要智能和贴心得多。

理解两者的区别很重要，这能帮助你正确使用它们。

Prefetch（预获取）：核心是 “下载文档”。它只获取目标页面的HTML，不运行其中的任何代码。它的优点是资源消耗低、风险小。当你对用户下一步行为的预测不是特别有把握，或者需要为大量链接做提前准备时，Prefetch是首选。
Prerender（预渲染）：核心是 “完整加载”。它几乎重现了一次真实的页面访问。它的优点是体验极致，点击后零等待。缺点是消耗更多计算资源和网络流量。因此，它最适合用在那些你非常有把握用户会点击的地方，比如：

通过Speculation Rules API，我们只用几行简单的代码，就能极大地提升用户在网站上的浏览体验。它让页面切换变得无比顺滑，让网站感觉更快、更智能。

这项技术目前主要被基于Chromium内核的浏览器（如Chrome、Edge、新版Opera等）支持，已经覆盖了相当大比例的用户。如果你的网站用户主要使用这些浏览器，现在就是开始尝试的好时机。

你不妨也在自己的网站上试试这6行代码，亲身体验一下它带来的速度飞跃。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！