图中右下角框出来的是字体文件，上面是 CSS 文件，字体是从 CSS 文件中得知需要去加载的。
大家可以在图中发现 CSS 文件早早开始下载解析了，但是 font 文件迟迟未开始下载，直到 FP 指标即将出现的时候才开始下载动作，这个时间点是在 layout 完成以后。
图中是以掘金为例，大家可以多试试别的网站，应该能发现是符合预期的。
那么读者可能会有个疑问，按照这个逻辑意思是说能用 img 的都用 img，因为background-image 不是马上开始下载的？道理是这个道理，但是还是得分情况来说，如果图片出现的位置不是首屏，用 background-image 也没啥问题，当然给 img 用上懒加载也能解决问题。
那么到底文件的优先级是如何的？
如果大家有使用过 Performance 测试网站性能的话，可以在 Network 那栏里 hover 下载的资源，此时你能发现资源有优先级的显示。
从图中大家可以发现 CSS 和字体资源的优先级的最高的，JS 文件有高有低（这和类型有关），图片、svg 的优先级为低。
这部分的优先级是指某个时间点上的优先级，而不是适应于整个周期。对于 CSS 文件优先级最高还是挺好理解的，毕竟 JS 文件依赖于 CSS 文件，更加详细的内容大家可以参考 从Chrome源码看浏览器如何加载资源 中的「3. 资源优先级」内容。
网络协议才是最大元凶
浏览器要下载资源，TCP 协议肯定得用上，但是 TCP 协议天生就是一个慢的东西。
先得握手，然后慢开始算法，就和我们用迅雷下载东西一样，带宽很大没用，速度都是得爬升上去的。如果再加个 HTTPS 的话，还得再多个 TLS 的握手。
然后说回 HTTP1.1 协议。Chrome 只支持同个 domain 同时并发 6 个请求，所以在之前的协议中一堆请求都得 block 住等之前的下载完成。
当然现在不同了，HTTP2 的概念基本大家都知道了，没见过猪跑但吃过猪肉，对于这块的知识点聊上几句没啥问题。什么多路复用，header 合并、二进制帧啥的。
得利于 HTTP2 协议中的多路复用，我们不再被浏览器的六个并发所限制，所有同一个 domain 上的请求都能跑在复用的六个网络通道上，下载耗时瞬间减少了几个量级，但是大家有没有考虑过这个 HTTP2 到底是如何对待这些资源的？
如何分配它们的优先级？依赖？带宽或者别的？毕竟一堆资源占用同一个网络通道，那么到底该谁先下载，谁享有的带宽多点都是需要协调的。否则假如一堆图片占用了大部分带宽，其他 CSS、JS 文件下的很慢的话，就会影响整个网页的性能了。
比如说我现在需要下载 CSS、JS、图片和字体这些文件。举个例子在这些文件中我希望 CSS 文件能最先开始下载，并且能分配到的带宽多点；JS 文件呢可以等 CSS 文件下完再去下；其他文件呢优先级比 CSS 文件低点，但是也能够享受到带宽去进行下载。
这个需求我们可以通过二进制帧去实现。HTTP2 协议共存在十个二进制帧，其中你可以通过 HEADERS 帧分配新的优先级，也可以通过 PRIORITY 帧更改优先级。
对于流的优先级，我们可以通过两个方式来实现调整：
- 当我们调整流的依赖时，就可以实现让 JS 文件等待 CSS 文件下载完毕以后再开始
- 当我们调整流的 weight 时，就可以实现带宽的分配，让某些资源能更快地进行下载
如图所示（丑了点）。第一排的文件开始一起下载，weight 相加为 20，那么通过计算可得 CSS 文件享有带宽的一半，其他各占有 1 / 4，JS 文件得等 CSS 完成以后才开始。
那么该如何设置这些东西呢？当然得服务端支持啦，一般都指 CDN 服务商了。
最后
查找了很多资料，如有遗漏，还请见谅。文中如果有误，还望及时指出，感谢
评论列表（0条）