想法

偶然间发现了这个Javascript，比之前站点部署的pjax好太多了
链接：InstantClick官网

InstantClick 官方提供3种触发方式

• 鼠标悬停(默认)

  • 鼠标悬停在连接上立马加载链接内容，仅仅加载基本html，不加载多媒体内容
  • 来回在一个或多个链接移动，会极大增加链接数量

• 鼠标按下

  • 鼠标按下瞬间加载链接内容，官网的话是：This brings nearly zero overhead to your server and still brings a “magical” speed boost.
  • 近乎为0的服务器开销，并且带来像“魔法”一样的加速效果。
  • 听起来很强，我打算用这个

  InstantClick.init('mousedown');

• 鼠标悬停一定时间

  • 这个不建议，跟没用一样

  InstantClick.init(50);

移动端体验

第二种是首选

如何使用

下载官网的instantclick.min.js到服务器中
js在body结束前引用

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

InstantClick默认集成了进度条，纯纯样子货

In the future, it should be possible to make the bar show real progress (by looking at the server’s Content-Length header).

版权属于：qqAys

本文链接：https://qqays.xyz/archives/improve-user-experience-instantclick-deployment-records.html

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。