页面资源优先级

资源优先级

浏览器在获取页面渲染所必须的资源时，会根据资源类型等为期分配不同的优先级并按照一定的顺序进行加载和处理。Chrome中的devTools资源优先级分为五档：Highest、High、Medium、Low、Lowest；而网络优先级分为Highest、Medium、Low、Lowest、Idle。

一般资源的优先级

根据[文献3]介绍，浏览器的一般资源优先级如下图所示，表格结论是于2016年6月基于Chrome测试得到的结果。(https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#)

*拥有as属性的preload或定义了type类型的fetch的优先级与他们请求的资源类型的优先级保持一致（eg: 使用了as="style"的preload优先级为highest）；如果没有as属性，那么preload的行为与XHR一致；
** "early"指的是在预加载图片之前的请求，after对应为之后；

css的优先级默认为highest

不同位置的JS脚本执行的优先级顺序

1. 在图片加载之前通过script标签引入的js脚本的优先级为Net: Medium；
2. 在图片加载之后通过script标签引入的js脚本的优先级为Net: Low；
3. async/defer/injected 脚本的优先级为Net: Lowest;
4. 使用<link rel="prefetch">的js脚步，浏览器为其分配的优先级为Net: Idle；

使用版本 72.0.3626.121（正式版本） （32 位）的Chrome测试发现，当省略as属性时，Chrome会直接把请求拦截，应该是为了考虑性能影响；毕竟短时间内使用preload a加载的资源未被使用的情况下也会有warning。

图片资源优化

1. 非必要的图片使用其他方式代替，如icon font等；
2. 选择合适的格式并压缩；
3. 移除图片的metadata，推荐使用工具XnConvert；
4. 使用合适的图片尺寸，避免裁剪；

---

参考文献

1. https://developers.google.cn/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering-path
2. https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
3. https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#
4. https://blog.csdn.net/milado_nju/article/details/22101681