一个预加载网站，提升网站速度的 JS - instant.page

简介

instant.page 可以预加载用户想访问的页面，当用户真正点击链接后，就会直接从缓存中读取，以此提升网站的访问速度。

instant.page 官网：https://instant.page/

这是一段来自官网的介绍：

On desktop Before a user clicks on a link, they hover their mouse over that link. When a user has hovered for 65 ms there is one chance out of two that they will click on that link, so instant.page starts preloading at this moment, leaving on average over 300 ms for the page to preload.

Another option is to load the pages when the user starts pressing their mouse without preloading. This makes for zero unused requests while still improving page loads by 80 ms on average.

You can also preload on hover or as soon as a link is visible and trigger the click when the user starts pressing their mouse, making your pages the fastest in the world.

On mobile A user starts touching their display before releasing it, leaving on average 90 ms for the page to preload.

Another option is to preload links as soon as they’re visible.

大致意思应该是：

• 桌面端：在用户单击链接之前，他们将鼠标悬停在该链接上。当用户悬停了 65 毫秒时，有一次机会在两个链接上单击，因此此时 instant.page 开始预加载，平均留下超过 300 毫秒的页面来预加载。 您还可以在悬停上预加载，或在链接可见后立即预加载，并在用户开始按下鼠标时触发单击，使您的页面成为世界上最快的页面。
• 移动端：用户在发布显示屏之前开始触摸其显示屏，平均留出90 毫秒用于预加载页面。另一种选择是一旦链接可见，就立即预加载它们。

效果如下

使用方法

1.使用官方脚本 只要把这行代码添加到网站的 标签之前即可。(由于脚本托管在国外，只建议国外的朋友使用，国内的朋友加载官方的资源会比较慢哦)

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

2.自托管文件 (推荐) 只需将下面下载地址里的 js 文件 上传到自己服务器，然后在 标签之前根据路径添加下面的代码即可(强烈建议服务器在国内的朋友使用)

<script src="`存放路径`/instantpage.js" type="module"></script>

3.公共 CDN 资源 (强烈推荐) 只要把这行代码添加到网站的 标签之前即可。(由于文件全球 CDN，所以强烈建议使用，节省服务器资源) 代码一（较快）

<script src="https://cdn.jsdelivr.net/gh/instantpage/instant.page@master/instantpage.js" type="module"></script>

代码二（快速）

<script src="https://cdn.jsdelivr.net/npm/instant.page@5.1.0/instantpage.js" type="module"></script>

下载地址

Github 官方下载 https://github.com/instantpage/instant.page

度盘下载 Download 网盘文件提取码：g8pg