实用新特性简介,前端品质优化

前端品质优化 – 资源预加载

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

天猫网就应用了那项技能,你可以打开Taobao网,查看源代码,最上面就把他们的一部分
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 会直接在浏览器打开,mp4、mp4等媒体直接用浏览器内置播放器播放)。但有时候,用户实际是梦想直接下载而不是在浏览器上看看,那时就足以拉长这么些特性,属性值会对下载的文本重命名:

复制代码 代码如下:

<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
脚本等。当用户真正访问该链接时,隐藏的页面就切换为可知,使页面看起来就是瞬间加载成功同样。谷歌搜索在其即时追寻页面中早已选取该技术多年了,微软也扬言将在 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">

虽说该规范还尚无被所有浏览器包容,但其背后的思维依旧极度有意思的。

在 哈利 罗伯特s 的篇章中提到:

总结

展望用户下一步将做客哪些资源是困难的,须求开展大批量的测试,可是那带来的性质进步是显眼的。若是大家甘愿尝试那么些预获取技能,一定会通晓提高用户的感受。

经过简单的一条龙代码就可以告诉那么些包容的浏览器举行 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
脚本等。当用户真正访问该链接时,隐藏的页面就切换为可知,使页面看起来就是刹那间加载成功同样。谷歌搜索在其即时寻找页面中一度拔取该技能多年了,微软也扬言将在 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优化
二维码: 作者原创 版权爱抚

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website