好资源导航 » 文章资讯 » 使用InstantClick.js让页面提前加载200ms

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

2023-09-24 20:38:06 48

前言

加速网站加载的方式有很多，在@Roc的推荐下，我找到了这个InstantClick.js，仔细查看了官网的英文文档，发现InstantClick.js有个很好的实现思路(how-it-works)。

在访问者点击一个链接之前(鼠标测试：testyourselfhere)：

悬停hover(hover->click之间200ms左右)
鼠标按下Mousedown(Mousedown->click之间100ms左右)，
Touchstart手机触碰

这两个事件之间通常有200ms的间隔，InstantClick利用这个时间间隔预加载页面。这样当你点击页面的时候，其实页面已经加载到本地了，呈现当然也就会很快。

当然InstantClick也使用了Pjax：pushState和Ajax技术

同时我试用了下，的确效果不错。如果你的博客需要实现Pjax，InstantClick会是个不错的选择。

使用方法

下载instantclick.js。instantclick.min.js仅仅2.5Kb，很小

使用


InstantClick.init();

注：

data-no-instant的含义是，这个JS只会运行一次，需要根据自己的情况，设置
如果想避免不必要的预加载，关闭hover，启用Mousedown是个不错的选择，moursedown意味着已经点击链接

查看效果

打开chromeconsole，查看network视图，会在每次hover时，都可以先加载页面，在click时展示结果页面。

由于没有一个好的截动画软件，所以没有gif动画展示

扩展

InstantClick也提供了几个事件可以设置。

change页面更改完毕，即click触发加载后
fetch页面开始预加载
receive页面预加载完毕，即：hover或mousedown触发的预加载，但不一定会change，因为用户不一定click

实例

因为使用ajax，所以googlega不会统计PV，所以增加change方法



/*GoogleAnalyticscodehere,withoutga('send','pageview')*/

InstantClick.on('change',function(){
ga('send','pageview',location.pathname+location.search);
});

InstantClick.init();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐