网站首页 文章专栏 让网站飞起来:instant.page预加载JS脚本的使用
让网站飞起来:instant.page预加载JS脚本的使用


一、前言


  很早之前在网上有过对预加载脚本文章的游览,网站却迟迟没有得以运用。今晚恰好失眠,赶紧更新更新,不然本博都成了“商业博客”,违背初衷,十分无趣。

  言归正传,这次介绍的是一个网站预加载的脚本instant.page。作用是可以预加载用户即将访问的页面,当用户真正点击此链接后,能够从缓存中读取,因而提高网站的访问速度。



二、作用原理



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


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


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

  



三、效果演示

 


  经过实测instant.page对访问速度的提升还是比较大的。他会默认筛选只预加载本站的链接,不会加载其他站的链接。


 ▶ 如图所示,当鼠标在左侧文章链接悬停超过 65ms 后,右侧 Network 即会对文章页面进行预加载。而悬停未超过 65ms 时,则不会进行预加载(红色部分)






 ▶ 使用 instant.page 会显著增加自己的网站的 PV 以及请求量


  如图所示,数据是4月11号的在没使用之前人均游览量是13.84,使用之后人均流量上升到了17.43,相当于每个人躲开了4个页面。这里要注意,使用付费CDN并开了全站CDN的博客,谨慎使用。不过不用担心的是,预加载只是加载html页面,图片等文件不会加载,所以不会有太多的流量损耗。






四、使用方法



(1)官方使用方法:Cloudflare 加速的脚本


  建议服务器在国外的朋友使用。只要把这行代码添加到网站的 </body>标签之前即可。


<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>




(2)把官方脚本保存到服务器使用


  建议服务器在国内的朋友使用。只需将下面这段 js 上传到自己服务器,然后在 </body>标签之前根据路径添加下面的代码即可。


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



  我所存放的路径是:


<script src="/static/js/instantclick-1.2.2.js" type="module"></script>



  如果想要更好的急速体验可以把脚本放到又拍云等平台。 





版权声明:本文由Sanshi-Blog原创出品,转载请注明出处!

本文链接:http://www.sanshi30.cn/blog/articles/103.html





赞助本站,网站的发展离不开你们的支持!
来说两句吧
最新评论