详解HTML5中rel属性的prefetch预加载功能使用


Posted in HTML / CSS onMay 06, 2016

在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.

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

XML/HTML Code复制内容到剪贴板
  1. <link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->    

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

XML/HTML Code复制内容到剪贴板
  1. <link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->   

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

XML/HTML Code复制内容到剪贴板
  1. <link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">   

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

XML/HTML Code复制内容到剪贴板
  1. <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 地址,真正请求资源时就避免了上述这个过程的时间。

XML/HTML Code复制内容到剪贴板
  1. <meta http-equiv='x-dns-prefetch-control' content='on'>  
  2. <link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>  
  3. <link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'>  
  4. <link rel='dns-prefetch' href='http://ecx.images-amazon.com'>  
  5. <link rel='dns-prefetch' href='http://completion.amazon.com'>  
  6. <link rel='dns-prefetch' href='http://fls-na.amazon.com'>  

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

Resource prefetch
在 Chrome 下,我们可以用 link标签声明特定文件的预加载:

XML/HTML Code复制内容到剪贴板
  1. <link rel='subresource' href='critical.js'>  
  2. <link rel='subresource' href='main.css'>  
  3. <link rel='prefetch' href='secondary.js'>  

在 Firefox 中或用 meta 标签声明:

XML/HTML Code复制内容到剪贴板
  1. <meta http-equiv="Link" content="<critical.js>; rel=prefetch">  

rel='subresource' 表示当前页面必须加载的资源,应该放到页面最顶端先加载,有最高的优先级。
rel='prefetch' 表示当 subresource 所有资源都加载完后,开始预加载这里指定的资源,有最低的优先级。
注意:只有可缓存的资源才进行预加载,否则浪费资源!

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

XML/HTML Code复制内容到剪贴板
  1. <link rel='prerender' href='http://www.pagetoprerender.com'>  

rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面,一旦我们访问这个页面,则秒开了!
在 Firefox 中或用 rel='next' 来声明

XML/HTML Code复制内容到剪贴板
  1. <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'] 即可:

JavaScript Code复制内容到剪贴板
  1. var hint =document.createElement("link")   
  2. hint.setAttribute(“rel”,”prerender”)   
  3. hint.setAttribute(“href”,”next-page.html”)   
  4. document.getElementsByTagName(“head”)[0].appendChild(hint)  
HTML / CSS 相关文章推荐
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 #HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 #HTML / CSS
字中字效果的实现【html5实例】
May 03 #HTML / CSS
html5需遵循的6个设计原则
Apr 27 #HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 #HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 #HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 #HTML / CSS
You might like
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
Python 基础知识之字符串处理
2017/01/06 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Python如何实现远程方法调用
2020/08/07 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
意大利男装网店:Vrients
2019/05/02 全球购物
县级文明单位申报材料
2014/05/23 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python