您的位置:新葡亰496net > 新葡亰官网 > 详解HTML第55中学rel属性的prefetch预加载作用利用,

详解HTML第55中学rel属性的prefetch预加载作用利用,

发布时间:2019-08-10 19:31编辑:新葡亰官网浏览(180)

    前端品质优化 – 财富预加载

    2015/11/19 · JavaScript · 预加载

    原来的小说出处: ROBIN RENDLE   译文出处:bubkoo的博客(@问崖的崖)   

    当提到前端品质优化时,我们率先会联想到文件的合併、压缩,文件缓存和开启服务器端的 gzip 压缩等,那使得页面加载更加快,用户可以尽快采纳我们的 Web 应用来到达他们的目的。 

    能源预加载是另叁特性质优化本领,我们得以行使该本事来预先告知浏览器有些财富大概在以后会被应用到。

    引用 Patrick Hamann 的解释:

    预加载是浏览器对南梁说不定被选取能源的一种暗暗表示,一些能源得以在当下页面使用到,一些或然在今后的某个页面中被利用。作为开荒职员,大家比浏览器尤其精通大家的利用,所以大家得以对大家的着力财富利用该本事。

    这种做法早已被称呼 prebrowsing,但那并不是一项单一的技艺,能够细分为多少个区别的才干:DNS-prefetchsubresource 和正式的 prefetchpreconnectprerender

     

    当提到前端质量优化时,大家先是会联想到文件的联合、压缩,文件缓存和开启服务器端的 gzip 压缩等,那使得页面加载更加快,用户能够急迅采用大家的 Web 应用来达成他们的目的。
    能源预加载是另壹性子子优化技术,大家能够动用该工夫来预先告知浏览器某个财富大概在前些天会被接纳到。

    详解HTML5中rel属性的prefetch预加载成效应用,html5rel

    在HTML5中,有个很有用但常被忽视的特点,正是先行加载(prefetch),它的法规是:
    采用浏览器的空闲时间去先下载用户钦定须要的情节,然后缓存起来,那样用户后一次加载时,就间接从缓存中收取来,功效就快了.

    比方表明:举例要优先加载有些页面,能够那样:

    XML/HTML Code复制内容到剪贴板

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

    但要是是google的话,要用别的的一个称呼,即:

    XML/HTML Code复制内容到剪贴板

    1. <link rel="prerender" href="; <!-- 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=';  
    3. <link rel='dns-prefetch' href=';  
    4. <link rel='dns-prefetch' href=';  
    5. <link rel='dns-prefetch' href=';  
    6. <link rel='dns-prefetch' href=';  

    利用场景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=';  

    rel='prerender' 表示浏览器会帮我们渲染但遮蔽钦点的页面,一旦我们拜望那一个页面,则秒开了!
    在 Firefox 中或用 rel='next' 来声明

    XML/HTML Code复制内容到剪贴板

    1. <link rel="next" href=";  

    不是兼具的财富都足以预加载 当财富为以下列表中的财富时,将堵住预渲染操作:
    1.UEscortL 中含有下载能源
    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第55中学,有个很有用但常被忽略的特色,正是预先加载(prefetch),它的法规是: 利用浏览器的...

    在HTML5中,有个很有用但常被忽略的性状,就是预先加载(prefetch),它的原理是: 
    采取浏览器的空闲时间去先下载用户钦定供给的开始和结果,然后缓存起来,那样用户后一次加载时,就径直从缓存中收取来,功用就快了.

    在HTML5中,有个很有用但常被忽视的特点,正是事先加载(prefetch),它的法则是: 
    利用浏览器的空余时间去先下载用户钦定须求的原委,然后缓存起来,那样用户后一次加载时,就径直从缓存中抽取来,作用就快了.

    DNS 预解析 DNS-Prefetch

    因而 DNS 预分析来告诉浏览器以后大家兴许从有些特定的 UQashqaiL 获取财富,当浏览器真正使用到该域中的有个别能源时就足以赶紧地成功 DNS 分析。举个例子,大家现在讲不定从 example.com 获取图片或音频能源,那么可以在文书档案顶端的 `` 标签中步向以下内容:

    <link rel="dns-prefetch" href="//example.com">

    1
    <link rel="dns-prefetch" href="//example.com">

    当大家从该 URubiconL 须要四个财富时,就不再必要等待 DNS 的解析进程。该本事对使用第三方财富极度有用。

    在 Harry Roberts 的文章中提到:

    由此轻易的一行代码就足以告知那几个包容的浏览器进行 DNS 预剖析,那象征当浏览器真正诉求该域中的有些财富时,DNS 的辨析就曾经产生了。

    那就如是一个极其细小的个性优化,显得也绝不那么重大,但真相并非那样 – Chrome 平昔都做了近似的优化。当在浏览器的地址栏中输入 U汉兰达L 的一小段时,Chrome 就机关完结了 DNS 预深入分析(乃至页面预渲染),从而为每一种央浼节省了要害的年月。

    引用 Patrick Hamann 的解释:

    举个例证表明:比方要事先加载某些页面,能够这么: 

    比方表明:例如要刚开始阶段加载有些页面,能够这么: 

    预连接 Preconnect

    与 DNS 预剖析类似,preconnect 不止成功 DNS 预解析,同一时候还将拓展 TCP 握手和建构传输层协议。能够这么使用:

    <link rel="preconnect" href=";

    1
    <link rel="preconnect" href="http://example.com">

    在 Ilya Grigorik 的文章中有更详细的介绍:

    今世浏览器都试着预测网址以后急需如何连接,然后预先创立 socket 连接,进而免去昂贵的 DNS 查找、TCP 握手和 TLS 往返成本。可是,浏览器还远远不足聪明,并无法可信赖预测每一个网址的具备预链接指标。幸亏,在 Firefox 39 和 Chrome 46 中大家得以选取 preconnect 告诉浏览器我们必要进行什么预连接。

    预加载是浏览器对今后恐怕被应用财富的一种暗暗提示,一些能源得以在日前页面使用到,一些可能在前几日的少数页面中被使用。作为开拓职员,大家比浏览器尤其领悟大家的采用,所以大家能够对我们的主干能源采纳该手艺。
    这种做法早已被称为 prebrowsing,但那并非一项单一的技能,能够细分为多少个不等的技术:DNS-prefetch、subresource 和正规的 prefetch、preconnect、prerender。

    XML/HTML Code

    XML/HTML Code

    预获取 Prefetching

    假若大家规定某些能源以后早晚上的集会被采取到,大家能够让浏览器预先伏乞该财富并归入浏览器缓存中。举例,叁个图片和本子或其它能够被浏览器缓存的财富:

    <link rel="prefetch" href="image.png">

    1
    <link rel="prefetch" href="image.png">

    与 DNS 预分析差别,预获取真正央求并下载了财富,并累积在缓存中。但预获取还借助于一些标准化,某个预获取大概会被浏览器忽略,比如从三个十三分缓慢的网络中收获一个庞然大物的书体文件。况兼,Firefox 只会在浏览器闲置时开始展览能源预获取。

    在 Bram Stein 的帖子中聊到,那对 webfonts 质量进步特别醒目。方今,字体文件必须等到 DOM 和 CSS 构建完结今后才起来下载,使用预获取就能够轻便绕过该瓶颈。

    注意:要测量检验能源的预获取有一些不方便,但在 Chrome 和 Firefox 的互连网面板中都有财富预获取的笔录。还索要记住,预获取的财富未有同源计谋的限定。

    DNS 预解析 DNS-Prefetch

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

    Subresources

    那是另一个预获取措施,这种情势钦定的预获取能源具备最高的优先级,在具有 prefetch 项在此以前开始展览:

    <link rel="subresource" href="styles.css">

    1
    <link rel="subresource" href="styles.css">

    根据 Chrome 文档:

    rel=prefetch 为今后的页面提供了一种低优先级的能源预加载形式,而 rel=subresource 为当前页面提供了一种高优先级的能源预加载。

    据此,假若能源是日前页面必须的,大概能源必要尽快可用,那么最棒利用 subresource 而不是 prefetch

    因此 DNS 预分析来告诉浏览器今后大家恐怕从某些特定的 U凯雷德L 获取资源,当浏览器真正使用到该域中的某些能源时就足以赶紧地成功 DNS 剖判。比方,我们将来讲不定从 example.com 获取图片或音频能源,那么能够在文书档案最上部的 标签中出席以下内容:

    但倘借使google的话,要用其他的三个称谓,即: 

    但只即使google的话,要用别的的三个名称,即: 

    预渲染 Prerender

    那是贰个核兵器,因为 prerender 能够优先加载文书档案的具有财富:

    <link rel="prerender" href=";

    1
    <link rel="prerender" href="http://example.com">

    Steve Souders 在他的一篇小说中写到:

    那就疑似于在四个遮盖的 tab 页中开垦了有些链接 – 将下载全部能源、创造 DOM 结构、完结页面布局、应用 CSS 样式和施行 JavaScript 脚本等。当用户真正访谈该链接时,遮掩的页面就切换为可知,使页面看起来就是弹指间加载成功同样。谷歌(Google)寻找在其即时追寻页面中早已运用该才能多年了,微软也扬言将要 IE1第11中学援助该性情。

    亟需小心的是并不是滥用该特性,当您驾驭用户一定会点击有个别链接时才得以开展预渲染,不然浏览器将免费地下载全体预渲染须求的财富。

    越来越多相关钻探:

    具有预加载技巧都设有一个隐衷的高风险:对能源预测错误,而预加载的费用(抢占 CPU 财富,消功耗瓶,浪费带宽等)是慷慨激昂的,所以必须严慎行事。纵然很难分明用户下一步将访问哪些财富,但高可信赖的情状确实存在:

    • 借使用户完毕四个含有明显结果的搜寻,那么结果页面很只怕会被加载
    • 假设用户步向到登入页面,那么登入成功的页面非常的大概会被加载
    • 若果用户阅读二个多页的小说或访问贰个分页的结果集,那么下一页很恐怕会被加载

    最后,使用 Page Visibility API 可避防范页面真正可知前被实行。

    <link rel="dns-prefetch" href="//example.com">
    1
    <link rel="dns-prefetch" href="//example.com">
    当大家从该 U大切诺基L 央求三个能源时,就不再必要等待 DNS 的解析进度。该技巧对应用第三方资源非常有用。

    XML/HTML Code

    XML/HTML Code

    Preload

    preload 是贰个新专门的学问,与 prefetch 分歧(或许被忽视)的是,浏览器一定会预加载该能源:

    <link rel="preload" href="image.png">

    1
    <link rel="preload" href="image.png">

    即使该规范还并未有被抱有浏览器包容,但其幕后的图谋依然极其风趣的。

    在 哈利 罗伯特s 的稿子中涉及:

    1. <link rel="prerender" href="; <!-- Chrome -->   
    1. <link rel="prerender" href="; <!-- Chrome -->   

    总结

    展望用户下一步将做客哪些能源是困难的,须要张开大气的测量试验,不过那带来的习性提高是扎眼的。要是我们愿意尝试这么些预获取技巧,一定会明白升高用户的体验。

    经过轻松的一行代码就足以告知那多少个包容的浏览器进行 DNS 预分析,那表示当浏览器真正伏乞该域中的有个别能源时,DNS 的剖析就曾经造成了。
    那就像是贰个不行微小的性能优化,显得也不用那么主要,但真实情状并不是那样 – Chrome 一直都做了近似的优化。当在浏览器的地址栏中输入 URAV4L 的一小段时,Chrome 就机关达成了 DNS 预分析(以致页面预渲染),从而为各样恳求节省了入眼的岁月。

    尽管在不协理的浏览器,用了那些个性其实是不会出错的,只可是浏览器分析不到而已, 
    据此,假诺您以为到能有措施预先预测到用户期望点的页面(比方用户看最新的受接待的热图,他 恐怕看了第一页后,会接二连三看下一页,那年就能够用事先加载这么些性子了).举个例子 

    纵使在不协理的浏览器,用了那本性情其实是不会出错的,只可是浏览器深入分析不到而已, 
    就此,假诺您认为能有一点子预先预测到用户期望点的页面(比方用户看最新的受接待的热图,他 或然看了第一页后,会持续看下一页,今年就能够用事先加载这一个特点了).譬喻 

    深深阅读

    • Slides from a talk by Ilya Grigorik called Preconnect, prerender, prefetch
    • MDN link prefetching FAQ
    • W3C preload spec
    • Harry Roberts on DNS prefetching
    • HTML5 prefetch
    • Preload hints for webfonts

    原文:Prefetching, preloading, prebrowsing

    1 赞 5 收藏 评论

    新葡亰496net 1

    预连接 Preconnect

    XML/HTML Code

    XML/HTML Code

    与 DNS 预分析类似,preconnect 不仅仅成功 DNS 预解析,同有时候还将打开 TCP 握手和树立传输层协议。能够这么使用:

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

    <link rel="preconnect" href=";
    1
    <link rel="preconnect" href=";
    在 Ilya Grigorik 的篇章中有更详尽的介绍:

    而独立取一张图片也是足以的,例如: 

    而单身取一张图片也是足以的,举例: 

    今世浏览器都试着预测网址以往内需什么样连接,然后预先创建 socket 连接,进而裁撤昂贵的 DNS 查找、TCP 握手和 TLS 往返花费。但是,浏览器还非常不够聪明,并无法可相信预测种种网址的具有预链接目的。幸亏,在 Firefox 39 和 Chrome 46 中我们得以行使 preconnect 告诉浏览器大家供给开始展览什么样预连接。
    预获取 Prefetching

    新葡亰496net,XML/HTML Code

    XML/HTML Code

    假若大家明确有个别财富以后必然会被采纳到,大家得以让浏览器预先央求该能源并归入浏览器缓存中。比如,一个图形温州海门山歌剧本或别的能够被浏览器缓存的财富:

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

    <link rel="prefetch" href="image.png">
    1
    <link rel="prefetch" href="image.png">
    与 DNS 预深入分析不一样,预获取真正央浼并下载了能源,并储存在缓存中。但预获取还借助于一些典型,有些预获取可能会被浏览器忽略,举例从二个那二个缓慢的互联网中获取一个宏大的字体文件。并且,Firefox 只会在浏览器闲置时进行能源预获取。

    有了浏览器缓存,为啥还亟需预加载? 1.用户可能是首先次访谈网站,此时还无缓存
    2.用户恐怕清空了缓存
    3.缓存或然早就过期,能源将重新加载
    4.用户访谈的缓存文件恐怕不是流行的,要求重新加载
    5.Chrome 的预加载技能
    今日的 chrome 聪明到依照你的浏览记录,预测到你大概访谈或探求哪些网址,在您展开网址在此之前就加载好了有的财富了。
    举个栗子,当你在搜寻框输入 "amaz" 时,它估计到你可能要寻访amazon.com,大概就帮你加载了这一个网址的一些财富。
    如果这一个预测算法精准的话,就能够大大地压实用户的浏览体验了。

    有了浏览器缓存,为什么还索要预加载? 1.用户或然是第二次访谈网址,此时还无缓存
    2.用户恐怕清空了缓存
    3.缓存或许早就过期,财富将重新加载
    4.用户访谈的缓存文件也许不是流行的,须要重新加载
    5.Chrome 的预加载手艺
    于今的 chrome 聪明到依照你的浏览记录,预测到您或然访问或索求哪些网址,在您展开网址以前就加载好了有的能源了。
    举个栗子,当你在搜寻框输入 "amaz" 时,它预计到你恐怕要访问amazon.com,大概就帮您加载了这几个网址的局地能源。
    要是这些预测算法精准的话,就会大大地加强用户的浏览体验了。

    在 Bram Stein 的帖子中聊起,那对 webfonts 品质进步特别显眼。近期,字体文件必须等到 DOM 和 CSS 营造产生之后才起始下载,使用预获取就足以轻易绕过该瓶颈。

    DNS prefetch 我们明白,当大家拜会一个网址如 www.amazon.com 时,必要将以此域名先转化为相应的 IP 地址,那是二个那些耗费时间的经过。
    DNS prefetch 分析那个页面必要的财富随地的域名,浏览器空闲时提前将那些域名转化为 IP 地址,真正请求财富时就制止了上述那些进度的时刻。

    DNS prefetch 笔者们掌握,当大家拜见三个网址如 www.amazon.com 时,要求将以此域名先转化为相应的 IP 地址,那是贰个拾分耗时的进度。
    DNS prefetch 分析那几个页面须求的财富四处的域名,浏览器空闲时提前将那几个域名转化为 IP 地址,真正须要能源时就制止了上述这一个进度的日子。

    专注:要测量试验财富的预获取有一点点困难,但在 Chrome 和 Firefox 的互联网面板中都有能源预获取的记录。还亟需牢记,预获取的财富未有同源战术的限量。

    XML/HTML Code

    XML/HTML Code

    Subresources

    1. 详解HTML第55中学rel属性的prefetch预加载作用利用,能源预加载。<meta http-equiv='x-dns-prefetch-control' content='on'>  
    2. <link rel='dns-prefetch' href=';  
    3. <link rel='dns-prefetch' href=';  
    4. <link rel='dns-prefetch' href=';  
    5. <link rel='dns-prefetch' href=';  
    6. <link rel='dns-prefetch' href=';  
    1. <meta http-equiv='x-dns-prefetch-control' content='on'>  
    2. <link rel='dns-prefetch' href=';  
    3. <link rel='dns-prefetch' href=';  
    4. <link rel='dns-prefetch' href=';  
    5. <link rel='dns-prefetch' href=';  
    6. <link rel='dns-prefetch' href=';  

    那是另叁个预获取措施,这种艺术钦定的预获取财富有着最高的优先级,在富有 prefetch 项从前举办:

    运用场景1:咱们的财富存在在不一样的 CDN 中,那提前证明好那个财富的域名,就足以节省供给发生时发生的域名解析的时光。
    应用场景2:假若大家清楚用户接下去的操作必然会发起一同能源的恳求,这就足以将以此能源开展DNS-Prefetch,抓牢用户体验。

    行使场景1:咱们的能源存在在分裂的 CDN 中,那提前申明好这个资源的域名,就足以节特邀求爆发时发生的域名解析的小运。
    采取场景2:假诺大家领略用户接下去的操作必然会倡导一齐能源的伸手,那就足以将那些财富举办DNS-Prefetch,抓牢用户体验。

    <link rel="subresource" href="styles.css">
    1
    <link rel="subresource" href="styles.css">
    根据 Chrome 文档:

    Resource prefetch 在 Chrome 下,大家得以用 link标签注解特定文件的预加载:

    Resource prefetch 在 Chrome 下,大家能够用 link标签注解特定文件的预加载:

    rel=prefetch 为以往的页面提供了一种低优先级的能源预加载格局,而 rel=subresource 为当下页面提供了一种高优先级的能源预加载。
    据此,假使能源是现阶段页面必须的,只怕能源要求尽早可用,那么最佳应用 subresource 并非 prefetch。

    XML/HTML Code

    XML/HTML Code

    预渲染 Prerender

    1. <link rel='subresource' href='critical.js'>  
    2. <link rel='subresource' href='main.css'>  
    3. <link rel='prefetch' href='secondary.js'>  
    1. <link rel='subresource' href='critical.js'>  
    2. <link rel='subresource' href='main.css'>  
    3. <link rel='prefetch' href='secondary.js'>  

    那是三个核火器,因为 prerender 能够先行加载文书档案的富有财富:

    在 Firefox 中或用 meta 标签表明:

    在 Firefox 中或用 meta 标签注解:

    <link rel="prerender" href=";
    1
    <link rel="prerender" href=";
    Steve Souders 在她的一篇小说中写到:

    XML/HTML Code

    XML/HTML Code

    那就如于在一个隐身的 tab 页中开荒了某些链接 – 将下载全部财富、创立 DOM 结构、实现页面布局、应用 CSS 样式和进行 JavaScript 脚本等。当用户真正访谈该链接时,遮掩的页面就切换为可知,使页面看起来正是须臾间加载成功同样。谷歌(Google)寻觅在其即时搜索页面中已经应用该工夫多年了,微软也扬言就要 IE11中支持该天性。
    急需注意的是毫不滥用该本性,当你领会用户一定会点击某个链接时才可以进行预渲染,不然浏览器将职务地下载全体预渲染必要的财富。

    1. <meta http-equiv="Link" content="<critical.js>; rel=prefetch">  
    1. <meta http-equiv="Link" content="<critical.js>; rel=prefetch">  

    更加多相关钻探:

    rel='subresource' 表示近些日子页面必须加载的能源,应该放权页面最上方先加载,有最高的先行级。
    rel='prefetch' 表示当 subresource 全数财富都加载完后,先河预加载这里钦定的财富,有最低的预先级。
    瞩目:唯有可缓存的财富才举办预加载,不然浪费能源!

    rel='subresource' 代表近些日子页面必须加载的财富,应该松手页面顶端先加载,有参天的优先级。
    rel='prefetch' 表示当 subresource 全部能源都加载完后,初步预加载这里钦命的能源,有最低的事先级。
    小心:独有可缓存的财富才开始展览预加载,不然浪费财富!

    具备预加载技艺都设有三个地下的高危机:对能源预测错误,而预加载的开销(抢占 CPU 能源,消功耗池,浪费带宽等)是慷慨激昂的,所以必须谦虚谨慎行事。即使很难明确用户下一步将探望哪些能源,但高可相信的光景确实存在:

    Pre render 眼下提起的预解析DNS、预加载财富已经够强悍了有木有,可还应该有更决心的预渲染(Pre-rendering)!
    预渲染意味着我们提前加载好用户将要访谈的下三个页面,不然进行预渲染这一个页面将浪费财富,慎用!

    Pre render 前边提及的预解析DNS、预加载能源已经够强悍了有木有,可还只怕有更决心的预渲染(Pre-rendering)!
    预渲染意味着大家提前加载好用户将在访谈的下三个页面,不然实行预渲染这一个页面将浪费能源,慎用!

    借使用户完结一个带有醒目结果的搜索,那么结果页面很只怕会被加载
    举个例子用户走入到登录页面,那么登入成功的页面十分的大概会被加载
    假如用户阅读叁个多页的小说或访谈一个分页的结果集,那么下一页极大概会被加载
    末尾,使用 Page Visibility API 能够堤防页面真正可见前被实践。

    XML/HTML Code

    XML/HTML Code

    Preload

    1. <link rel='prerender' href=';  
    1. <link rel='prerender' href=';  

    preload 是七个新专门的工作,与 prefetch 分裂(恐怕被忽视)的是,浏览器一定会预加载该财富:

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

    rel='prerender' 表示浏览器会帮大家渲染但掩盖内定的页面,一旦我们会见这一个页面,则秒开了!
    在 Firefox 中或用 rel='next' 来声明

    <link rel="preload" href="image.png">
    1
    <link rel="preload" href="image.png">
    固然该规范还尚未被抱有浏览器包容,但其幕后的沉思照旧特别风趣的。

    XML/HTML Code

    XML/HTML Code

    总结

    1. <link rel="next" href=";  
    1. <link rel="next" href=";  

    前瞻用户下一步将看望哪些能源是不方便的,必要举行大量的测验,不过这带来的性格升高是显著的。借使大家甘愿尝试那么些预获取本事,一定会鲜明晋级用户的体会。

    不是兼具的财富都能够预加载 当财富为以下列表中的资源时,将截留预渲染操作:
    1.U中华VL 中蕴藏下载能源
    2.页面中带有音频、摄像
    3.POST、PUT 和 DELETE 操作的 ajax 请求
    4.HTTP 认证(Authentication)
    5.HTTPS 页面
    6.含恶意软件的页面
    7.弹窗页面
    8.占领财富众多的页面
    9.张开了 chrome developer tools 开采工具

    不是负有的财富都能够预加载 当能源为以下列表中的能源时,将阻止预渲染操作:
    1.U福特ExplorerL 中包涵下载能源
    2.页面中包括音频、摄像
    3.POST、PUT 和 DELETE 操作的 ajax 请求
    4.HTTP 认证(Authentication)
    5.HTTPS 页面
    6.含恶意软件的页面
    7.弹窗页面
    8.占用财富众多的页面
    9.展开了 chrome developer tools 开辟工具

    zhjm 发布于 2016-08-12 11:53:43 浏览:1138

    手动触发预渲染操作 在 head 中强势插入 link[rel='prerender'] 即可:

    手动触发预渲染操作 在 head 中强势插入 link[rel='prerender'] 即可:

    类型:原创

    随笔

    JavaScript Code

    JavaScript Code

    分类:质量优化

    html优化 二维码: 小编原创 版权珍视

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

    原稿地址:

     

    原稿地址:

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:详解HTML第55中学rel属性的prefetch预加载作用利用,

    关键词: