HTML5特性——prefetching预加载功能

HTML5的一些特性还是比较令人兴奋的，应该说是将这么多年来大家常用的技术或者迫切需要的技术都标准化了，甚是方便。

比如本文要介绍的HTML5的这个特性，就是从我们平常开发的预加载图片延伸出来的：预加载功能。

预加载图片，在当前页面预先加载下个页面需要的图片，以加快下个页面的访问速度，比如Google的首页就会预加载在搜索结果页面需要的图片。

而在HTML5中支持预加载功能，实现起来也是相当的简单，只要一段代码，而且是基于我们很熟悉的link标签实现：

<link rel="next" href="page2.html">

这样的话，浏览器就会在空闲时间（不会占用页面的加载时间）去自动下载page2.html这个页面，这样当用户点击进入page2.html页面是，浏览器就会从缓存中读取这个页面，从而加快页面的访问速度。

当然，这样的一个特性，很大程度上要基于网站的用户行为分析才能进行，否则的话效果会适合其反，预加载了一堆无用信息，浪费了带宽。

目前为止，只有Firefox支持这个特性，但是这个实现过程真是太简单了，就让我们临时无视其他浏览器吧哈哈

以下是一些使用的方法：

1. 任何时候你打算将内容分割成多页时，比如一篇巨长的文章，在线的教程，或者图片幻灯片等等
2. 在你的主页你可以加载你的用户可能会点击的页面内容（比如你的产品特色介绍，或者你最新的博客日志等等）
3. 在搜索引擎可以预加载一些热门的搜索结果等等

当然，除了可以预加载页面，我们也可以使用这个特性预加载一些静态内容，比如图片，css文件等等

仍然是使用link标签即可以实现，很方便吧

<link rel="prefetch" href="/images/big.jpeg">

一些其他有趣的观点：

• Opera, Chrome, Safari可能不久后就会支持预加载特性，但是，IE的话，可能得到2020年也说不定了。
• 如果这个特性使用频繁的话，极有可能去影响网站的访问日志和统计的。

设想有一堆预加载请求你的某些页面时，但是用户并没有真正的去访问这些页面，对于服务器（或者统计系统）来说，并不知道区别。

为了解决这个问题，Firefox在发出这些预加载请求时，会发送x-moz: prefetch的header信息，但是你需要在服务端做一些逻辑处理来检测这些请求。

更多的预加载相关资料和文章，可以访问https://developer.mozilla.org/en/link_prefetching_faq

Ref：http://keyboardy.com/programming/html5-link-prefetching/