本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2019-10-29 | 编程技术 | 1889 次阅读 | 等你评论 | 0 次点赞 | 繁体

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

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

安装 instantclick

instantclick 官网:http://instantclick.io/
instantclick 使用方法非常简单,只需要从官网下载对应的js库,然后引用到网站底部(</body>之前)即可。

<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

标签: javascripthtml

猜你喜欢
Typecho纯代码生成sitemap站点地图
想要实现 Typecho 纯代码生成 sitemap 站点地图只需要 2 步就够了。1、在博客主题目录新建 sitemap.php 页面,放入以下代码:<?php /** *HTML版网站...
Lazysizes.js图片懒加载的使用
lazysizes 是一种快速(无垃圾),对 SEO 友好且可自动初始化的 lazyloader,用于图像(包括响应图像 picture/ srcset),iframe,脚本/小部件等。它还通过...
通用的检测到广告屏蔽插件进行弹窗提示实现方法
用的 js 方法来检测,按理说所有博客都能使用,就是在打开网页的时候进行一次判断。如果发现没有加载广告代码,就会出来一个弹窗来提示浏览者将本站加到广告拦截插件的白名单里面。别喷我,个人站长经营实...
javascript | 原生JS多语言切换简单实现
由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 jQuery,所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子,仅供参考。<bo...
原生js实现ajax方法
由于不想多引入一个 jquery,百度了一个原生 js 实现 ajax 的方法(超简单),挺不错的,现在就分享给大家,也给大家做个参考。首先新建一个 js 文件:function ajax(){...
github 的黑夜模式小猫咪动画源码
github 上的小猫咪黑夜模式切换很可爱,想要~ 。于是花了点时间扒了下来放在了自己的博客上。秉着开源精神,将源码分享给大家。废话少说,上代码html:<!-- 暗黑模式 --> ...
漫威宇宙时间线观看顺序(持续更新)
漫威宇宙是一个相当庞大的系列。 **单就漫威电影来说,按系列分,可分为:** 《钢铁侠》《无敌浩克》《美国队长》《雷神》《银河护卫队》《黑豹》《蚁人》《奇异博士》《蜘蛛侠》《惊奇队长》《复
Excel 纵向查找函数 vlookup() 使用入门
# 函数介绍 VLOOKUP 函数是 Excel 中的一个纵向查找函数,在日常工作中,我们时长需要从总表中查找出一下数据,比如一个活动哪些人参加,这是仅仅知道姓名或者工号,那需要怎样从总表里获取
(首次提交评论需审核通过才会显示,请勿重复提交)