您现在的位置是:首页 > 点滴分享 > 经验分享 网站首页点滴分享

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

0、前言


今天闲来没事,看到instant.page可以提高网页加载速度,就在自己博客用上了。个人觉得效果还是很不错的,所以分享一下~


1、原理


官网 描述如下:

instant.page uses just-in-time preloading — it preloads a page right before a user clicks on it.

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.

On mobile, a user starts touching their display before releasing it, leaving on average 90 ms to preload the page.

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


2、使用


2.1、引用官方JS

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

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

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

2.2、引用本地JS

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

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


3、注意事项


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

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

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


4、效果


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

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


版权声明:本文为博主原创文章,转载时请注明来源。https://blog.thinker.ink/passage/26/

 

文章评论

Top