【第54期】使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度
不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。而在HTML5里，出现了一个新的用来优化网站速度的新功能：页面资源预加载/预读取(Link prefetch)。链接预取功能就是将此概念由图片扩展到了网页内容（不需要任何AJAX代码）。
目前只有Firefox与Chrome支持这特特性，Chrome是在version 13后开始支持的。Safari与IE依然不支持。
页面资源预加载/预读取(Link prefetch)是什么？来自MDN的解释:
页面资源预加载(Link prefetch)是浏览器提供的一个技巧，目的是让浏览器在空闲时间下载或预读取一些文档资源，用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示，当浏览器加载完当前页面后，它会在后台静悄悄的加载指定的文档，并把它们存储在缓存里。当用户访问到这些预加载的文档后，浏览器能快速的从缓存里提取给用户。
简单说来就是：让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面，图片，视频等)。而且方法超级的简单！
HTML5页面资源预加载(Link prefetch)写法（Firefox）：
<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.zaoduke.net/fe.html" />
<!-- 预加载一个图片 -->
<link rel="prefetch" href=" http://www.zaoduke.net/static/images/getqrcode.jpg " />
这个特性在Firefox与Chrome在写法上有兼容性，Chrome是直接预渲染，写法是这样的：
<!-- 预加载整个页面 -->
<link rel="prerender" href="http://www.zaoduke.net/fe.html" />
<!-- 预加载一个图片 -->
<link rel="prerender" href=" http://www.zaoduke.net/static/images/getqrcode.jpg " />
HTML5页面资源预加载/预读取(Link prefetch)功能是通过Link标记实现的，将rel属性指定为“prefetch”，在href属性里指定要加载资源的地址。火狐浏览器里还提供了一种额外的属性支持：
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />
HTTPS协议资源下也可以使用prefetch。
什么情况下应该预加载页面资源
在你的页面里加载什么样的资源，什么时候加载，这完全取决于你。下面是一些建议：
1：当页面有幻灯片类似的服务时，预加载/预读取接下来的1-3页和之前的1-3页。
2：预加载那些整个网站通用的图片。
3：预加载网站上搜索结果的下一页。
4：禁止页面资源预加载(Link prefetch)
5：当你有一篇篇幅很长的文章，或在线教程，或图册等，需要分成多页显示时。
6：在你的网站首页预加载那些用户最可能访问的下一页。(可能是一个商品网站上“重点推荐”商品页面，或博客网站上最近的一篇博客)
7：搜索查询页面预加载搜索出来的前几条。
火狐浏览器里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能，你可以这样设置：
user_pref("network.prefetch-next", false);
页面资源预加载(Link prefetch)注意事项
下面是一些关于页面资源预加载(Link prefetch)的注意事项：
1：预加载(Link prefetch)不能跨域工作，包括跨域拉取cookies。
2：预加载(Link prefetch)会污染你的网站访问量统计，因为有些预加载到浏览器的页面用户可能并未真正访问。如果这种功能被广泛的使用，它会影响你的网站日志和访问统计。请考虑这样的情况，你的一个页面预存取了好几个页面，可用户实际上没有访问到这几个页面。 你的服务器（或统计工具）并不知道这两者之间的区别。
为了分清这个，Firefox会在HTTP头信息里发送X-moz: prefetch信息，但你需要在服务器端有什么东西能识别这种信息。
IE系的浏览器基本就不用去考虑了。
PS：早读君看到这篇很兴奋，现在的针对高级浏览器又有许多优化的方法，比如之前推荐的dns预获取等等。早读君在看到这篇文章的时候，脑里直接浮现如何把这个技术适当得运用到产品里。