资源预加载,多少个不广泛的

前者质量优化 – 资源预加载

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

在HTML5中,有个很有用但常被忽略的风味,就是预先加载(prefetch),它的规律是:
利用浏览器的…

五个不广泛的 HTML5 实用新特点简介,html5新特性

一、DNS 预解析缓存

分明,解析 DNS
是网站质量优化的可比重大的一有的,就算加载时间不太长,不过很难压缩起来。更加是为了并发下载资源而使用五个CDN 域名来加载资源的巨型网站,更不得忽略,每加载资源从前都要先进行 CDN
域名的 DNS 解析转换。
若果拔取 DNS 预加载,襄助该意义的浏览器就会提前对该域名进行 DNS
解析并且缓存一下,而不会在必要请求资源再展开剖析。而且以此职能选取实在是太不难:

复制代码 代码如下:

<link rel=”dns-prefetch” href=”;
<link rel=”dns-prefetch” href=”//www.google-analytics.com”>

天猫商城网就使用了那项技能,你可以打开Tmall网,查看源代码,最顶端就把他们的有的
CDN 服务器举行了 DNS 解析缓存。

二、资源预加载

资源预加载有很多主意,例如常见的图样预加载,有应用 CSS
的背景图片来预加载,大多数如故用 JS。近年来 HTML5
提供了专门的资源预加载方法,有三个特性:prefetch(预读取)和
prerender(预渲染),分别被 Firefox 和 Chrome 浏览器支持。

1).PREFETCH 预读取
预读取就是很普遍的资源预加载,当前页面加载成功以后,就会在末端偷偷的下载你指定的资源,一般是
JS 、CSS 和 图片 那类的,也足以下载页面:

复制代码 代码如下:

<link rel=”prefetch” href=”” />
<link rel=”prefetch” href=””
/>
<link rel=”prefetch alternate stylesheet” href=”mozspecific.css”
/>

注意,近来 Firefox 浏览器支持那个效果。

2).PRERENDER 预渲染
本条更决定了,不仅偷偷的提前下载,而且还给您渲染出来,当用户点击链接的时候,立时给你展现出来。

复制代码 代码如下:

<link rel=”prerender” href=”” />

在意,如今 Chrome 援助那一个意义。

搜素引擎其实是最要求那种预读取的功力的,因为她俩充裕确定用户下一步要开拓的页面(搜索结果页面),所以当用户输入搜索内容的时候,就可以提前把搜索结果页面的资源提前加载,而且动用之后,效果非常分明。

时下包容性是个缺陷,貌似唯有 Chrome 和 Firefox 接济,而且用的 rel
属性是例外的,要是你想同时匹配三个浏览器,可以写成下边那样:

复制代码 代码如下:

<link rel=”prefetch prerender” href=”” />

其它,当然为了安全无法跨域预加载资源,可能没办法用在 CDN 了。

三、Download 属性

HTML5 的 Download 属性用来强制浏览器下载对应文件,而不是开拓。Chrome 和
Firefox
等浏览器太过度强大,也许是为了抓实用户体验,当用户点击的资源文件可以被它们识其余时候(例如
pdf 会直接在浏览器打开,VCD、mp5等媒体直接用浏览器内置播放器播放)。但有时,用户实际是可望间接下载而不是在浏览器上看看,那时就足以添加那么些特性,属性值会对下载的文件重命名:

复制代码 代码如下:

<a href=”downloadpdf.php”
download=”download.pdf”>点击间接下载并保留成 download.pdf
文件</a>

借使你规定那个资源是用户肯定会下载的,就足以增加那几个特性,仍是可以用 JS
或者手动改变想要保存的文书名。

HTML5
还有不少其余特色,不过看了很长日子书和各样资料,很少见到上边多个又比较实用的特性,拿出去分享一下。

DNS 预解析 DNS-Prefetch

因而 DNS 预解析来报告浏览器未来我们可能从某个特定的 URL
获取资源,当浏览器真正使用到该域中的某个资源时就可以尽早地做到 DNS
解析。例如,大家未来恐怕从 example.com
获取图片或音频资源,那么可以在文档顶部的 “ 标签中加入以下内容:

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

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

当大家从该 URL 请求一个资源时,就不再要求等待 DNS
的辨析进度。该技术对应用第三方资源越发有用。

在 Harry Roberts
的文章中提到:

透过不难的一行代码就足以告知这个包容的浏览器举行 DNS
预解析,那象征当浏览器真正请求该域中的某个资源时,DNS
的辨析就曾经形成了。

那如同是一个不胜细小的特性优化,显得也不要那么紧要,但事实并非如此 –
Chrome
一直都做了看似的优化。当在浏览器的地方栏中输入
URL 的一小段时,Chrome 就机关已毕了 DNS
预解析(甚至页面预渲染),从而为每个请求节省了重点的时间。

引用 Patrick Hamann 的解释:

HTML5都有什新特性?

实际说,HTML5就是html、css、js的结合体,不用大惊小怪的。还有一头是HTML5还不是很成熟,取决于浏览器的协理程度。至于HTML5的新特色,有若干点,比如说其中的canvas绘图,新增的api包罗:canvas,geolocation
,websocket , webstorage;还有新增的多少标签,如video,audio标签。
 

预连接 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。

简诉html5的新特色及今后的发展景色

1.新的文档类型 (New Doctype)
2.脚本和链接无需type (No More Types for Scripts and Links)
3.语义Header和Footer (The Semantic Header and Footer)
4.Hgroup
5.标记元素 (马克 Element)
6.图形元素 (Figure Element)
7.重新定义<small> (Small Element redefined)
8.占位符 (Placeholder)
9.须要属性 (Required Attribute)
10.Autofocus 属性 (Autofocus Attribute)
11.Audio 支持 (Audio Support)
12.Video 支持 (Video Support)
13.摄像预载 (Preload attribute in Videos element)
14.展现控制条 (Display Controls)
15.业内表明式 (Regular Expressions)
 

HTML5 实用新特征简介,html5新特征
一、DNS 预解析缓存 众所周知,解析 DNS
是网站品质优化的比较首要的一部分,固然加载时…

预获取 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

Subresources

那是另一个预获取措施,那种格局指定的预获取资源具有最高的优先级,在有着
prefetch 项以前开展:

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

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

根据 Chrome
文档:

rel=prefetch 为将来的页面提供了一种低优先级的资源预加载格局,而
rel=subresource 为当前页面提供了一种高优先级的资源预加载。

所以,即使资源是现阶段页面必须的,或者资源要求及早可用,那么最好利用
subresource 而不是 prefetch

透过 DNS 预解析来报告浏览器将来我们可能从某个特定的 URL
获取资源,当浏览器真正使用到该域中的某个资源时就足以赶紧地形成 DNS
解析。例如,大家以后说不定从 example.com
获取图片或音频资源,那么能够在文档顶部的 标签中参预以下内容:

预渲染 Prerender

那是一个核武器,因为 prerender 可以先行加载文档的具备资源:

<link rel=”prerender” href=”;

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

Steve Souders
在他的一篇文章中写到:

那如同于在一个躲藏的 tab 页中开拓了某个链接 – 将下载所有资源、创设 DOM
结构、完毕页面布局、应用 CSS 样式和施行 JavaScript
脚本等。当用户真正访问该链接时,隐藏的页面就切换为可知,使页面看起来就是瞬间加载成功同样。Google搜索在其即时追寻页面中早已采纳该技术多年了,微软也宣称将在 IE11
中帮衬该特性。

亟待小心的是不要滥用该特性,当您了解用户一定会点击某个链接时才可以举行预渲染,否则浏览器将任务地下载所有预渲染须要的资源。

更多相关切磋:

持有预加载技术都留存一个机密的高危机:对资源预测错误,而预加载的付出(抢占
CPU
资源,消功耗池,浪费带宽等)是慷慨激昂的,所以必须小心行事。固然很难确定用户下一步将拜访哪些资源,但高可相信的风貌确实存在:

  • 若是用户完毕一个带有明确结果的搜索,那么结果页面很可能会被加载
  • 假设用户进入到登陆页面,那么登陆成功的页面很可能会被加载
  • 一经用户阅读一个多页的篇章或访问一个分页的结果集,那么下一页很可能会被加载

最后,使用 Page Visibility API
可以防备页面真正可知前被实践。

<link rel=”dns-prefetch” href=”//example.com”>
1
<link rel=”dns-prefetch” href=”//example.com”>
当大家从该 URL 请求一个资源时,就不再需求等待 DNS
的解析进程。该技能对应用第三方资源越发有用。

Preload

preload 是一个新规范,与 prefetch
分化(可能被忽略)的是,浏览器一定会预加载该资源:

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

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

虽说该标准还并未被抱有浏览器包容,但其背后的合计依然那多少个幽默的。

在 哈利 罗Berts 的小说中涉嫌:

总结

展望用户下一步将造访哪些资源是不方便的,须要展开大批量的测试,不过那带来的习性提高是家喻户晓的。假诺我们甘愿尝试那些预获取技能,一定会明确升级用户的感受。

透过简单的一条龙代码就足以告知这多少个包容的浏览器举办 DNS
预解析,这意味着当浏览器真正请求该域中的某个资源时,DNS
的辨析就曾经形成了。
那犹如是一个相当细小的特性优化,显得也无须那么重大,但实际并非如此 –
Chrome 一向都做了近似的优化。当在浏览器的地点栏中输入 URL
的一小段时,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 收藏
评论

亚洲必赢官网 1

预连接 Preconnect

与 DNS 预解析类似,preconnect 不仅已毕 DNS 预解析,同时还将举办 TCP
握手和创立传输层协议。可以如此使用:

<link rel=”preconnect” href=”;
1
<link rel=”preconnect” href=”;
在 Ilya Grigorik 的稿子中有更详实的介绍:

当代浏览器都试着预测网站未来内需什么样连接,然后预先建立 socket
连接,从而消除昂贵的 DNS 查找、TCP 握手和 TLS
往返开支。可是,浏览器还不够聪明,并不可能准确预测每个网站的具备预链接目的。好在,在
Firefox 39 和 Chrome 46 中大家可以运用 preconnect
告诉浏览器大家必要举办什么预连接。
预获取 Prefetching

假若大家规定某个资源将来势必会被利用到,大家得以让浏览器预先请求该资源并放入浏览器缓存中。例如,一个图纸和本子或任何可以被浏览器缓存的资源:

<link rel=”prefetch” href=”image.png”>
1
<link rel=”prefetch” href=”image.png”>
与 DNS
预解析不相同,预获取真正请求并下载了资源,并储存在缓存中。但预获取还借助于部分标准,某些预获取可能会被浏览器忽略,例如从一个百般缓慢的互连网中得到一个石破天惊的字体文件。并且,Firefox
只会在浏览器闲置时开展资源预获取。

在 Bram Stein 的帖子中说到,这对 webfonts
品质进步至极显眼。近来,字体文件必须等到 DOM 和 CSS
营造达成之后才起来下载,使用预获取就可以轻松绕过该瓶颈。

留神:要测试资源的预获取有点困难,但在 Chrome 和 Firefox
的网络面板中都有资源预获取的记录。还需求记住,预获取的资源没有同源策略的限制。

Subresources

那是另一个预获取措施,那种情势指定的预获取资源有着最高的优先级,在有着
prefetch 项往日举办:

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

rel=prefetch 为未来的页面提供了一种低优先级的资源预加载格局,而
rel=subresource 为近日页面提供了一种高优先级的资源预加载。
由此,若是资源是时下页面必须的,或者资源需求及早可用,那么最好应用
subresource 而不是 prefetch。

预渲染 Prerender

那是一个核武器,因为 prerender 可以事先加载文档的所有资源:

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

那类似于在一个东躲湖南的 tab 页中开拓了某个链接 – 将下载所有资源、创制 DOM
结构、已毕页面布局、应用 CSS 样式和实践 JavaScript
脚本等。当用户真正访问该链接时,隐藏的页面就切换为可知,使页面看起来就是弹指间加载成功同样。Google搜索在其即时寻找页面中早就运用该技术多年了,微软也宣称将在 IE11
中辅助该特性。
内需小心的是决不滥用该特性,当您领悟用户一定会点击某个链接时才可以开展预渲染,否则浏览器将任务地下载所有预渲染必要的资源。

越多相关研讨:

所有预加载技术都存在一个潜在的高危害:对资源预测错误,而预加载的成本(抢占
CPU
资源,消耗能池,浪费带宽等)是慷慨激昂的,所以必须小心谨慎行事。固然很难确定用户下一步将造访哪些资源,但高可看重的意况确实存在:

万一用户达成一个暗含分明结果的探寻,那么结果页面很可能会被加载
只要用户进入到登陆页面,那么登陆成功的页面很可能会被加载
设若用户阅读一个多页的小说或访问一个分页的结果集,那么下一页很可能会被加载
末段,使用 Page Visibility API 可防止患页面真正可见前被实施。

Preload

preload 是一个新规范,与 prefetch
差距(可能被忽略)的是,浏览器一定会预加载该资源:

<link rel=”preload” href=”image.png”>
1
<link rel=”preload” href=”image.png”>
固然该专业还尚无被抱有浏览器包容,但其背后的盘算依旧要命幽默的。

总结

前瞻用户下一步将访问哪些资源是困难的,要求进行大气的测试,可是那带来的特性升高是显明的。若是大家甘愿尝试那几个预获取技能,一定会鲜明升高用户的感受。

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

类型:原创

随笔

分类:质量优化

html优化
二维码: 笔者原创 版权保护

网站地图xml地图