性能文章>Chromium 中的资源获取优先级和调度>

Chromium 中的资源获取优先级和调度转载

3月前
175301

截至 2016 年 6 月,下表显示了 Chrome 中所有资源的处理方式:

 

布局阻塞

在布局阻塞阶段加载

在布局阻塞阶段每次加载一个

Blink内核 优先级

非常高

非常低

DevTools 优先级

最高

最低

 

主资源

       
 

CSS*** (early**)

 

CSS*** (late**)

 

CSS (mi**atch)

   

Script (early** 或非来自 preload 扫描)

Script (late**)

Script (async)

 
 

Font

Font (preload)

     
   

Import

     
   

Image (视窗内 - 布局之后)

 

Image

 
       

Media

 
       

SVG Document

 
         

Prefetch

   

Preload*

     
   

XSL

     
 

XHR (sync)

XHR/fetch* (async)

     
     

Favicon

   

 

* Preload
使用“as”或使用“type”获取使用他们请求的类型的优先级。(例如 preload as=stylesheet 将使用最高优先级)。 如果没有“as”,它们的行为就会像 XHR。

** Early
被定义为在请求任何非预加载图像之前被请求(“延迟”表示在之后)。

*** CSS
媒体类型不匹配的地方不会被预加载扫描器获取,并且仅在主解析器到达它时才被处理,这通常意味着它将被很晚地获取并且具有“延迟”优先级。

 

优先级改变

图像总是以低优先级开始。如果在布局时发现图像在视窗内,那么优先级将被提升到 “高”,哪怕在加载过程中它的顺序可能很靠后,还有,如果图像的请求已经发送,动态更改优先级可能不会有影响。

Late-body 阻塞脚本以 "中" 优先级开始,但如果主 HTML 解析器到它们并被阻塞,那么优先级将被提升到 “高”。

开发工具显示完成加载时用于给定资源的最终优先级。如果图像从“低”优先级开始并被提升到“高”优先级,即使最终被延迟,它也会显示为“高”优先级。

 

网络堆栈优先级名称

Chrome 网络堆栈使用与 Chrome 其余部分相同的 5 个优先级,但名称略有不同并且彼此偏移。 您将遇到名称的网络堆栈版本的主要情况是您正在处理 Chrome 代码本身或查看网络日志。网络优先级名称通常完全大写(用英文描述时),这样更容易区分。完整的映射如下:

 

网络优先级

最高

最低

闲置

优先级

最高

最低

 

优先级提示(建议/实验)

上述默认优先级行为在一般情况下运行良好,但有时开发人员会从能够更改请求顺序中受益。 例如,在布局发现图像在视口中之前表明图像很重要,或者表明某些异步脚本更重要或更不重要。

 

优先级提示规范为开发人员提供了一种表示“高”、“低”或“自动”(默认)的方法。 下表将在 Chrome 中进行试验,其中“自动”与当前默认值相同,并且某些资源类型允许通过高/低调整优先级,这主要会直接映射到 Blink 的高/低优先级。

 

相同优先级的资源提取按照它们被发现的顺序排列优先级。

◉ : 重要性=”auto”

⬆ : 重要性=”high”

⬇ : 重要性=”low”



 

布局阻塞

在布局阻塞阶段加载

在布局阻塞阶段每次加载一个

Blink 内核优先级

非常高

非常低

DevTools 优先级

最高

最低

主资源

       

CSS*** (early**)

⬆◉

     

CSS*** (late**)

 

 

Script (early** 或非来自 preload 扫描)

 

⬆◉

 

 

Script (late**)

 

 

Script (async/defer)

 

 

◉⬇

 

Font

       

Font (preload)

 

⬆◉

 

 

Import

 

     

Image (视窗内 - 布局之后)

 

⬆◉

 

 

Image

 

 

◉⬇

 

Media (video/audio)

 

 

◉⬇

 

SVG Document

 

 

◉⬇

 

XHR (sync) - deprecated

       

XHR/fetch* (async)

 

⬆◉

 

 

Preload*

 

⬆◉

 

 

Prefetch

       

Favicon

   

   

XSL

 

     

 

请先登录,感受更多精彩内容
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
前端性能基础:健康网站的关键指标有哪些?
概览 #Web 指标是 Google 开创的一项新计划,旨在为网络质量信号提供统一指导,这些信号对于提供出色的网络用户体验至关重要。多年来,Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行,而另一些开发者则发现大量的工具和指标令人应接不暇。网站所有者要想了解他
Lighthouse 如何计算网站的整体性能得分?
从为什么分数会波动,它是如何组成的,以及 Lighthouse 如何对每个单独的指标进行评分三部分来介绍lighthouse。
核心web指标对业务的影响
您是否正在努力说服您的利益相关者采用核心 Web 指标? 或者您想知道它是否真的对您的业务有帮助? 本文将通过探索已经对其用户和业务产生积极影响的公司示例,帮助您了解核心 Web 指标如何与关键业务指标相关联。为什么核心 Web 指标对您的用户和业务很重要?组织中的不同利益相关者可以有不同的优先
Chromium 中的资源获取优先级和调度
截至 2016 年 6 月,下表显示了 Chrome 中所有资源的处理方式: 布局阻塞在布局阻塞阶段加载在布局阻塞阶段每次加载一个Blink内核 优先级非常高高中低非常低DevTools 优先级最高高