使用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，我现在又写博客又喝米酒真是作死。