<link rel="prefetch" href="page2.html" />
<!-- 图片，也可以是其他类型的文件 -->
<link rel="prefetch" href="sprite.png" />
从上面的HTML代码可以看出，预加载使用 <link>标签，并指定 rel="prefetch" 属性，而href属性就是需要预加载的文件路径。而Mozilla还实现了一些类似的 link rel 属性:
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" /><link rel="next" href="2.html" />
备注： https 协议也同样支持。
何时需要预加载
网站是否采用预加载取决于你的需求，下面是一些建议：
- 如果一系列的页面幻灯片一样展示，那么可以预加载前后各1至3个页面.
- 加载网站内部通用的图片
- 在搜索结果页预加载下一页
阻止预加载
Firefox 允许禁止预加载模式，代码如下：
user_pref("network.prefetch-next", false)一、DNS预解析缓存
众所周知，解析
DNS
是网站性能优化的比较重要的一部分，虽然加载时间不太长，但是很难压缩起来。特别是为了并发下载资源而使用多个
CDN
域名来加载资源的大型网站，更不可忽视，每加载资源之前都要先进行
CDN
域名的
DNS
解析转换。
如果采用
DNS
预加载，支持该功能的浏览器就会提前对该域名进行
DNS
解析并且缓存一下，而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单：
复制代码
代码如下:
<link
rel="dns-prefetch"
href="http://cdn.staticfile.org/">
<link
rel="dns-prefetch"
href="//www.google-analytics.com">
淘宝网就应用了这项技术，你可以打开淘宝网，查看源代码，最顶端就把他们的一些
CDN
服务器进行了
DNS
解析缓存。
二、资源预加载
资源预加载有很多办法，例如常见的图片预加载，有采用
CSS
的背景图片来预加载，大部分还是用
JS。目前
HTML5
提供了专门的资源预加载方法，有两个属性：prefetch（预读取）和
prerender（预渲染），分别被
Firefox
和
Chrome
浏览器支持。
1).PREFETCH
预读取
预读取就是很常见的资源预加载，当前页面加载完成之后，就会在后面偷偷的下载你指定的资源，一般是
JS
、CSS
和
图片
这类的，也可以下载页面：
复制代码
代码如下:
<link
rel="prefetch"
href="http://blog.wpjam.com/"
/>
<link
rel="prefetch"
href="http://wpjam.qiniudn.com/wpjam/logo.png"
/>
<link
rel="prefetch
alternate
stylesheet"
href="mozspecific.css"
/>
注意，目前
Firefox
浏览器支持这个功能。
2).PRERENDER
预渲染
这个更厉害了，不仅偷偷的提前下载，而且还给你渲染出来，当用户点击链接的时候，立刻给你展现出来。
复制代码
代码如下:<link
rel="prerender"
href="http://blog.wpjam.com/"
/>
注意，目前
Chrome
支持这个功能。
搜素引擎其实是最需要这种预读取的功能的，因为他们非常确定用户下一步要打开的页面（搜索结果页面），所以当用户输入搜索内容的时候，就可以提前把搜索结果页面的资源提前加载，而且应用之后，效果十分明显。
目前兼容性是个缺点，貌似只有
Chrome
和
Firefox
支持，而且用的
rel
属性是不同的，如果你想同时兼容两个浏览器，可以写成下面这样：
复制代码
代码如下:<link
rel="prefetch
prerender"
href="http://blog.wpjam.com"
/>
此外，当然为了安全没法跨域预加载资源，可能没法用在
CDN
了。
三、Download
属性
HTML5
的
Download
属性用来强制浏览器下载对应文件，而不是打开。Chrome
和
Firefox
等浏览器太过于强大，也许是为了增强用户体验，当用户点击的资源文件可以被它们识别的时候（例如
会直接在浏览器打开，mp3、mp4
等媒体直接用浏览器内置播放器播放）。但有时候，用户其实是希望直接下载而不是在浏览器上看看，这时就可以加上这个属性，属性值会对下载的文件重命名：
复制代码
代码如下:
<a
href="downloadpdf.php"
download="download.pdf">点击直接下载并保存成
download.pdf
文件</a>
如果你确定这个资源是用户肯定会下载的，就可以加上这个属性，还可以用
JS
或者手动改变想要保存的文件名。
HTML5
还有很多其他特性，但是看了很长时间书和各种资料，很少见到上面三个又比较实用的属性，拿出来分享一下。
