一个提高网站页面加载速度的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>
版权声明:本文为原创文章,版权归 番茄酱 所有.
本文链接:https://i.kurumi.ink/2019/06/16/7/index.html
所有原创文章采用 署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0) 进行许可.
本文链接:https://i.kurumi.ink/2019/06/16/7/index.html
所有原创文章采用 署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0) 进行许可.