让网站速度更更上一层楼,使用instantclick预加载

👋 相关阅读

• 41个Web开发者都收藏的实用代码
• Darkmode.Js – 一键为网站添加黑暗模式
• JavaScript + imgur API 上传图片

InstantClick 是一个 JavaScript 库，可以显着加快您的网站速度，工作原理是预加载你可能点击的链接来欺骗。

举个简单的例子比如您想点击“膨胀的面包”下一页，在鼠标放到下一页按钮按下点击之前 InstantClick 已经帮助您把下一页的内容提前加载好了，可以明显的感受到速度提升。

安装 instantclick

instantclick 官网：http://instantclick.io/ instantclick 使用方法非常简单，只需要从官网下载对应的js库，然后引用到网站底部（之前）即可。

<script src = 'https://cdn.staticfile.org/instantclick/3.1.0/instantclick.min.js' data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

使用体验

目前膨胀的面包已经使用 instantclick 预加载，虽然感觉速度提升了不少，但是依然会产生一些副作用。

• 比如在访问某些页面 CSS 加载失败导致排版混乱。

再次刷新可以解决这个问题，虽然影响不大，但还是影响体验，解决办法请继续往下阅读。

针对部分页面CSS无法预加载的问题 instantclick 提供了黑名单功能，可以将指定的 URL 链接设置为黑名单，这个链接将不再使用 instantclick 预加载。要设置黑名单只需要给链接加上 data-no-instant 属性即可。

• 解决 highlight.js 冲突问题

使用 highlight.js 库进行代码高亮的页面，highlight.js 默认使用下面这个函数来进行代码渲染：

<script>hljs.initHighlightingOnLoad();</script>

使用 instantclick 发现存在冲突，预加载的页面发现代码无法进行高亮渲染，需要将上面的渲染函数更改为：

$('pre code').each(function(i, block) {
    try{
        hljs.highlightBlock(block);
    }catch(e){

    }
});

总结

如果您服务器在海外或者本身网站速度加载缓慢，instantclick 强烈推荐给你。更多使用方法可以参考 instantclick中文文档：https://qqdie.com/archives/instantclick.html

×