使用InstantClick.js,加快加载速度

InstantClick是一个js脚本,在某些时刻使用提前加载网页的策略来减少打开一个链接的等待时间。

这些时刻包括打开一个链接前: mouseover(hover)mousedowntouchstart(移动设备上)等。

如何使用 InstantClick

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

下载好 instantclick.min.js。

黑名单加载方式

在网页的以前,添加如下代码:

<script src="instantclick.min.js" data-no-instant></script>

<script data-no-instant>InstantClick.init();</script>

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

白名单加载方式

在网页的以前,添加如下代码:

<script src="instantclick.min.js" data-no-instant></script>

<script data-no-instant>InstantClick.init();</script>

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

可能的坑

还没自己研究过,但是据说在资源变化时要加标记data-instant-track,有大坑。参见:https://instantclick.io/assets-changes

还有一个伪progress bar,我选择不隐藏他。参见:https://instantclick.io/progress-bar