页面资源预加载(Link prefetch)功能加速你的页面加载速度

有了浏览器缓存，为何还需要预加载？

• 用户可能是第一次访问网站，此时还无缓存
• 用户可能清空了缓存
• 缓存可能已经过期，资源将重新加载
• 用户访问的缓存文件可能不是最新的，需要重新加载

页面资源预加载/预读取(Link prefetch)是什么？

页面资源预加载(Link prefetch)是浏览器提供的一个技巧，目的是让浏览器在空闲时间下载或预读取一些文档资源，用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示，当浏览器加载完当前页面后，它会在后台静悄悄的加载指定的文档，并把它们存储在缓存里。当用户访问到这些预加载的文档后，浏览器能快速的从缓存里提取给用户。

简单说来就是：让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面，图片，视频等)。而且方法超级的简单！

HTML5页面资源预加载(Link prefetch)写法

在 Chrome 下，我们可以用 link标签声明特定文件的预加载：

<link rel='subresource' href='critical.js'>
<link rel='subresource' href='main.css'>
<link rel='prefetch' href='secondary.js'>

在 Firefox 中或用 meta 标签声明：

<meta http-equiv="Link" content="<critical.js>; rel=prefetch">

rel='subresource' 表示当前页面必须加载的资源，应该放到页面最顶端先加载，有最高的优先级。

rel='prefetch' 表示当 subresource 所有资源都加载完后，开始预加载这里指定的资源，有最低的优先级。

PS：只有可缓存的资源才进行预加载，否则浪费资源！

HTTPS协议资源下也可以使用prefetch。

DNS预获取(dns-prefetch)

<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://completion.amazon.com'>
<link rel='dns-prefetch' href='http://fls-na.amazon.com'>

应用场景1：我们的资源存在在不同的 CDN 中，那提前声明好这些资源的域名，就可以节省请求发生时产生的域名解析的时间。
应用场景2：如果我们知道用户接下来的操作一定会发起一起资源的请求，那就可以将这个资源进行 DNS-Prefetch，加强用户体验。

Pre render

前面说到的预解析DNS、预加载资源已经够强悍了有木有，可还有更厉害的预渲染（Pre-rendering）！

预渲染意味着我们提前加载好用户即将访问的下一个页面，否则进行预渲染这个页面将浪费资源，慎用！

<link rel='prerender' href='http://www.pagetoprerender.com'>

rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面，一旦我们访问这个页面，则秒开了！

在 Firefox 中或用 rel='next' 来声明

<link rel="next" href="http://www.pagetoprerender.com">