使用InstantClick.js让页面提前加载200ms

使用InstantClick.js可以让网站在用户点击链接之前预加载页面，从而大大缩短页面加载时间，提高用户体验。下面是使用InstantClick.js来让页面提前加载200ms的完整攻略。

安装InstantClick.js

第一步是引入InstantClick.js文件。你可以直接下载该文件，也可以用CDN链接。推荐使用CDN资源，因为这样可以用浏览器缓存，以加速加载速度。在HTML文件的head元素中添加下面的代码（注：这里示例使用CDN链接）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/instantclick/3.1.0/instantclick.min.js"></script>

配置InstantClick.js

然后，在你的JavaScript文件中，配置InstantClick.js。以下是常见的配置选项：

InstantClick.init({
    // 为链接设置CSS类，以便排除不需要使用InstantClick.js的链接
    // 例如，在链接中添加"no-instant"类名
    noForcedLinkClass: 'no-instant',

    // 指定链接的CSS选择器，以便选择需要使用InstantClick.js的链接
    replaceDelay: 200, 
    // 链接点击后，页面发生更改前的等待时间，单位ms

    preloadImages: true, 
    // 开启图片预加载

    preloadFonts: true
    // 开启字体预加载
});

其中，replaceDelay选项是最为重要的，它设置了链接点击后，InstantClick.js预加载页面所等待的时间。将replaceDelay 设置为200ms，就可以让页面预加载提前200ms，进一步提高响应速度。

定制InstantClick.js不在本次讲解范围之内，这里就不做过多赘述了。 如果要了解更多细节，请参阅官方文档：https://instantclick.io/docs

示例说明

在使用InstantClick.js的时候，你可以从以下两个方面改进你的网站：

预加载下一页的内容

例如，在你的网站中有一个文章列表，用户需要通过点击文章链接进入文章详情页。在加载文章详情页时，InstantClick.js可以预加载下一篇文章的内容。这样，当用户点击下一篇文章时，文章内容会瞬间加载出来，而不需要等待。

以下代码是将页面在200ms之前预加载到下一篇文章的示例：

InstantClick.init({
    replaceDelay: 200, 
    // 设置在链接点击之后，页面发生更改前的等待时间

    // 预加载下一页的内容，触发预加载的CSS选择器为".next-link"
    instant: function(url, isTemporary) {
        if (isTemporary) {
            return false;
        }

        document.querySelector('.next-link[href="'+url+'"]').click();

        //显示预加载的页面
        return true;
    }
});

开启图片预加载

另一个实用的InstantClick.js功能是开启图片预加载。在InstantClick.js中开启图片预加载后，所有的图片将被提前下载。当用户点击包含图片的链接时，即可立即呈现图片，而不需要等待图片下载。

以下代码是开启图片预加载的示例：

InstantClick.init({
    replaceDelay: 200, 

    // 开启图片预加载
    preloadImages: true,

    // 开启字体预加载
    preloadFonts: true,

    // 屏蔽不需使用InstantClick.js的链接
    noForcedLinkClass: 'no-instant',

    // 触发预加载的CSS选择器为".instant-link"
    instant: function(url, isTemporary) {
        return document.querySelector('.instant-link[href="'+url+'"]');
    }
});

结论

使用InstantClick.js可以让网站加载速度更快，因为它能够预加载页面。在本文中，我们介绍了InstantClick.js的基本用法和两个示例，其中一个是预加载下一页的内容，另一个是开启图片预加载。键入正确的配置选项，即可轻松地将InstantClick.js整合到您的网站中，更好地满足您的用户。