正文
重定向 - 应用程序缓存 - DNS - TCP - 请求 - 响应
对于某一个资源，点击资源加载进度条可以看到具体每一阶段的加载时间。或者可以在console面板中，通过timing api获取。
performance.getEntriesByType('resource').filter(item => item.name.includes("style.css"))
具体解释如下：
-
Queueing（排队）：
浏览器有连接限制，当网页资源很多时就会出现排队的现象，排队的资源要等到上一个资源加载完毕释放后才能开始请求。比关键资源（如javascript与css）低优先级的请求会被浏览器推迟，一般推迟的都是图片。在许多资源同时发起请求时浏览器默认先加载css,然后javascript，最后才是图片。
-
Stalled(阻塞)：
请求在发送前的时间被成为阻塞。阻塞的原因有很多种，导致排队的原因或是Proxy Negotiation都能造成阻塞。
-
DNS Lookup（DNS查询）：
DNS查找的时间，网页资源中请求每一个新域都需要做一次完整的DNS查询。
-
Ini
tial Connection（初次连接）：
初次建立连接需要花费的时间。
-
Request Sent(请求发送时间)：
网络请求发送的时间。
-
Waiting(TFFB)(等待时间)：
等待服务器初始响应的时间。
-
Content Downloading（下载时间）:
资源下载的时间。
三、诊断原因与解决方案
通过chrome网络面板调试，经常会看到每次加载的时间都不太相同，造成加载慢会有许多原因。前端需要优化，但很多时候是后台或者网络的问题。
