使用InstantClick提高网页加载速度

发现有些网站能瞬间显示新页面,几乎没有延迟,非常类似于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

Tagged: , ,

Comments are closed.