钧言极客钧言极客

钧言极客

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

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

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

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

instant.page使用

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

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

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

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

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

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

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

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

定义加载属性

白名单标签属性: data-instant ,例:

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

黑名单标签属性: data-no-instant ,例:

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

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

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

未经允许不得转载:钧言极客 » 实现网站页面秒开-预加载JS脚本instant.page

评论 抢沙发