Chromium 中的资源获取优先级和调度转载
截至 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 |
◉ |