使用instant.page提高网页加载速度
Mark Lv4
2021-01-16 20:23:41 493 Words 1 Mins

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://m.iqimeng.com/2021/01/16/study/instant.page提高网页加载速度/
  • Copyright Notice：All articles in this blog are licensed under BY-NC-SA unless stating additionally.