HTML5预加载功能

近年来随着HTML5等新一代技术的浪潮来临，对整个web行业带来了冲击性的改革，其中有个值得讨论的技术，预加载，这个技术是预先读取了用户接下来即将会访问页面，让用户接下来访问的时候大大了加快了页面读取速度，这个有点类似于图片预读取。


HTML5对link的rel属性添加很多的值，其中最让人激动的就是预加载功能了。它和网上提到图片预加载有时不同，它的加载时机是由浏览器决定的，只有在空闲时间才偷偷加载指定资源，防止一下子加载这么多东西把页面卡死，但是怎么使用它是一个难点，因为你必须要了解你的用户他们在接下来的页面中最有可能访问的是哪些页面，这样你才能在当前页面先设置好。


好吧我们先来看下HTML5预读取的实现代码

1. <link rel="prefetch" href="http://test.520uedCDN.com"> <!-- firefox -->
   
2. <link rel="prerender" href="http://test.520uedCDN.com"> <!-- chrome -->

复制代码

目前支持的浏览器：Firefox 3.5+，chrome 13+

此功能要慎用，现在大型网站一般都是用来预缓存CDN上面的资源文件，像淘宝首页就用了预加载，但并不是在每个页面都使用，因为这个功能极大的消耗了用户的带宽，所以使用的时候需要对自己页面进行详细的分析，例如：你的网站有80%的流量是从首页到搜索页面的，那其实你就可以在首页预先加载搜索页面的资源文件。我发现有不少人反应这个功能使用不当反而适得其反的例子，所以一般小型的站点，或者流量相对分散的页面其实没必要去使用这个功能。