HTML5中如何使用rel属性的预加载功能？

举个例子说明:比如要预先加载某个页面,可以这样:

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->

但如果是google的话,要用另外的一个名称,即:

<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

即使在不支持的浏览器,用了这个特性其实是不会出错的,只不过浏览器解析不到而已, 所以,如果你感觉能有办法预先预测到用户期望点的页面(比如用户看最新的受欢迎的热图,他 可能看了第一页后,会继续看下一页,这个时候就可以用预先加载这个特性了).比如 :

<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">

而单独取一张图片也是可以的,比如:

<link rel="prefetch" href="/images/test.jpg"/>

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

1.用户可能是第一次访问网站，此时还无缓存2.用户可能清空了缓存3.缓存可能已经过期，资源将重新加载4.用户访问的缓存文件可能不是最新的，需要重新加载5.Chrome 的预加载技术

现在的 chrome 聪明到根据你的浏览记录，预测到你可能访问或搜索哪些网站，在你打开网站之前就加载好了一些资源了。举个栗子，当你在搜索框输入 "amaz" 时，它猜测到你可能要访问 amazon.com，可能就帮你加载了这个网站的一些资源。如果这个预测算法精准的话，就能大大地提高用户的浏览体验了。

DNS prefetch我们知道，当我们访问一个网站如 www.amazon.com 时，需要将这个域名先转化为对应的 IP 地址，这是一个非常耗时的过程。DNS prefetch 分析这个页面需要的资源所在的域名，浏览器空闲时提前将这些域名转化为 IP 地址，真正请求资源时就避免了上述这个过程的时间.

<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'>

Resource 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 所有资源都加载完后，开始预加载这里指定的资源，有最低的优先级。注意：只有可缓存的资源才进行预加载，否则浪费资源！

Pre render前面说到的预解析DNS、预加载资源已经够强悍了有木有，可还有更厉害的预渲染（Pre-rendering）！预渲染意味着我们提前加载好用户即将访问的下一个页面，否则进行预渲染这个页面将浪费资源，慎用！

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

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

不是所有的资源都可以预加载

当资源为以下列表中的资源时，将阻止预渲染操作：1.URL 中包含下载资源2.页面中包含音频、视频3.POST、PUT 和 DELETE 操作的 ajax 请求4.HTTP 认证(Authentication)5.HTTPS 页面6.含恶意软件的页面7.弹窗页面8.占用资源很多的页面9.打开了 chrome developer tools 开发工具

手动触发预渲染操作

在 head 中强势插入 link[rel='prerender'] 即可：

var hint =document.createElement("link")    hint.setAttribute(“rel”,”prerender”)    hint.setAttribute(“href”,”next-page.html”)    document.getElementsByTagName(“head”)[0].appendChild(hint)

以上就是HTML5中如何使用rel属性的预加载功能？的详细内容，更多内容请关注技术你好其它相关文章！