instant.page:可以提升网页加载速度 50% 的 JavaScript 脚本

22 年 9 月 30 日 星期五
461 字
3 分钟

引言

群居防口,独坐防心。 ——勿埋我心

  如果你觉得你网站页面的跳转比较慢,或者说你想变得更快,那么这个脚本我想会比较适合你。

项目

Github:https://github.com/instantpage/instant.page

官网:instant.page

原理:

  它的作用是可以预加载,用户想访问的页面,用户点击网站链接之前,他们将鼠标悬停在该链接上。当用户徘徊 65 毫秒时,当用户真正点击链接后,就会直接从缓存中读取,以此提升网站的访问速度,因此 instant.page 此时开始预加载,平均超过 300 毫秒,instant.page 是渐进式增强 ,对不支持它的浏览器没有影响。

方法

  在网站的 <body> 添加一行 JS,一般添加在 <footer> 区域。至于 JS 的添加方法有以下几种。

官方提供的方法

不推荐

虽然有 Cloudflare 节点的加速,但对于国内而言还是比较慢的,这更像是减速了。

javascript
<script src="//instant.page/5.1.1" type="module" integrity="sha384-MWfCL6g1OTGsbSwfuMHc8+8J2u71/LA8dzlIN3ycajckxuZZmF+DNjdm7O6H3PSq"></script>

下载放到自己网站的根目录下

推荐

下载地址:Github官方下载 | ppの小窝下的 JS 脚本

javascript
<script src="/instantpage.js" type="module"></script>

懒人一键

简单方便

javascript
<script src="https://raw.githubusercontents.com/instantpage/instant.page/master/instantpage.js" type="module"></script>

采用了 7ed 加速服务,Github 原链接 raw.githubusercontent.com 替换成 raw.githubusercontents.com,多了一个 "s",很方便。

分析

优点

  1. 加载速度提升很明显,但只对站内链接有效。
  2. 只会预先加载 html,而不会加载图片之类的,所以不用担心损耗流量。

缺点

  1. 因为每次预加载都算访问成功,所以统计网站中的 PV、UV 记录会成倍增长。

  2. 如果全站使用 CDN 加速,使用该脚本会大大增加请求数,所以不建议该类网站使用。

摘自:instant.page:可以提升网页加载速度 50% 的 JavaScript 脚本

文章标题:instant.page:可以提升网页加载速度 50% 的 JavaScript 脚本

文章作者:pp

文章链接:https://ys.sy/posts/instant-page-js-boost-loading-speed[复制]

最后修改时间:


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。