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

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

10月前
209612

截至 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

 

     

 

点赞收藏
风之石
请先登录,查看1条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

关于提升汽车APP稳定性及用户体验的实践分享

关于提升汽车APP稳定性及用户体验的实践分享

优先级反转那些事儿

优先级反转那些事儿

React Server Component: 混合式渲染

React Server Component: 混合式渲染

从零开始搞监控系统(7)——监控页面奔溃

从零开始搞监控系统(7)——监控页面奔溃

React Streaming SSR 原理解析

React Streaming SSR 原理解析

Monorepo 下 Git 工作流的最佳实践

Monorepo 下 Git 工作流的最佳实践

2
1