一个提高网站页面加载速度的JS脚本

最近发现博客加载页面速度略慢,但是没钱也不能换好的vps 于是就有了这篇文章


前言

这是一个 动态 和 静态 都能用的脚本

Google了一下发现一个有趣的东西 一个Js脚本提高浏览舒服!?

其实开始还不怎么信 看了一下简介 是一种叫做prefetch的技术!!

说白了 就是一项预加载技术 当用户有意向访问某个页面之前.

浏览器首先对此页面进行预加载 当用户真正点击链接后 会从预加载的缓存中直接读取页面内容 缩短页面的加载时间.

本文介绍的instant.page,就是使用这项技术的一个脚本 脚本会根据用户鼠标在链接上的停留时间进行判断 当达到65毫秒
用户有一半的机会打开此链接 instant.page将会对此页面进行预加载。

其实也涉及到概率 但是如果鼠标点的快的话基本上没什么效果 但是加上总是会有用到的时候 :)

如何使用

在html5的链接标签中有一个rel属性 其中有个参数就是prefetch 不过使用的人不多.

instant.page的使用非常简单 首先打开官网:[https://instant.page][1] 会看到一个非常简洁的页面,并得到一行代码:

<script src="//instant.page/1.2.2" type="module" integrity="sha384-0xWpXpkOUkAVETH+RMYJlSFIDNGlnPHgmqv2rP3uZS1BM48EMcxAZGW09n4pTGV4"></script>

只需要把这行代码添加到网站的</body>之前即可.

不过呢 脚本 在国外服务器 储存着 我们访问服务器还需要时间 所以我们可以在本地创建一个 进行引用

食用方法

一 使用官方提供的带有 Cloudflare 加速的脚本

静态博客部署在github上面的和外国vps的可以直接用官网的那段加在</body>上面

二 存放在本地或者cdn上面

记得储存为js文件

格式如下

<script src="`存放路径`/instantclick-1.2.2.js" type="module"></script>

三 国内又觉得麻烦的这边提供一个已经上传至cdn的

<script src="https://cdn.zrahh.com/js/instantclick-1.2.2.js" type="module"></script>