在做性能优化时发现课程中心列表页加载的鲁班组件js代码优先级都是low，而其他js有的为high，优先级低的话资源请求会排队，相对滞后比较慢，前端能否手动控制资源请求的优先级？针对这一现象查阅了一些文档整理出以下结论。
备注：资源加载受csp、https、同源策略影响，表现有所不同，且不同浏览器默认优先级还不一样，我们这里就一谷歌为例吧。
一、浏览器默认分配资源优先级
1、下面是资源类型明细：
2、浏览器会根据上面的资源类型得出资源优先级：
ResourceLoadPriority TypeToPriority(Resource::Type type) {
switch (type) {
case Resource::kMainResource:
case Resource::kCSSStyleSheet:
case Resource::kFont:
// Also parser-blocking scripts (set explicitly in loadPriority)
return kResourceLoadPriorityVeryHigh;
case Resource::kXSLStyleSheet:
DCHECK(RuntimeEnabledFeatures::XSLTEnabled());
case Resource::kRaw:
case Resource::kImportResource:
case Resource::kScript:
// Also visible resources/images (set explicitly in loadPriority)
return kResourceLoadPriorityHigh;
case Resource::kManifest:
case Resource::kMock:
// Also late-body scripts discovered by the preload scanner (set // explicitly in loadPriority)
return kResourceLoadPriorityMedium;
case Resource::kImage:
case Resource::kTextTrack:
case Resource::kMedia:
case Resource::kSVGDocument:
// Also async scripts (set explicitly in loadPriority)
return kResourceLoadPriorityLow;
case Resource::kLinkPrefetch:
return kResourceLoadPriorityVeryLow;
}
return kResourceLoadPriorityUnresolved;
}
3、浏览器会将资源类型优先级转换成网络请求优先级，下面列出是默认情况的优先级：
| 资源优先级（浏览器内核级别） | 网络优先级 | 用户控制台 | 类型 |
|---|---|---|---|
| KPriorityVeryHigh | highest | highest | document、css、font、同步请求 |
| KPriorityHigh | medium | high | XHR/fetch(async)、script(early**) 、设置了preload |
| KPriorityMedium | low | medium | script(late **) |
| KPriorityLow | lowest | low | script(async)、image、media、svg |
| KPriorityVeryLow | idle | lowest | prefetch |
可以看到script存在多个优先级，实际上在初始优先级以后，会根据资源的实际属性和位于文档中的位置等方面，对优先级进行调整，来确定出最终的加载优先级顺序。对于几个常见资源类型的调整规则如下：
| 影响类型 | 因素 | 备注 |
|---|---|---|
| script | 1、页面的<head>中的<script>标记将以"高优先级(High priority)，CSS是"最高优先级(Highest priority。2、对于添加了defer/async属性标签的脚本的优先级会全部降为Low。3、script脚本在文档中的位置是在浏览器展示的第一张图片之前还是之后，又可分为两类在之前的(标记early**)它会被定为High优先级，在之后的(标记late**)会被设置为Medium优先级。 | 注意：这里的优先级是对应浏览器内核。 |
| xhr | 1、同步请求优先级最高AddStaticPerformanceLog | AddStaticPerformanceLog有时这个使用xhr、gif方式请求，可以观察出区别 |
| image/background-image | 1、浏览器会将视口可见图片(Image in viewport)资源的优先级提升为High2、如果把img标签加载head标签里，只有第一个img标签优先级为highest | |
| Font字体 | 字体本来是最高优先级highest，但是如果是preload字体的话会变成hight |
下图为chrome资源优先级调度表，是根据浏览器内核等级划分的，详情可查看：
二、开发人员控制优先级
- 使用preload 属性提前下载必要的资源，特别是对于浏览器早期不易发现的资源，提高优先级为high。
- 使用async 或defer 下载非首屏不需要阻塞的资源，此时资源优先级为low，我们创建的鲁班组件加了async属性，js脚本为low。
- 使用一个 importance 属性来更细力度的控制资源加载的优先级，包括 link、img、script 和 iframe 这些标签。
importance有三个值，high高优先级、low低优先级、auto浏览器默认的优先级。
