instant.page,一个瞬间提高网站页面加载速度的JS脚本

"夏目贵志" 发表于: 2019年03月18日

前言

有一项技术叫做prefetch,这个技术,其实说白了,就是一项预加载技术,当用户有意向访问某个页面之前,浏览器首先对此页面进行预加载,当用户真正点击链接后,会从预加载的缓存中直接读取页面内容,缩短页面的加载时间。

而如何来使用这项技术?其实在html5的链接标签中有一个rel属性,其中有个参数就是prefetch,不过使用的人不多。

康康在本文介绍的instant.page,就是使用这项技术的一个脚本,脚本会根据用户鼠标在链接上的停留时间进行判断,当达到65毫秒,用户有一半的机会打开此链接,instant.page将会对此页面进行预加载。

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

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

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

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

文章作者:康康

原文链接:https://www.usebsd.com/633.html

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

添加新评论

已有 14 条评论

  1. 我整了你这个,但是没感觉。也许现在宽带一般都很快,体验不到这个js带来的好处吧。

    1. @枫叶

      主要是现在 Nginx 很强悍了

      优化不优化无所谓了

  2. 你好,我水了篇文章,并且参考了你的文章,已经注明参考。https://www.zrahh.com/archives/399.html

    1. @左岸

      参考改成这个吧:https://www.usebsd.com/633.html

      因为我也是转载他的 (#^.^#)

  3. 竟然只需要一条代码。。

    1. @Lesun

      对 一条代码搞定~

  4. 你这个主题很不错,怎么收

    1. @老莫

      等完善了在发布 哈哈

  5. 和 InstantClick(http://instantclick.io)差不多?
    挺喜欢你现在的模板,简简单单的。

    1. @fooleap

      差不多 鼠标停留都是预先加载

      不过这个更简单无奈一点 适合新手

  6. 这真是换个好东西!感谢分享,已经用上了。

    1. @左岸

      原来qq爹哪里有一篇文章<instantclick实现的全站无刷新>https://qqdie.com/archives/instantclick-without-refresh.html

      我也是看不懂 ,感觉这个更简单无脑一点 适合我这种不会代码的新手

  7. 所谓预加载是不是跟Pjax和Ajax有关啊

    1. @九日

      没有关系模式上来说不一样~

      引用qq爹的话来说:就是能提前加载网页内容的东西,他有几种模式,第一种就是鼠标放在超链接上就开始预加载,第二种就是鼠标放上去xx毫秒后(时间可自定义)进行预加载,第三种就是鼠标点击后进行预加载。