实现网站页面秒开-预加载JS脚本instant.page

instant.page 原理的话我们不必深层了解，只需知道：

在用户点击网站链接之前，他们将鼠标悬停在该链接上。当用户徘徊65毫秒时，他们将点击该链接有两个机会，因此 instant.page 此时开始预加载，平均超过 300 毫秒，以便页面预加载。

instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。

instant.page使用

instant.page的使用非常简单，首先打开官网：https://instant.page，会看到一个非常简洁的页面，并得到一行代码：

1<script src="//instant.page/1.2.0" type="module" integrity="sha384-0xWpXpkOUkAVETH+RMYJlSFIDNGlnPHgmqv2rP3uZS1BM48EMcxAZGW09n4pTGV4"></script>

咱们只要把这行代码添加到网站的</body>之前即可。

不过，由于官方的脚本是存储在国外的，所以建议各位直接将脚本保存到本地进行加载，缩短脚本载入的时间。

可以下载Js脚本到本地，再进行主题调用。

1<script type="module" src="存放路径"></script>

可以下载到本地，再进行调用。

1<script type="module" src="存放路径"></script>

定义加载属性

白名单标签属性： data-instant ，例：

1<a href="https://www.baidu.com" data-instant>百度</a>

黑名单标签属性： data-no-instant ，例：

1<a href="https://www.baidu.com" data-no-instant>百度</a>

全局允许：在  中添加 data-instant-allow-query-string 属性

局部允许：在使用的标签中添加 data-instant 属性（和白名单属性一样）