提升页面加载速度:InstantClick
通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。
InstantClick的安装
安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</body>之前引用一下代码即可,例如:
<script src='/index/thumb.png' data-original="http://apps.bdimg.com/libs/instantclick/3.0.1/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
InstantClick可能会导致出现白屏的情况,官方给出了例子,解决了和Google Adsense之间的冲突。我发现百度统计也会导致白屏,在<script>中加data-no-instant会解决这个问题,就像上面的例子一样。
InstantClick工作原理
InstantClick使用pushState和Ajax(pjax)来实现,只替换<body>和头部的<title>,浏览器不必重新解析编译页面,这样在页面跳转的过程中,浏览器不会闪一下白屏,看上去页面在瞬间就加载完成了。
InstantClick的进度条
默认情况下,InstantClick在载入页面的时候,会在页面的顶部显示一个进度条,默认的颜色是#29d,你可以更改颜色:
#instantclick-bar {
background: white;
}
也可以隐藏进度条:
#instantclick {
display: none;
}
博客已经用上,可以体验一番,我是觉得快多了~
文章来源:http://www.ezloo.com/2014/09/instantclick.html
转载本站原创文章请注明:文章转自 挨踢路,链接: https://888929.tm7j5.group/articles/2224.html
评论怎么没了?
有丢失评论的情况?
我本来是回复:这就是传说中的预加载了,提交后没反应。
刚刚又是这样。。。。
应该是加了这个代码之后引发了BUG。按ctrl+enter提交好像就会有问题。
我没按快捷键,我就是点提交,可能是jq提交评论,文件还没加载全吧,因为提交后页面会刷新,只是返回空了。
还好我这次提交前有ctrl+c,不然又白打了。
问题应该已经解决了
如何解决的?
将评论区域给排除在外就好了。。。貌似点击“回复”,有时候URL上多个参数还是有点问题,继续研究
早就听说过它的大名,但好像会有些bug所以一直没用。
感觉页面简单的网站没什么需要装这个。
确实是有BUG,再观察一阵子,实在不行就撤掉。
用手机浏览感觉不到快了,要用电脑体验一下。
手机确实不明显。。。
php或者asp都可以吗
跟所使用的程序无关,完全就是JS提前load页面