在HTML5中，有一个非常有用但经常被忽略的特性，那就是预取。其原理是：

利用浏览器的空闲时间，先下载用户指定的内容，然后缓存，这样下次用户加载时，直接从缓存中取出，效率会快一些。

比如：比如预加载某个页面，可以这样：

XML/HTML代码将内容复制到剪贴板

link rel=' prefetch ' href=' http://www . example.com/'！-火狐-

但如果是谷歌，就用另一个名字，即：

XML/HTML代码将内容复制到剪贴板

link rel=' prerender ' href=' http://www . example.com/'！-铬-

即使在不支持的浏览器中，使用此功能也不会出错，但浏览器无法解决。

所以，如果你觉得有办法提前预测用户期望的页面(比如用户看最新流行热图，他可能会先看页，继续看下一页。此时，您可以预加载此功能。).比如，

XML/HTML代码将内容复制到剪贴板

linkrel='prefetch'href='？phpechoget _ next _ post _ page _ link()；'

也可以单独拍照，比如：

XML/HTML代码将内容复制到剪贴板

link rel=' prefetch ' href='/images/test . jpg '/

有了浏览器缓存，为何还需要预加载？1。用户可能是次访问网站，此时没有缓存

2.用户可能已经清空了缓存

3.缓存可能已过期，资源将被重新加载

4.用户访问的缓存文件可能不是最新的，需要重新加载

5.5的预加载技术。铬

Chrome足够聪明，可以根据你的浏览历史来预测你可能会访问或搜索哪些网站，并在你打开网站之前加载一些资源。

例如，当您在搜索框中输入“amaz”时，它会猜测您可能想要访问Amazon.com，这可能会帮助您加载该网站的一些资源。

如果这个预测算法准确的话，可以大大提高用户的浏览体验。

DNS prefetch我们知道，当我们访问www.amazon.com这样的网站时，我们需要先将域名翻译成相应的IP地址，这是一个非常耗时的过程。

DNS预取分析该页面所需资源所在的域名，并在浏览器空闲时提前将这些域名转换为IP地址，避免了实际请求资源时上述过程的时间。

XML/HTML代码将内容复制到剪贴板

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 '

场景一：我们的资源存在于不同的cdn中，所以提前声明这些资源的域名可以节省请求发生时域名解析的时间。

应用场景二：如果我们知道用户的下一个操作肯定会发起资源请求，我们可以DNS-预取这个资源来增强用户体验。

Resource prefetch在Chrome下，我们可以用链接标签声明具体文件的预加载：

XML/HTML代码将内容复制到剪贴板

link rel=' subresource ' href=' critical . js '

link rel=' subresource ' href=' main . CSS '

link rel=' prefetch ' href=' secondary . js '

在Firefox中声明或者用元标签声明：

XML/HTML代码将内容复制到剪贴板

meta http-equiv=' Link ' content=' critical . js；“rel=预取”

Rel='subresource '表示必须加载到当前页面上的资源应该放在页面的顶部并首先加载，具有更高的优先级。

Rel='prefetch '意味着在子资源的所有资源都被加载之后，这里指定的资源将以更低的优先级被预加载。

注意：只有可缓存的资源才会被预加载，否则会浪费资源！

Pre render提到的预解析DNS和预加载资源已经够强悍了，但是还有更强大的预渲染！

预渲染就是我们提前加载用户将要访问的下一页，否则浪费资源，慎用！

XML/HTML代码将内容复制到剪贴板

link rel=' prerender ' href=' http://www . pagetprerender.com '

Rel='prerender '意味着浏览器将帮助我们呈现但隐藏指定的页面。一旦我们访问这个页面，秒将开始！

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

XML/HTML代码将内容复制到剪贴板

link rel=' next ' href=' http://www . pagetprerender.com '

不是所有的资源都可以预加载当资源位于以下列表中时，阻止预渲染操作：

1.网址包含下载资源

2.该页面包含音频和视频

3.ajax请求3。开机自检、放入和删除操作

4.超文本传输协议认证(认证)

5.HTTPS佩奇

6.带有恶意软件的页面

7.弹出页面

8.占用大量资源的页面

9.打开chrome开发工具开发工具

手动触发预渲染操作可以在标题中插入强链接[rel='prerender']:

JavaScript代码将内容复制到剪贴板

var hint=document . CreateElement(' link ')

hint.setAttribute("rel "，" prerender ")

hint.setAttribute("href "，" next-page.html ")

document . getelementsbytagname(" head ")[0]。appendChild(提示)