前言

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

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

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

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

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

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

使用方法

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

使用

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

注：

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

查看效果

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

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

扩展

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

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

实例

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

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga('send', 'pageview') */
 
InstantClick.on('change', function() {
 ga('send', 'pageview', location.pathname + location.search);
});
 
InstantClick.init();
</script>

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

# InstantClick.js页面加载  # InstantClick.js加载  # 提升页面加载速度的插件InstantClick  # 详解如何让InstantClick兼容MathJax、百度统计等  # 关于预加载InstantClick的问题解决方法  # 加载  # 是个  # 鼠标  # 自己的  # 几个  # 就会  # 很好  # 看了  # 有个  # 有很多  # 当你  # 会在  # 这两个  # 只会  # 用了  # 英文  # 按下  # 我找  # 但不  # 也使 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 使用PHP下载CSS文件中的所有图片【几行代码即可实现】  制作旅游网站html,怎样注册旅游网站？  香港服务器WordPress建站指南：SEO优化与高效部署策略  Bootstrap整体框架之JavaScript插件架构  Python文件操作最佳实践_稳定性说明【指导】  企业网站制作这些问题要关注  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  Laravel如何实现API资源集合？（Resource Collection教程）  🚀拖拽式CMS建站能否实现高效与个性化并存？  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  Laravel怎么在Controller之外的地方验证数据  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  大连 网站制作,大连天途有线官网？  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  nodejs redis 发布订阅机制封装实现方法及实例代码  JavaScript Ajax实现异步通信  php json中文编码为null的解决办法  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  如何获取PHP WAP自助建站系统源码？  Laravel如何实现本地化和多语言支持？（i18n教程）  微信h5制作网站有哪些,免费微信H5页面制作工具？  创业网站制作流程,创业网站可靠吗？  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  Laravel如何处理异常和错误？（Handler示例）  网易LOFTER官网链接 老福特网页版登录地址  HTML 中如何正确使用模板变量为元素的 name 属性赋值  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用  详解Android图表 MPAndroidChart折线图  大连网站制作公司哪家好一点,大连买房网站哪个好？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  打造顶配客厅影院，这份100寸电视推荐名单请查收  青岛网站建设如何选择本地服务器？  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  网站制作软件有哪些,制图软件有哪些？  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  浅谈redis在项目中的应用  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？