使用instant.page提高网页加载速度
Mark Lv4

1、原理

其实简单来说,就是当用户鼠标悬停在站内链接上超过65ms时,他们就有点开该链接的概率,因此instant.page就进行预加载,然后用户访问该页面时浏览器就是从cache里面读取,因此加快了页面打开速度。

2、使用


2.1、引用官方JS

</body>标签前加入一段官方提供的代码:

1
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

如果服务器在国外的话,可以使用该方法引入JS;若是服务器在国内,该段JS加载速度可能会有点慢。

2.2、引用本地JS

我们可以将上面那段JS下载下来,然后再在自己的网站中引用。大家可以进入官网下载源码,也可以点击此处下载。 同样的方法进行引用

1
<script src="your/path" type="module"></script>

HTML

Copy

3、注意事项

(1). 引入代码必须放置在</body>前面,而不是<head></head>中,否则会因为页面没有完全加载完毕,而导致instant.page无法使用

(2). instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。

(3). instant.page只会预加载自己的站内链接,而不会预加载其他外链。

4、效果

使用instant.page之后,可以看到当鼠标停留在站内某个链接时,instant.page便会发出一个异步请求GET该链接的页面。下图中红色的请求代表用户停留时间不足65ms,也相当于点击该链接的概率很低,因此instant.page就停止了加载,其他的代表正常预加载页面。

img

然后用户若是点击该页面的话,便是from disk cache。使用instant.page之后,直观感受上页面加载速度更快~

  • Post title:使用instant.page提高网页加载速度
  • Post author:Mark
  • Create time:2021-01-16 20:23:41
  • Post link:https://x.iqimeng.com/2021/01/16/study/instant.page提高网页加载速度/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.