浏览器页面资源加载过程与优化

好文转载
https://juejin.cn/post/6844903545016156174

在10个xhr请求同时进行的时候, 某两个请求优先级太高, 响应时长又太久, 如何降低该http请求的优先级

目前只能使用定时器,将该请求扔到最后,否则会影响其他资源加载,导致页面一直在等待中(该请求结果需要实时获取, 并不能使用缓存策略);
下文里面,说明浏览器会对xhr的请求优先级进行调整; 同步xhr请求优先级更高, 看了代码,发现的确是使用了xhr中的同步请求策略, 导致了提升该http的优先级, 改为异步的, 该请求就和其他请求一样, priority为High;定时器的异步调整方案可以去除了
请求中使用jq封装的ajax

$.ajax(setting);
setting={
		url: url,
        data: postData,
        type: 'POST',
        dataType: 'json',
        async: false, //默认true, 异步加载, 设置成false, 使用同步加载
        success: function(data) {
        	if(!data) return;
        	// ...
        },
        error: function(err) {
        }
}

下面是以浏览器内核作为研究方向，来介绍浏览器的资源优先级计算过程：

第一步，根据资源的类型来设定默认优先级。
对于每一类资源浏览器都有一个默认的加载优先级规则：

html、css、font这三种类型的资源优先级最高；
然后是preload资源（通过<link rel=“preload">标签预加载）、script、xhr请求；
接着是图片、语音、视频；
最低的是prefetch预读取的资源。

第二步，根据一定的实际规则，对优先级进行调整。
初始优先级设置好以后，浏览器会根据资源的实际属性和位于文档中的位置等方面，对优先级进行调整，来确定出最终的加载优先级顺序。对于几个常见资源类型的调整规则如下：

一 对于XHR请求资源：将同步XHR请求的优先级调整为最高。
XHR请求可以分为同步请求和异步请求，浏览器会把同步请求的优先级提升到最高级，以便尽早获取数据、加快页面的显示。
二 对于图片资源：会根据图片是否在可见视图之内来改变优先级。
图片资源的默认优先级为Low。现代浏览器为了提高用户首屏的体验，在渲染时会计算图片资源是否在首屏可见视图之内，在的话，会将这部分视口可见图片(Image in viewport)资源的优先级提升为High。
三 对于脚本资源：浏览器会将根据脚本所处的位置和属性标签分为三类，分别设置优先级。
首先，对于添加了defer/async属性标签的脚本的优先级会全部降为Low。
然后，对于没有添加该属性的脚本，根据该脚本在文档中的位置是在浏览器展示的第一张图片之前还是之后，又可分为两类。在之前的(标记early**)它会被定为High优先级，在之后的(标记late**)会被设置为Medium优先级。
下图总结了资源优先级计算后各类资源的优先级情况，其中特别将上面讲的三种常见资源的情况框了出来。红框框中的为脚本类型、紫框的为图片类型、蓝框为XHR请求。图片来源点此。

第四步：按照上面计算的安全策略和优先级来加载或阻塞资源。

作者：考拉海购前端团队
链接：https://juejin.cn/post/6844903545016156174
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。