【博客优化】使用 InstantClick

什么是 InstantClick

网址:http://instantclick.io/

InstantClick 在某些时刻使用提前加载网页的策略来减少打开一个链接的等待时间(latency),这些时刻包括打开一个链接前: mouseover(hover),mousedown,touchstart(移动设备上)等。

如何使用 InstantClick

网址:http://instantclick.io/download

下载好 instantclick.min.js

在网页的最后边,通常是 前添加如下代码:

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>

如果产品使用 InstantClick,使用黑名单的方式还是白名单的方式?

  1. 黑名单的方式;
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

如果按照上面的步骤添加了代码,这个时候所有的链接都会采用提前加载的方式进行。如果由于特殊原因,某些链接不想使用提前加载的方式,请添加 data-no-instant

<ahref="/blog/"data-no-instant>Blog</a>
  1. 白名单的方式;
<script src="instantclick.min.js"data-no-instant></script>
<script data-no-instant>InstantClick.init(true);</script>
<a href="/blog/" data-instant>Blog</a>

我更建议比较大型的项目使用白名单的方式来使用 InstantClick,为什么呢?

因为很多链接是不能使用提前加载的方式的,比如“退出”链接,“切换语言”链接,触发 javascript 操作的链接。在比较大型的项目中,直接所有链接使用提前加载的方式是很冒险的,至少我在我们项目中是冒险了一次,很多链接考虑不周到。后来也从黑名单的方式改成了白名单的方式。

使用白名单的方式,建议可以通过 nginx 日志来统计链接被访问的次数,访问多的链接优先处理。

如果产品使用 InstantClick 需要注意什么?

  1. 如何跟踪资源的更新?

网址:http://instantclick.io/assets-changes

使用data-instant-track 标记来完成,大型的项目这个地方一定要注意,会有坑。

  1. 如何自定义 progress bar

网址:http://instantclick.io/progress-bar

现在还是一个假的 progress bar,隐藏了更舒服一点。

====================================================================

 

本来因为备案问题就一直用的国外的vps,所以速度一直是很恼火的地方,虽然用了日本的ip,但是还是经常抽风或者速度不满意。国内的大部分CDN都是需要备案的,所以CDN也几乎要放弃了,唯一能做的似乎就只有做好缓存。

今天无意间在hostloc看到说一个国外网站速度爆炸,所有页面几乎秒开,自己体验了一下确实是,后来才发现原来他是用的InstantClick.js进行了预加载。

InstantClick.js的原理是什么呢,就是当你把鼠标移动到一个连接上时,它就开始进行该页面的预加载,也就是通过感官上给人感觉会快那么一丢丢(人们心理预期总是从点击开始算时间),但是其实并没有快!

安装教程:

  1. 下载InstantClick
  2. 将instantclick.min.js上传到你网站的根目录
  3. 添加以下代码到foot.php里
    <script src=“instantclick.min.js” data-no-instant></script>
    <script data-no-instant>InstantClick.init();</script>
    </body>
    </html>
  4. ok了。

=========================================================================

参考网站:https://dev.to

打赏
微信 OR 支付宝 扫描二维码
为本文作者 打个赏
pay_weixin
金额随意 快来“打”我呀~

未经允许不得转载:网赚培训|网络赚钱|国外网赚培训-信言网赚博客 » 【博客优化】使用 InstantClick

赞 (0)

评论 0

评论前必须登录!

登陆 注册