译文出处

Subresources

那是另一个预获取措施,这种方法内定的预获取能源有着最高的优先级,在有着
prefetch 项此前开展:

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

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

根据 Chrome
文档:

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

之所以,假诺财富是时下页面必得的,恐怕能源必要及早可用,那么最棒使用
subresource 而不是 prefetch

深入阅读

  • 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

前端质量优化 – 能源预加载

2015/11/19 · JavaScript
· 预加载

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

当提到前端质量优化时,我们首先会联想到文件的联结、压缩,文件缓存和开启服务器端的
gzip 压缩等,那使得页面加载越来越快,顾客能够尽快接纳我们的 Web
应用来到达他们的靶子。 

能源预加载是另叁特性子优化才干,大家得以行使该技术来预先告知浏览器有个别能源或然在以后会被选取到。

引用 Patrick Hamann
的解释:

预加载是浏览器对南陈恐怕被利用能源的一种暗意,一些财富得以在时下页面使用到,一些也许在以往的一些页面中被选取。作为开拓职员,大家比浏览器尤其精通大家的使用,所以大家能够对大家的主导财富利用该手艺。

这种做法早已被称呼
prebrowsing,但这并不是一项单一的本事,能够细分为多少个例外的才干:DNS-prefetchsubresource
和业内的 prefetch   译文出处。、preconnectprerender

   译文出处。 

预连接 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
告诉浏览器大家供给开展什么样预连接。

总结

前瞻客商下一步将做客哪些财富是困难的,必要开展大气的测量试验,可是这带来的性质提高是显眼的。借使大家愿意尝试这么些预获取本领,一定会分明晋级客户的心得。

预渲染 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
能够预防页面真正可知前被实施。

DNS 预解析 DNS-Prefetch

通过 DNS 预分析来报告浏览器今后我们只怕从有个别特定的 UQX56L
获取能源,当浏览器真正使用到该域中的某些财富时就足以尽快地达成 DNS
解析。譬如,我们将来讲不定从 example.com
获取图片或音频财富,那么能够在文书档案最上部的 “ 标签中投入以下内容:

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

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

当大家从该 U兰德传祺L 央浼多个能源时,就不再须求等待 DNS
的分析过程。该技能对采纳第三方财富非常有用。

在 Harry Roberts
的文章中提到:

通过轻松的一站式代码就足以告知这个包容的浏览器进行 DNS
预深入分析,那意味着当浏览器真正恳求该域中的有个别财富时,DNS
的深入分析就已经完结了。

那犹如是一个充裕细小的性质优化,显得也无须那么重要,但实际并非这样 –
Chrome
一直都做了近乎的优化。当在浏览器的地点栏中输入
U卡宴L 的一小段时,Chrome 就自动达成了 DNS
预分析(以至页面预渲染),进而为种种央求节省了要害的时日。

预获取 Prefetching

假定大家规定有个别财富未来早晚上的集会被应用到,大家得以让浏览器预先诉求该财富并归入浏览器缓存中。举个例子,四个图形和本子或其余可以被浏览器缓存的财富:

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

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

与 DNS
预剖判不相同,预获取真正伏乞并下载了能源,并积累在缓存中。但预获取还借助于一些原则,某个预获取或者会被浏览器忽略,比如从三个格外缓慢的互连网中获得三个特大的字体文件。并且,Firefox
只会在浏览器闲置时开展能源预获取。

在 Bram Stein
的帖子中谈到,那对
webfonts 品质升高非常明确。近期,字体文件必需等到 DOM 和 CSS
创设完结以往才起来下载,使用预获取就足以轻易绕过该瓶颈。

注意:要测量试验财富的预获取有一些困难,但在 Chrome 和 Firefox
的互连网面板中都有财富预获取的笔录。还亟需记住,预获取的财富未有同源计策的限定。

Preload

preload 是二个新标准,与 prefetch
不相同(恐怕被忽视)的是,浏览器一定会预加载该财富:

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

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

尽管该规范还未有被全部浏览器兼容,但其背后的思念依然十二分风趣的。

发表评论

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