钧言极客站钧言极客

钧言极客

实现网站页面秒开-预加载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 属性(和白名单属性一样)

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《实现网站页面秒开-预加载JS脚本instant.page》
文章链接:https://www.jinjun.top/29.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论