一起来试试html5链接预取


为了加快浏览器的速度,在html5中我们可以设置页面链接预取,利用浏览器的空闲时间去下载用户即将要打开的连接,等用户真正打开的时候只需要显示出来即可,大大加快了浏览器的访问速度。我们本文讲述的内容是在Firefox环境下实现。

浏览器和开发人员都工同努力使得web浏览体验更快捷。使网站访问速度变快的众所周知的方法有很多,如使用CSS sprites和图片优化,使用htaccess来设置更长的缓存时间,javascript文件压缩,使用CDNs等等。Firefox引入了一种新的网站优化策略:链接预取。
那么什么是链接预取呢?根据mozilla的描述:


链接预取是一种浏览器机制,它利用浏览器空闲时间去下载或预读那些可能稍后就会浏览或用到的网页或文档。网页向浏览器提供了一系列的预读提示,在浏览器完成加载这个页面后,它开始默默地预取指定的文档,并且将预取到的内容放入浏览器缓存当中。当用户浏览其中的一个预取文档时,浏览器就可以迅速地从缓存中取出并展现。

简单地说,浏览器预先下载好用户浏览完当前页面后接下来可能会访问的文件(网页,图片等),并且这是很容易实现的。这项技术通常对于翻页等行为非常有用,手机上的UCWeb似乎也使用了这项技术,如针对cnbeta的新闻,网易的评论页等。

HTML5链接预取标签

<!-- 整个页面 -->
<link rel="prefetch" href="http://rockux.com/archives/node-cannot-be-inserted-at-the-specified-point-in-the-hierarchy" />
 
<!-- 仅一张图片 -->
<link rel="prefetch" href="?<a href="../wp-content/uploads/2011/01/vim4s.png">http://rockux.com/wp-content/uploads/2011/01/vim4s.png</a>" />

HTML5预取通过LINK标签来实现,将要预取的内容作为rel和href的属性值就行了。

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="/page/2" />

预取同样支持HTTPS的内容。

那么什么时候需要预取呢?预取对于你的网站来说是否需要取决于网站自身的情况,不过这里有一些典型地使用场景供参考:

  • 当一系列的页面像幻灯片一样展示时,加载后1-3页,以及上1-3页。
  • 加载本网站大部分页面都需要用到的图片。
  • 加载搜索结果页的下一页。

当然,Firefox也允许用户禁用链接预获取,禁用方法使用以下设置:

user_pref("network.prefetch-next", false);

最后,在使用预获取时,还有以下几点需要我们注意:

  • 预获取可以跨域执行,包括从其它网站获取cookies信息;
  • 预获取可以抛开网站的统计,因为用户并没有真正专门地访问指定的页面;
  • Firefox是当前唯一支持预获取的浏览器(从2003年就开始支持了),不过其它一些浏览器也在慢慢支持,或是通过插件可以支持

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3