instant.page —— 一个 JS 脚本实现网站预加载,提升页面加载速度


instant.page 使用即时预加载技术,在用户点击之前预先加载页面。当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内容,从而达到缩短页面加载时间的目的。
演示
以我博客为例,使用了这项技术后,当鼠标在一个链接停留超过 65 毫秒时,Network 里可以看见相关文章已经预加载出来了,而停留时间过短就不会预加载(红色部分,状态为 canceled

使用方法:
将以下HTML代码放在</ body> 之前即可:

<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>

但是此脚本是官方的,储存在国外服务器,对国内访问不太友好,可以将该JS脚本储存到自己的服务器上,点此获取该JS脚本,然后再根据以下格式在</ body> 之前引用:

<script src="`存放路径`/instantclick-1.2.2.js" type="module"></script>

也可以直接使用我的,使用 jsDeliver CDN 加速,速度还可以:

<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.0.2/js/instantclick-1.2.2.js" type="module"></script>

参考资料:《网站预加载 JS 脚本 instant.page》——by 左岸 ;instant.page官网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/437992.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

陀螺仪、罗经、IMU、MEMS四者的区别

罗经&#xff1a;罗经是航行器用来测量运动方位的&#xff0c;辅助定位的仪器。 磁罗经&#xff1a;磁罗经可以形象的看成指南针电罗经&#xff1a;电罗经就要用到用电源驱动的陀螺仪。 陀螺仪&#xff1a;是一种物体角运动测量装置。通过对陀螺仪双轴基点在不同运动状态下偏移…

PWN-COMPETITION-HGAME2022-Week1

PWN-COMPETITION-HGAME2022-Week1enter_the_pwn_landenter_the_evil_pwn_landoldfashion_orwser_per_fatest_your_nctest_your_gdbenter_the_pwn_land 栈溢出&#xff0c;需要注意的是下标 i 的地址比输入s的地址更高 s溢出会覆盖 i &#xff0c;于是需要小心地覆写 i 的值&am…

Hexo 博客添加 README.md 以及部署到 GitHub 丢失/显示不正常解决方法

GitHub 项目的README.md为自述文件&#xff0c;可对该项目进行介绍&#xff0c;解释等。 使用 Github Pages 和 Hexo 搭建的博客&#xff0c;如果在最开始建立仓库的时候没有创建README.md文件&#xff0c;那么在后期如何添加呢&#xff1f; 添加方法&#xff1a;在根目录 so…

REVERSE-COMPETITION-HGAME2022-Week1

REVERSE-COMPETITION-HGAME2022-Week1easyasmcreakmeFlag Checker猫头鹰是不是猫easyasm 程序一开始将si设置为0&#xff0c;然后si和28比较&#xff0c;如果si小于28则进入循环 循环体中&#xff0c;si作为下标&#xff0c;从输入中取值存入al&#xff0c;然后al左移4位&…

Failed to instantiate file__from module__The specified list does

Hello, I have a problem creating a site collection from my onet.xml. I guess the list “Pages” is not created correctly. What do I need to get it created? The error message; Failed to instantiate file "Default.aspx" from module "ProjectP…

谷歌浏览器检查更新时出错:无法启动更新检查(错误代码为 3: 0x80080005 -- system level)

谷歌浏览器检查更新报错&#xff1a;检查更新时出错&#xff1a;无法启动更新检查&#xff08;错误代码为 3: 0x80080005 – system level&#xff09;&#xff0c;如下图所示&#xff1a; 网上的解决方法都是因为谷歌被墙&#xff0c;所以要重新下载&#xff0c;事实上并不是…

Hexo 博客本地预览报错:Error: listen EADDRINUSE 0.0.0.0:4000

Hexo博客在执行hexo s进行本地预览的时候&#xff0c;默认端口号是4000&#xff0c;当该端口号被占用时会报错 Error: listen EADDRINUSE 0.0.0.0:4000 &#xff0c;此时可以关闭占用该端口的进程&#xff0c;也可以更换端口号&#xff0c;更换端口号可以通过以下两种方法实现&…

SharePoint入门识记-整体架构

SharePoint站点层次结构&#xff1a; 1.Web Application: 一般创建后对应一个IIS Web Site, 默认创建后是打不开的&#xff0c;因为网站没有任何内容。 2.Site Collection: 一个Web Application 下通常可以包含多个SiteCollection&#xff0c;创建一个SiteCollection后默认会…

如何带团队

什么样的老板才能让团队迅速壮大&#xff0c;有战斗力&#xff1f;我研究从这三个方面着手&#xff0c;供大家参考。 第一&#xff1a;分钱 当老板&#xff0c;别整太虚的&#xff0c;要清楚大家都是来挣钱的&#xff0c;办企业是赚钱&#xff0c;打工也是为了赚钱。首先谈分…

Python 中 if __name__ == '__main__': 的理解

1、这段代码的功能 一个 Python 的文件有两种使用的方法&#xff0c;第一是直接作为脚本执行&#xff0c;第二是 import 到其他的 Python 脚本中被调用&#xff08;模块重用&#xff09;执行。因此 if __name__ __main__: 的作用就是控制这两种情况执行代码的过程&#xff0c…

PWN-COMPETITION-HGAME2022-Week2

PWN-COMPETITION-HGAME2022-Week2blindecho_severoldfashion_noteblind 访问/proc/self/mem即可修改当前进程的内存&#xff0c;.text段也是可修改的 程序开始的时候直接输出了write的地址&#xff0c;泄露libc&#xff0c;然后在__libc_start_main上喷射shellcode # -*- cod…

Sharepoint学习笔记—Site Definition系列-- 1、创建Site Columns

https://www.cnblogs.com/wsdj-ITtech/archive/2012/08/12/2470219.html Site Columns是Sharepoint网站的一个重要底层结构&#xff0c;它是一类可重用的列定义或模板&#xff0c;可以将其分配给一个或多个 SharePoint 网站的一个或多个列表。 一个Site Column是由几个属性定义…

利用Cloudflare为基于GitHub Pages的Hexo博客添加HTTPS支持

2022-01-25 更新&#xff1a;博客新地址&#xff1a;https://www.itbob.cn/&#xff0c;文章距上次编辑时间较远&#xff0c;部分内容可能已经过时&#xff01; 文章目录● 前言● 注册 Cloudflare● 添加站点● 修改DNS● 开启 HTTPS● 重定向强制 HTTPSHTTP&#xff08;超文本…

REVERSE-COMPETITION-HGAME2022-Week2

REVERSE-COMPETITION-HGAME2022-Week2xD MAZEupx magic 0fake shellcreakme2upx magic 1xD MAZE 迷宫题&#xff0c;不过不是上下左右&#xff0c;而是只有前进 0-512&#xff0c;1-64&#xff0c;2-8&#xff0c;3-1 每一次v14加上前进的单位后&#xff0c;需要保证map[v14]3…

Github+jsDelivr+PicGo 打造稳定快速、高效免费图床

2022-01-25 更新&#xff1a;博客新地址&#xff1a;https://www.itbob.cn/&#xff0c;文章距上次编辑时间较远&#xff0c;部分内容可能已经过时&#xff01; 本文原创首发于我的个人博客&#xff1a;www.itrhx.com&#xff0c;欢迎访问&#xff01; 本文在我个人博客上的链接…

用于科研的移动机器人平台推荐

作者&#xff1a;知乎用户 链接&#xff1a;https://www.zhihu.com/question/59738106/answer/268510238 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 最近看到一篇介绍机器人移动平台的文章&#xff0c;与题主分…

turtlebot3入门教程

旨在用于教育&#xff0c;研究&#xff0c;产品原型和爱好应用的目的。 TurtleBot3的目标是大幅降低平台的尺寸和价格&#xff0c;而不会牺牲性能&#xff0c;功能和质量。 由于提供了不同可选&#xff0c;如底盘&#xff0c;计算机和传感器&#xff0c;TurtleBot3可以通过各…

程序员必须掌握的核心算法有哪些?

由于我之前一直强调数据结构以及算法学习的重要性&#xff0c;所以就有一些读者经常问我&#xff0c;数据结构与算法应该要学习到哪个程度呢&#xff1f;&#xff0c;说实话&#xff0c;这个问题我不知道要怎么回答你&#xff0c;主要取决于你想学习到哪些程度&#xff0c;不过…

UI设计工具比较:Sketch、Adobe XD、墨刀、Mockplus、Axure RP

UI设计工具&#xff0c;分为2个派系。 其中&#xff0c;最大、最主流的派系&#xff0c;是Sketch、Adobe XD、墨刀这个派系。 这个派系的软件&#xff0c;操作方式、思路都非常接近&#xff0c;连常用快捷键都一样&#xff0c;会一个就等于都会了。 在一个无限大的画布上&…

光学字符识别 Tesseract-OCR 的下载、安装和基本用法

OCR&#xff1a;即Optical Character Recognition&#xff0c;光学字符识别&#xff0c;是指检查纸或者图片上打印的字符&#xff0c;通过检测暗、亮的模式确定其形状&#xff0c;然后用字符识别方法将形状翻译成计算机文字的过程&#xff1b; Tesseract-OCR&#xff1a;一款由…