目前本博客正在使用 Hexo 做 SSG (static site generation), 我只需要使用 Markdown 编写文章后推送到 GitHub, Cloudflare 就能自动构建出静态页面并部署到 Cloudflare Pages.
由于 Cloudflare 本身比较给力, 本博客在境外的访问速度和延迟还是不错的, PageSpeed Insights 性能得分 99. 然而由于 Cloudflare 没有境内的节点, 访问的延迟就有部分增加.
之前尝试使用过国内 CDN, 也尝试过 Cloudflare 优选 IP 的方法, 虽然确实解决了问题, 但造成了部署上的一些麻烦, 后来没有继续使用.
然后, 我就看到了本文的主角 - Instant.page. 它利用的是浏览器的 Prefetch 机制: 用户点进某个链接前, 鼠标先要移动到这个链接, 按下并松开左键.
这个插件就是利用了其中的时间差: 如果用户要点击一个链接, 其 Hover 到 Click 事件之间有一个上百毫秒的时间差. 从用户鼠标移动到链接上时, 这个 js 会通知浏览器进行 prefetch, 用户如果没有实际点击, 则不会有什么实际影响, 用户如果点击了链接, 则浏览器其实早在几百毫秒前就已经开始了请求, 就为用户省下了这段时间.
由于利用的是浏览器的原生机制, 加之页面也是纯静态的, 几乎不会造成什么兼容性问题.
安装上, 只需要使用 Hexo 提供的 Injector 功能将上述的 js 注入到每个页面的 body_end 就能生效了.
现在你就可以打开 F12 观察这个功能, 先切换到网络选项卡, 将鼠标移动到本站的链接上, 你可以看到浏览器会直接对链接发起请求, 当实际点击时, 浏览器的请求会显示 （预提取缓存） 状态, 在我的网络环境下, 有很大概率这个请求已经完成了, 此时就可以几乎瞬间加载出页面.
没什么其他要说的了, 只是分享刚刚做的一个效果还不错又不用花什么时间的小优化 0v0
本文采用 CC BY-NC-SA 4.0 许可协议发布.
作者: lyc8503, 文章链接: https://blog.lyc8503.net/post/hexo-blog-prefetch/
如果本文给你带来了帮助或让你觉得有趣, 可以考虑赞助我¬_¬