博客启用InstantClick

博客 » IT技术 » 阅微堂系统 »

之前我发现有些网站能瞬间显示新页面，几乎没有延迟，非常类似于AJAX的刷新，但页面URL的确又变了（如果是AJAX刷新，页面地址不会变）。现在我知道这可以用InstantClick实现。本着阅微堂一直在尝鲜最新技术的传统，我毫不犹豫就装上了。

InstantClick的官方主页见 http://instantclick.io/download。根据官方描述，它主要从两个方面加快页面加载速度：

1. 网页浏览者在将鼠标挪到链接上（MouseOver）到点击鼠标（MouseDown）到点击完毕（MouseUp）一般都有400毫秒以上。不信的人可以到 http://instantclick.io/click-test这里测试一下自己的点击速度。浏览器一般在链接点击完毕后开始载入新页面。InstantClick则一旦发现鼠标挪到链接上就开始载入链接的页面内容，这可以让新页面的载入节约400毫秒以上。这个方法在手机浏览也有效。
2. InstantClick使用pushState和Ajax技术，在显示新页面时并不是重新解释执行新页面，而只是替换页面的标题和页面内容。这样做有两个好处：其一是浏览器省去了重新解释代码和式样，让页面显示速度更快，尤其对于那些页面复杂和式样较多的页面；其二是浏览器可以无缝显示，不会在页面跳转中间闪一下白屏。

具体效果可以直接参考本博客。当网速较慢时，页面上方会显示载入进度条。

由于上面的第二个技术，这个插件只对使用同样式样文件的页面才有效，否则会出现白屏等情况。而且插件并不会自动识别，需要人工把这类链接加入黑名单。插件在这方面还可改进。

另外，该插件由于在原页面上直接更新内容，导致部分JavaScript会出问题。比如百度分享的代码必须在代码最前方加入以下代码才能正常工作：

window._bd_share_main

相关文章

• 阅微堂博客系统演变史
• 阅微堂WordPress主题的一些更新
• 拥抱社交化评论系统
• 启用七牛云存储解决流量问题
• 博客启用InstantClick

© 张志强 for 阅微堂, 2014. | 链接 | 0条评论