详解HTML5中rel属性的prefetch预加载功能使用
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.
举个例子说明:比如要预先加载某个页面,可以这样:
- <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'>
应用场景1：我们的资源存在在不同的 CDN 中，那提前声明好这些资源的域名，就可以节省请求发生时产生的域名解析的时间。
应用场景2：如果我们知道用户接下来的操作一定会发起一起资源的请求，那就可以将这个资源进行 DNS-Prefetch，加强用户体验。
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'>
rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面，一旦我们访问这个页面，则秒开了！
在 Firefox 中或用 rel='next' 来声明
- <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基于鼠标滚动控制植树生长动画特效源码，伴随着鼠标滚轮的滚动可呈现出树木生长的动画效果。整体动画渐变效果流畅自然2016-05-13- 下面小编就为大家带来一篇【HTML5】Canvas绘制简单图片教程。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-05-13
HTML5实现页面切换激活的PageVisibility API使用初探
这篇文章主要介绍了HTML5实现页面切换激活的PageVisibility API使用初探,PageVisibility可以使我们在切换浏览器tab页面时自动停止和播放视频,需要的朋友可以参考下2016-05-13HTML5的Geolocation地理位置定位API使用教程
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用,今天这篇文章就向大家介绍一下HTML5的Geolocation地理2016-05-12- 链接中加入download属性可以使用户将文件下载下来而不是直接用浏览器打开,截止到目前为止对HTML5提供支持的浏览器已经对这个属性支持得比较好了,下面我们就来详细看一下HTM2016-05-12
- 下面小编就为大家带来一篇HTML5事件方法全部汇总。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-12
HTML5全屏响应式缩放切换幻灯片代码是一款切换的时候当前slide会平滑缩小并移动，下一个slide会从缩小状态逐渐放大并移动到屏幕中间，效果不错。需要的朋友前来下载源码哦2016-05-10
这是一款基于html5 canvas实现的“我们要发财了”游戏源码。运行该源码按照游戏规则找到钥匙打开宝箱即可获得胜利，游戏中的小人使用键盘的方向键控制2016-05-10
这是一款基于html5实现的仿网页版微信聊天界面效果源码，可实现微信网页版聊天界面效果，在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上2016-05-09
这是一款基于html5 canvas实现的3D飞行飞行动画特效源码，其中3D飞行的飞机使用了Three.js插件，3D库使WebGL的简单实现。且飞机动画效果还可响应鼠标实现移动与远景近景等2016-05-05
最新评论