instant.page一个强大JS——预加载页面，提升网页速度
instant.page一个强大JS——预加载页面，提升网页速度instant.page是一个强大的JS脚本，他可以使你的网站预加载下一个页面，它不仅对桌面端游效果，还能在移动端起到加速作用，而这个JS使用起来也很方便，这篇文章来介绍及使用instant.page。 介绍 官网地
instant.page是一个强大的JS脚本，他可以使你的网站预加载下一个页面，它不仅对桌面端游效果，还能在移动端起到加速作用，而这个JS使用起来也很方便，这篇文章来介绍及使用instant.page。
官网地址：https://instant.page/
一段来自官网的介绍
On desktop
Before a user clicks on a link, they hover their mouse over that link. When a user has hovered for 65 ms there is one chance out of two that they will click on that link, so instant.page starts preloading at this moment, leaving on average over 300 ms for the page to preload.
Another option is to preload when the user starts pressing their mouse, right before releasing it. This makes for virtually zero unused requests while still improving page loads by 80 ms on average.
On mobile
A user starts touching their display before releasing it, leaving on average 90 ms for the page to preload.
Another option is to preload links as soon as they’re visible.
博主英语不咋样 用谷歌翻译加上我的理解 大致意思是
桌面端：当用户悬停鼠标65ms时，即开始对这个页面进行预加载，而普遍情况下人们对鼠标悬停都在300ms以上。
移动端：当用户触摸的屏幕的一瞬间就开始进行预加载，平均可以留出90ms来进行预加载。
官网上给了一个点击测试 鼠标移动到测试按钮与按下弹起一瞬间的速度 博主试了试 刻意比较快的按 平均在100ms左右 有兴趣的可以去官网尝试一下
实际使用 效果很明显 可以在浏览器Network测试中看到 鼠标放上就开始了预加载 仅预加载了html 不浪费资源 节省流量 还大大增加了资源分配效率
1、WordPress使用插件（不建议）
如果你的网站是WordPress可以在插件中心直接搜索instant.page就可以安装插件使用了
博主不推荐使用这种方法因为 它会增加WordPress插件而产生臃肿
2、使用官方代码（可以，但不太建议）
<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
解释一下：
type的module参数 它被当作一个JavaScript模块对待 不支持该参数（不支持该JS）的浏览器 则不执行该JS
defer属性 仅适用于外链，规定脚本延迟执行
integrity属性 看它后面是一串sha384加密值 用来与这个JS进行校验 以防下载出错或者劫持等问题
官方文档给了说明 使用官方的src链接 可能会被广告插件屏蔽该JS 所以可能导致部分用户不生效
3、使用自己的资源（建议）
将该网站的这段存为JS 放到自己的服务器中或者CDN中
使用代码：
<script type="module" src="‘存放路径或域名目录’/instantpage3.0.0.js"></script>
自己用 就不用defer和integrity属性校验了 直接引入JS就完了
默认对带有查询字符串的链接和外部链接该JS不生效
白名单标签属性
data-instant
例：
<a href="https://www.vvso.cn" data-instant>小林博客</a>
可用在外部链接中 譬如：友链、子域名网站等
黑名单标签属性
data-no-instant
不想进行预加载的链接
带有查询字符串("?")的链接
全局允许 在<body>中添加data-instant-allow-query-string属性
局部允许 在使用的标签中添加 data-instant 属性（和白名单属性一样）
仅预加载某些链接（白名单模式）
如果只想预加载特定的链接，请在<body>中添加一个data-instant-whitelist标签，并通过向其添加data-instant属性来标记要预加载的链接。
版权所有：深圳市网商在线科技有限公司
