instant.page是一个【gè】强大的JS脚本【běn】，他可以【yǐ】使你【nǐ】的网站【zhàn】预加【jiā】载下一个页面，它不仅对桌面端游效果【guǒ】，还能在移动端起到加速作用，而这个【gè】JS使【shǐ】用起来也很方便，这篇文章来介绍及使【shǐ】用【yòng】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.
博主英语不咋样 用谷歌翻译加上我的理解 大致意思是
桌面端：当【dāng】用【yòng】户【hù】悬停【tíng】鼠标65ms时，即开始对【duì】这个页面进行【háng】预加载，而普遍情况【kuàng】下人们对【duì】鼠标悬停都在300ms以上。
移动端【duān】：当用户触【chù】摸的屏幕【mù】的一瞬间就【jiù】开【kāi】始进行预加载，平均可以留【liú】出90ms来进行预【yù】加载【zǎi】。
官网上给了一个点击测试 鼠【shǔ】标【biāo】移动到【dào】测【cè】试按钮与按【àn】下弹【dàn】起一瞬间【jiān】的速度【dù】 博主试了试 刻意比较【jiào】快的【de】按 平均在【zài】100ms左右【yòu】 有兴趣的【de】可以去官网尝试一下
实际使用 效果很明显【xiǎn】 可【kě】以在浏览器【qì】Network测试中看到 鼠标放上就开始了预加载 仅预加载【zǎi】了html 不浪【làng】费资源 节省【shěng】流量 还【hái】大大增加【jiā】了资源分配效【xiào】率
1、WordPress使用插件（不建议）
如果你的网【wǎng】站是WordPress可以在插件中心【xīn】直【zhí】接搜索instant.page就可以安装插件【jiàn】使【shǐ】用了
博主不推荐【jiàn】使用这种方法因为 它会增【zēng】加【jiā】WordPress插件而【ér】产生【shēng】臃肿
2、使用官方代码（可以，但不太建议）
<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
解释一下：
type的module参【cān】数 它被当作一个JavaScript模【mó】块对待【dài】 不支持该参数（不支持该【gāi】JS）的浏【liú】览器【qì】 则【zé】不执行该JS
defer属性 仅适用于外链，规定脚本延迟执行
integrity属性 看【kàn】它后面是一串sha384加【jiā】密【mì】值 用来与【yǔ】这个JS进【jìn】行【háng】校验 以防下载出错或者劫持【chí】等问题
官方文【wén】档给了说明 使【shǐ】用官方的src链【liàn】接 可能会被广告插件屏蔽该JS 所以【yǐ】可能导致【zhì】部【bù】分【fèn】用户不【bú】生效
3、使用自己的资源（建议）
将该网站的这段存为JS 放到自己的服务器中或者CDN中
使用代码：
<script type="module" src="‘存放路【lù】径或【huò】域名目录’/instantpage3.0.0.js"></script>
自己用 就不用defer和【hé】integrity属性校【xiào】验了 直接引入JS就完【wán】了
默认对带有查询字符串的链接和外部链接该JS不生效
白名单标签属性
data-instant
例：
<a href="https://www.vvso.cn" data-instant>小林博【bó】客【kè】</a>
可用在外部链接中 譬如：友链、子域名网站等
黑名单标签属性
data-no-instant
不想进行预加载的链接
带有查询字符串("?")的链接
全局允许 在<body>中添【tiān】加data-instant-allow-query-string属性【xìng】
局部允【yǔn】许 在使用的标【biāo】签中【zhōng】添加 data-instant 属性（和白名【míng】单属性一【yī】样）
仅预加载某些链接（白名单模式）
如果只想预加载【zǎi】特定的链接，请在<body>中添【tiān】加一个【gè】data-instant-whitelist标签，并通【tōng】过向其添加【jiā】data-instant属性来【lái】标【biāo】记【jì】要预加载的链接。
版权所有：深圳市网商在线科技有限公司
