Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级

这是 Web 机能优化的第 6 篇,上一篇在下面看点击检察:

  1. Web 机能优化:运用 Webpack 星散数据的准确要领
  2. Web 机能优化:图片优化让网站大小削减 62%
  3. Web 机能优化:缓存 React 事宜来进步机能
  4. Web 机能优化:21种优化CSS和加速网站速率的要领
  5. Web 机能优化:明白及运用 JavaScript 缓存

本日,我们将深切研究Chrome 的收集栈,以明白 web 加载原语(如<link rel= preload > & <link rel= prefetch >) 背地的事情道理,以便你能够更有效地运用它们。

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你!

如其他文章所述,preload 是一个声明式 fetch,能够强迫浏览器在不壅塞 documentonload 事宜的状态下要求资本。

Prefetch 通知浏览器这个资本将来能够须要,然则什么时候加载这个资本是由浏览器来决议的。

在预加载(perload)之前,收集要求从这里最先,预加载今后,它在剖析时从左向右挪动

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

运用预加载(perload)的一些案例

在细致引见 预加载(perload) 之前,先来看看一些运用 预加载(perload) 的案例。

Housing.com 在对他们的渐进式 Web 运用顺序的剧本转用 proload 看到约莫收缩了10%的可交互时候

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

Shopify 运用 preload 加载 Web字体后,Chrome 桌面版)的文本绘制时候(1.2秒)进步了50%,这完整处置惩罚了他们的笔墨闪烁题目。

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

左侧:运用 preload,右侧:不运用 preload

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

运用<link rel=”preload”> 加载字体

Treebo,印度最大的旅店网站之一,在 3G 收集下对其桌面版实验,在对其顶部图片和主要的 Webpack 打包文件运用 preload 今后,在首屏绘制和可交互耽误离别削减了 1s。

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

一样的,在对本身的渐进式 Web 运用顺序主要打包文件运用 preload 今后,Flipkart 在路由剖析之前 节省了大批的主线程余暇时候(在 3G 收集下的低机能手机下)。

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

上面:没有运用 proload 加载,下面:运用 preload 加载

Chrome 数据庇护顺序团队发明,关于那些能够在剧本和 CSS 款式表上运用 preload 的页面,发明页面初次绘制时候取得均匀 12% 的速率提拔。

关于 prefetch(预读取),它被普遍运用,在 Google 我们仍用它来预读取一些能够加速 搜刮效果页面 的衬着的症结资本。

Preload 在大型网站中都有很好运用,你能够在本文背面找到更多这些平安。 在此之前,让我们深切相识收集客栈怎样现实处置惩罚 预加载(prefetch)与预读取(prefetch)

什么时候运用 <link rel=”preload”> 和 <link rel=”prefetch”> ?

提醒:
preload 加载资本平常是当前页面须要的,
prefetch 平常是别的页面有能够用到的资本。

preload 是通知浏览器预先要求当前页面须要的资本(症结的剧本,字体,主要图片等)。

prefetch 运用场景轻微又些差别 —— 用户将来能够跳转到别的页面须要运用到的资本。假如 A 页面提议一个 B 页面的 prefetch 要求,这个资本猎取历程和导航要求多是同步举行的,而假如我们用 preload 的话,页面 A 脱离时它会马上住手。

preloadprefetch 之间,我们对当前页面或行将跳转的页面在所需主要资本的题目有了一个处置惩罚计划。

<link rel=”preload”> 和 <link rel=”prefetch”> 的缓存行动

当资本被 preload 或许 prefetch 后,会从收集客栈传输到 HTTP 缓存并进入衬着器的内存缓存。 假如资本能够被缓存(比方,存在有效的 cache-control 和 max-age),它将存储在 HTTP 缓存中,可用于当前和将来的会话。 假如资本不可缓存,则不会将其存储在 HTTP 缓存中。 相反,它会被缓存到内存缓存中并坚持稳定直到它被运用。

Chrome 的收集栈中是怎样处置惩罚 preload 和 prefetch 的优先级?

下面是在 Blink 内核的 Chrome 46 及更高版本中差别资本的加载优先级状态著作权归作者一切。

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

preload 用 “as” 或许用 “type” 属性来示意他们要求资本的优先级(比如说 preload 运用 as=”style” 属性将取得最高的优先级)。没有 “as” 属性的将被看做异步要求,“Early”意味着在一切未被预加载的图片要求之前被要求(“late”意味着今后)

我们来谈一下这张表。

剧本依据它们在文件中的位置是不是异步、耽误或壅塞取得差别的优先级:

  • 收集在第一个图片资本之前壅塞的剧本在收集优先级中是中级
  • 收集在第一个图片资本今后壅塞的剧本在收集优先级中是初级
  • 异步/耽误/插进去的剧本(不管在什么位置)在收集优先级中是很初级

图象在可视窗口中比不在视口中的图象(具有更高的优先级,因而在某种程度上, Chrome 将会只管懒加载这些不在视口中的图片。 较低优先级的图片出现在视口中时,该图片的优先级就会获得提拔(然则注重已经在规划完成后的图片优先级不会在变动)。

运用“as”属性预加载的资本将具有与它们要求的资本范例雷同的资本优先级。 比方,preload as =“style”将取得最高优先级,而as =“script”将取得低优先级或中优先级。 这些资本也遵照雷同的CSP战略(比方剧本受 script-src 束缚)。

不带 “as” 属性的 preload 的优先级将会等同于异步要求。

假如你想相识种种资本加载时的优先级属性,从开发者东西的 Timeline/Performance 地区的 Network 地区都能看到相干信息:

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

在 Network 面板下的 “Priority” 部份

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

当页面 preload 已经在 Service Worker 缓存及 HTTP 缓存中的资本时会发作什么?

这各状态来讲是比较少的,但一般来讲,会是比较好的状态 —— 假如资本没有超越 HTTP 缓存时候或许 Service Worker 没有主动从新提议要求,那末浏览器就不会再去要求这个资本了。

假如资本在 HTTP 缓存中(在SW缓存和收集之间),那末 preload 会从雷同的资本中取得缓存掷中。

这类加载体式格局会糟蹋用户的带宽吗

运用 preload 或 prefetch,能够会糟蹋用户的带宽,特别是在资本没有缓存的状态下。

没有效到的 preload 资本在 Chrome 的 console 里会在 onload 事宜 3s 后发作正告。

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

这个正告的原因是,你能够正在运用preload来尝试为其他资本预加载并缓存以进步机能,然则假如这些预加载的资本没有被运用,那末你就在毫无来由地做分外的事情。在挪动装备上,这相当于糟蹋用户的流量,所以要注重预加载的内容。

什么状态会致使二次猎取?

preloadprefetch 是很简单的东西,你很轻易不小心二次猎取。

不要用 “prefetch” 作为 “preload” 的后备计划 ,它们适用于差别的场景,常常会致使不符合预期的二次猎取。运用 preload 来猎取当前须要使命不然运用 prefetch 来猎取将来的使命,不要一升引。

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

对 preload 运用 “as” 属性,不然将不会从中获益。

假如在指定要 preload 的内容(比方剧本)时未供应有效的“as”,则最终将猎取两次。

preload 字体不带 crossorigin 也将会二次猎取, 确保在运用 preload 猎取字体时增加crossorigin 属性,不然将二次下载。 他这个要求运用匿名的跨域情势。 纵然字体与页面位于同个域 下,也发起运用。也适用于其他域名的猎取(比如说默许的异步猎取)。

末了,虽然它不会致使两次猎取,但这一般是一个很好的发起:

不要一切的要求资本都加 preload,用 preload 来通知浏览器一些很被须要的资本,以便让它提早猎取它们。

我应当在页面头部一切的资本都加上 preload

这是东西的一个很好的例子,而不是划定规矩。 preload 的文件数目取决于加载其他资本时收集内容、用户的带宽和其他收集状态。

尽早 preload 页面中能够须要的文件,关于剧本,preload 你的症结模块是很好的,由于它将猎取与实行离开,而仅仅运用 <script async> 不会如许做,由于它会阻挠窗口的 onload 事宜。你能够 preload 图象、款式、字体和媒体。最主要的是,作为一位页面作者,你能够更好地掌握提早猎取页面所须要的信息。

prefetch 是不是具有你应当注重的任何魔法属性? 是的,

在 Chrome 中,假如用户导航脱离一个页面,而对其他页面的预取要求仍在举行中,这些要求将不会被停止。

另外,不管资本的可缓存性怎样,prefetch 要求在未指定的收集客栈缓存中最少保留 5 分钟。

我在 JS 中运用自定义的 “preload”,它跟底本的 rel=”preload” 或许 preload 头部有什么差别?

preload 解耦从 JS 处置惩罚和实行中猎取资本。 因而,preload 在标记中声明以被 Chrome preload 扫描器扫描。 这意味着在很多状态下,在 HTML 剖析器以至抵达标签之前,将猎取预加载(具有指导的优先级),这使它比自定义预加载完成更壮大。

不是能够用 HTTP/2 的服务器推送来替代 preload 吗?

当你晓得资本的准确加载顺序时运用推送,并让 service worker 阻拦能够致使再次推送缓存资本的要求。 运用 preload 能够使资本的最先下载时候更靠近初始要求 – 这对一切的资本猎取都有效。

我们假定浏览器正在加载一个页面,页面中有个 CSS 文件,CSS 文件又援用一个字体库,关于如许的场景,

若运用 HTTP/2 PUSH,当服务端猎取到 HTML 文件后,晓得今后客户端会须要字体文件,它就马上主动地推送这个文件给客户端,以下图:

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

而关于 preload,服务端就不会主动地推送字体文件,在浏览器猎取到页面今后发明 preload 字体才会去猎取,以下图:

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

虽然推送很有效,但它不像 preload 那样对一切的状态都顺应。

推送不能用于第三方资本的内容,经由过程马上发送资本,它还有效地收缩浏览器本身的资本优先级状态。在你明白的晓得在做什么时,这应当会进步你的运用机能,假如不是很清楚的话,你或许会损失掉部份的机能。

peload 要求头是什么?它与 preload 标签比拟怎样?它与 HTTP/2 服务器推送有什么关系?

与其他范例的链接一样,preload 链接即能够运用 HTML标记 或 HTTP标头。 在任何一种状态下,preload 链接都邑指导浏览器最先将资本加载到内存缓存中,这表明该页面有很高能够性运用该资本,并且不愿望守候预加载扫描顺序或剖析顺序发明它。

当金融时报在它们的网站运用 preload HTTP 头时,他们勤俭了约莫 1s 的显现片头图片时候。

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

1: 没有运用 preload 2:运用了 preload

你能够运用任何一种情势供应 preload 链接,然则你应当晓得一个主要区分:如范例所许可的,很多服务器在碰到 HTTP 头的 preload 链接时会触发 HTTP/2 服务器推送。 HTTP/2 推送的机能影响差别于一般的预加载,所以你要确保没有提议不必要的推送。

你能够运用 preload 标签来替代 preload 头以防止不必要的推送,或许在你的 HTTP 头上加一个 “nopush” 属性。

怎样推断 <link rel=”preload”> 的支撑状态?

以下的代码段能够推断 <link rel=”preload”>支撑状态:

const preloadSupported = () => {
  const link = document.createElement('link');
  const relList = link.relList;
  if (!relList || !relList.supports)
    return false;
  return relList.supports('preload');
};

FilamentGroup 也有一个 preload 检测器 ,作为他们的异步 CSS 加载库 loadCSS 的一部份。

能够运用 preload 让CSS款式马上见效吗?

固然能够,preload 支撑基于异步加载的标记,运用 <link rel=”preload”> 的款式表能够运用 onload 事宜马上运用于当前文档:

<link rel="preload" href="style.css" onload="this.rel=stylesheet">

preload 还被哪些网站普遍的运用?

依据 HTTPArchive,大多数运用 <link rel =“preload”>的网站运用它来预加载Web字体,包含 Teen Vogue 和前面提到的 Shopify

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

而 LifeHacker 和 JCPenny 等其他热点网站运用它来异步加载CSS(经由过程Filament Group loadCSS):

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

然后,有越来越多的渐进式 Web 运用顺序(如 Twitter.com mobile、Flipkart 和Housing)运用它来预加载当前导航所需的剧本(运用PRPL等情势)

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

其基本思想是以高粒度保护工件(而不是团体绑缚),所以任何运用都能够按需加载依靠或许预加载资本并放在缓存中。

当前浏览器对 preload 和 Prefetch 的支撑顺序怎样

依据 CanIUse,<link rel =“preload”>50% 的支撑度, <link rel =“prefetch”>71%

相干浏览

代码布置后能够存在的BUG没法及时晓得,预先为了处置惩罚这些BUG,花了大批的时候举行log 调试,这边顺便给人人引荐一个好用的BUG监控东西 Fundebug

你的点赞是我延续分享好东西的动力,迎接点赞!

交换

干货系列文章汇总以下,以为不错点个Star,迎接 加群 互相进修。

https://github.com/qq44924588…

我是小智,民众号「大迁天下」作者,对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货,在进阶的路上,共勉!

关注民众号,背景复兴福利,即可看到福利,你懂的。

《Web 机能优化:Preload,Prefetch的运用及在 Chrome 中的优先级》

    原文作者:前端小智
    原文地址: https://segmentfault.com/a/1190000018828048
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞