欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > AG亚游集团html5 >

网页优化HTML5中rel属性的prefetch预加载功能使用

来源:未知 ?? 时间:2019-04-03 10:35?作者:小飞侠

[导读] 网页优化HTML5中rel属性的prefetch预加载功能使用,在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存...

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

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

XML/HTML Code

  1. <link rel="prefetch" href="/wwwaff4exampleaff4com/"> <!-- Firefox -->    

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

XML/HTML Code

  1. <link rel="prerender" href="/wwwaff4exampleaff4com/"> <!-- 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='/g-ecxaff4images-amazonaff4com'>  

  3. <link rel='dns-prefetch' href='/z-ecxaff4images-amazonaff4com'>  

  4. <link rel='dns-prefetch' href='/ecxaff4images-amazonaff4com'>  

  5. <link rel='dns-prefetch' href='/completionaff4amazonaff4com'>  

  6. <link rel='dns-prefetch' href='/fls-naaff4amazonaff4com'>  

应用场景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='/wwwaff4pagetoprerenderaff4com'>  

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

XML/HTML Code

  1. <link rel="next" href="/wwwaff4pagetoprerenderaff4com">  

不是所有的资源都可以预加载
当资源为以下列表中的资源时,将阻止预渲染操作:
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)  


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

台媒称美海军陆战队9月进驻台湾 美方火速否认 法官因判决书错漏多向当事人道歉 法院将调查处理 耀才证券陈伟聪:恒指仍未摆脱下试50天线之威胁 墨总统候选人公开抨击特朗普 称不做被敲打的玩偶 董小姐和雷布斯5年赌约将至 10亿赌金背后意味多多 经济增长利好兑现 美股后市喜忧参半 华为降住房公积金比例 评论:平衡企业负担与职工利益 牛汇:多家国际顶级机构最新市场点评一览 俄美女总统候选人谈大选辩论:像在地狱里 很糟糕 国务院机构改革:优化审计署职责 避免重复和监督盲区 媒体盘点多地滴滴司机骚扰乘客事件:锁车语言恐吓 联想的两极:转型阵痛与超车机会
日本一名科长偷拍女下属裙底被免职:有上百部视频 畅游第二季度总营收1.13亿美元 同比下滑25% 国家卫计委主任李斌:居民医保人均补助再增加40元 新疆阿图什市发生4.6级地震 震源深度6千米 天津落户众生相:之前有人花4万 中介称损失30多万 维特尔:倍耐力为梅奔和红牛更换了轮胎配方 李建勤任四川广安市委书记(图/简历) 美联储会议即将召开 金价周一连续第三天下跌 假茅台产业链:年赚百万很简单 假包装春节卖断货 93岁金融泰斗黄达批经济学家:一些人不理解货币制度 女排最终战心态仍占首位 王媛媛身体不适未训练 全国中学哪家强?看看清华北大自主招生初审名单
[新浪彩票]足彩18068期投注策略:里昂主胜可搏 英银本周会加息吗?这个抉择其实很艰难 心疼完“冰花男孩” 面对其他困境儿童应该咋办? 冬奥之后雪上项目硝烟再起 回转之王夺第57冠 扒一扒|一路狂输底线全无!联盟最敬畏之师崩了 韩媒:“亲信干政”案二审法官和朴槿惠弟弟是同学 天津发布人才引进新政:本科毕业不超40岁直接落户 奇牛国际:脱欧后英国服务业难以进入欧盟市场 默认与闺蜜杨幂不和?唐嫣:不愿多谈此事 投资两万的小型加工厂 养一百只土鸡利润多少 怎么赚钱快 现实点的 赚钱最快的八个方法 AG亚游集团