快捷搜索:
来自 新京葡娱乐场网址 2019-07-22 02:24 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

前面两特性能优化,财富预加载

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

2015/11/19 · JavaScript · 预加载

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

当提到前端品质优化时,我们第一会联想到文件的联合、压缩,文件缓存和开启服务器端的 gzip 压缩等,那使得页面加载越来越快,用户能够赶紧选择大家的 Web 应用来达成他们的靶子。 

财富预加载是另叁个天性优化技艺,大家可以利用该技艺来预先告知浏览器某个能源大概在未来会被利用到。

引用 Patrick Hamann 的解释:

预加载是浏览器对以往只怕被应用能源的一种暗中提示,一些能源可以在当前页面使用到,一些大概在以往的某个页面中被接纳。作为开荒职员,大家比浏览器越发领悟我们的运用,所以我们得以对大家的骨干财富使用该技艺。

这种做法早已被叫做 prebrowsing,但那实际不是一项单一的手艺,可以细分为多少个不等的才能:DNS-prefetchsubresource 和标准的 prefetchpreconnectprerender

 

当提到前端质量优化时,我们先是会联想到文件的集结、压缩,文件缓存和开启服务器端的 gzip 压缩等,那使得页面加载越来越快,用户能够尽早接纳大家的 Web 应用来完结他们的靶子。
能源预加载是另贰性情能优化手艺,我们得以采纳该技术来预先告知浏览器有个别财富恐怕在今后会被接纳到。

DNS 预解析 DNS-Prefetch

通过 DNS 预剖判来报告浏览器未来大家大概从有些特定的 UKugaL 获取能源,当浏览器真正使用到该域中的某些能源时就足以尽快地做到 DNS 分析。举例,大家将来恐怕从 example.com 获取图片或音频能源,那么能够在文书档案顶上部分的 `` 标签中步入以下内容:

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

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

当大家从该 U奥迪Q3L 恳求二个能源时,就不再供给拭目以俟 DNS 的解析进度。该手艺对应用第三方财富特别有用。

在 Harry Roberts 的文章中提到:

由此轻便的一行代码就能够告诉这么些包容的浏览器举行 DNS 预剖析,那象征当浏览器真正央浼该域中的有些能源时,DNS 的剖判就已经实现了。

那不啻是一个不胜微小的属性优化,显得也决不那么重大,但真实情形其实不然 – Chrome 一贯都做了临近的优化。当在浏览器的地方栏中输入 UF12berlinettaL 的一小段时,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。

预获取 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 预剖判来告诉浏览器今后大家可能从有些特定的 U奥迪Q7L 获取财富,当浏览器真正使用到该域中的有个别能源时就足以赶紧地成功 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">
当大家从该 U奇骏L 央求多少个财富时,就不再需求静观其变 DNS 的剖判进程。该手艺对运用第三方能源非常有用。

Preload

preload 是五个新规范,与 prefetch 分化(恐怕被忽视)的是,浏览器一定会预加载该财富:

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

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

尽管该标准还尚未被有着浏览器包容,但其背后的思维照旧不行业作风趣的。

在 Harry 罗Berts 的稿子中涉及:

总结

预测用户下一步将访问哪些财富是勤奋的,必要开始展览大气的测验,不过那带来的属性升高是举世瞩指标。借使大家甘愿尝试那么些预获取本事,一定会肯定进步用户的经验。

通过轻易的一条龙代码就足以告知那个包容的浏览器举办 DNS 预深入分析,那表示当浏览器真正须求该域中的有些财富时,DNS 的解析就早已做到了。
那就像是三个百般细小的属性优化,显得也不用那么重要,但事实并不是那样 – Chrome 从来都做了近乎的优化。当在浏览器的地方栏中输入 UOdysseyL 的一小段时,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 项在此之前开始展览:

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:前面两特性能优化,财富预加载

关键词: