使用InstantClick优化加载体验

这件事的起因是我想要给自己的博客加个rss,博客的基本操作嘛,结果这个rss让我发现了原来的主题的一些问题。

起因

我加入了rss之后,在博客页面中有个rss的按钮,是一个指向本站xml资源的超链接,但是我在测试时发现按下这个按钮并没有跳转,按下旁边的github超链接按钮却没有问题。

这让我很是奇怪,打开网页调试器,发现每次按下rss链接时,会有一个js脚本错误,经过查看是原来的主题用的SinglePager.js脚本出现了问题,然后我就去看这个脚本是做什么的。

在SinglePager的github页面介绍中,说这个工具的作用和InstantClick是相似的,于是我去看了InstantClick是什么,发现是用来加速web页面加载的。

既然SinglePager只是用来加速页面加载的工具,那么直接去掉应该也没事,于是我就将其去掉;然后发现自己的博客在点击菜单中的分类、tags等选项时,新的页面要过一会才能出现,这样看来,预加载的功能还是很有用的。

InstantClick

既然预加载能够大幅度提升浏览体验的流畅性,那么我索性就去使用InstantClick,官网在InstantClick.io,使用也十分简单,只要在html页面中加载它的脚本并使用就行了。

官网的用法介绍如下,先将js脚本放到自己网站上,在html页面中插入下方的第2、3行代码就可以了。

1
2
3
4
5
...
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>

但是github pages加载静态资源实在有点慢,因此我的做法是从cdn加载脚本,这样能够更加快速。

1
2
<script src="https://cdn.jsdelivr.net/npm/instantclick@3.1.0-2/dist/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

体验

InstantClick官网有对点击链接行为的介绍,我自己也算人机交互半桶水,但是之前并没有考虑过按钮点击的延迟问题,官网介绍说,从鼠标移动到按钮上,到真正按下还有不少的时间,经过测试可能在100-200ms左右,而这段时间足够做很多预加载了。

加入InstantClick后,博客又恢复了流畅的体验,这真是神器。当然,缺点是服务器的压力可能变大了,对网络带宽的占用也略变高了。

PS: 吃饭时喝了点米酒,现在感觉头有点沉。明天要考试了,还有一个项目的ddl,我现在又写博客又喝米酒真是作死。