目录
- 1.网络面板总览
- 2.概况了解
- 3.Waterfall接口排队等待时间
- 4.关注请求接口的Size,可能是占据内存溢出的接口
- 5.过滤器一栏 fetch/xhr 什么意思
- 6. Stalled 什么意思
- 7.Queueing 什么意思
- 8.Queueing和Stalled之间什么关系
- 9.为什么会有阻塞状态
- 10.Time列是pending 什么意思
1.网络面板总览
网络面板包括如下5个窗口：
- 控件 使用这些功能控制网络面板的展示和功能
- 过滤器 使用过滤器可以控制要在列表中显示哪些网络请求。摁住Cmd(Mac)或者Ctrl(Window)键，可以同时选择多个筛选条件。
- 概览 此图表显示了资源加载的时间线。如果在垂直方向上很多时间线重合，说明加载这些资源是同时进行的，有时序上的重叠。
- 请求列表 请求列表列举了捕获到的所有网络请求，默认以时间排序，最近的请求在最上面。点击请求的名字会显示网络请求的详情。在列表头上右击，可以添加或者删除要显示的列。
-
概要 该窗口显示请求的总数，数据传输量以及加载时间
2.概况了解
3.Waterfall接口排队等待时间
4.关注请求接口的Size,可能是占据内存溢出的接口
5.过滤器一栏 fetch/xhr 什么意思
在前端浏览器调试的过程中，“Network”（网络）面板是一个非常重要的工具，它用于监视浏览器与服务器之间的网络通信。在这个面板中，你会看到各种类型的网络请求，包括 fetch 请求和 XHR 请求。
-
XHR 请求：XHR（XMLHttpRequest）是一种用于在浏览器和服务器之间发送 HTTP 请求和接收响应的技术。XHR 请求通常由 JavaScript 代码触发，它们可以是同步或异步的，用来获取数据或更新页面的部分内容。在 “Network” 面板中，XHR 请求会以
XHR类型显示，你可以查看请求的详细信息，包括请求方法、URL、请求头、响应状态等。 -
Fetch 请求：Fetch API 是一种现代的 Web API，用于在浏览器中发起网络请求。它提供了更灵活和强大的方式来处理网络请求和响应。Fetch 请求通常由 JavaScript 代码触发，用来获取数据、发送表单、上传文件等。在 “Network” 面板中，Fetch 请求会以
fetch类型显示，你可以查看请求的详细信息，包括请求方法、URL、请求头、响应状态等。
通过查看 “Network” 面板中的 fetch 和 XHR 请求，你可以分析网页的性能、调试网络问题、监视资源加载情况，以及分析网站的行为。
6. Stalled 什么意思
“Stalled”（阻塞）是指网络请求在某个阶段被阻塞而无法继续进行的状态。在网络调试工具的 Waterfall 视图中，当一个请求处于 Stalled 状态时，意味着该请求在某个阶段被阻塞，无法继续执行，直到解除阻塞为止。
常见导致请求被阻塞的原因包括：
-
网络连接问题：例如网络延迟、网络拥塞等，导致请求无法及时发送或接收。
-
服务器响应缓慢：服务器处理请求的时间过长，导致响应延迟，请求处于等待响应阶段。
-
资源竞争：当浏览器同时发起多个请求，而服务器资源有限时，可能导致部分请求被阻塞等待处理。
-
同一域名并发连接限制：浏览器对于同一域名下的并发连接数有限制，当已有连接数达到限制时，后续请求可能被阻塞等待。
当请求处于 Stalled 状态时，通常需要进一步分析具体原因，并采取相应措施来解决问题，以提高页面加载速度和性能。
7.Queueing 什么意思
“Queueing”（排队）是指网络请求在等待发送或处理时被放置在队列中的状态。在网络调试工具的 Waterfall 视图中，当一个请求处于 Queueing 状态时，意味着该请求已经准备就绪，但由于某些原因（通常是因为浏览器并发连接数限制或服务器处理能力限制），无法立即发送或处理，而是被放置在请求队列中等待执行。
常见导致请求被放置在队列中的原因包括：
-
并发连接数限制：浏览器对于同一域名或同一服务器的并发连接数有限制，当已有连接数达到限制时，后续请求就会被放置在队列中等待。
-
服务器处理能力限制：服务器在处理请求时可能存在处理能力限制，当服务器已经处理的请求达到其处理能力上限时，后续请求就会被放置在队列中等待处理。
-
请求优先级：一些请求可能会被设置为优先级较低，因此会被放置在队列中等待更高优先级的请求处理完成后再执行。
-
TCP 连接复用：在 HTTP/1.1 中，浏览器可能会通过 TCP 连接复用来发送多个请求，而在某些情况下，请求需要等待上一个请求的 TCP 连接空闲时才能发送。
当请求处于 Queueing 状态时，可能会导致页面加载速度变慢，因此需要进一步分析和优化，以提高请求的发送和处理效率。
8.Queueing和Stalled之间什么关系
“Queueing”（排队）和"Stalled"（阻塞）是网络请求在加载过程中可能出现的两种状态，它们之间有一定的关系：
-
队列和阻塞之间的关系：
- 当一个请求处于"Queueing"状态时，意味着该请求已经准备就绪，但由于某些原因无法立即发送或处理，而是被放置在请求队列中等待执行。
- 如果在请求处于排队状态时，遇到了一些无法继续执行的问题，比如网络连接问题、服务器响应缓慢等，那么该请求可能会从队列状态转变为"Stalled"状态，表示请求在某个阶段被阻塞，无法继续执行。
-
排队可能导致阻塞：
- 当有大量请求被放置在队列中等待发送或处理时，可能会导致服务器响应缓慢或浏览器并发连接数限制，从而使得一些请求在队列中等待的时间过长，最终进入阻塞状态。
- 因此，排队和阻塞之间存在一种因果关系，即长时间的排队可能会导致请求的阻塞。
-
解决方法：
- 对于排队状态的请求，可以通过优化资源加载顺序、减少资源大小、增加服务器处理能力等方式来缩短排队时间，从而减少阻塞的可能性。
- 对于阻塞状态的请求，需要进一步分析具体原因，并采取相应的措施来解决，以提高请求的发送和处理效率，从而缩短请求的阻塞时间。
综上所述，排队和阻塞是网络请求在加载过程中常见的两种状态，它们之间存在一定的关系，但又有一些区别，需要根据具体情况进行分析和处理。
9.为什么会有阻塞状态
在实际情况中，当一个请求在排队状态下等待发送或处理的时间超过一定阈值时，可能会转变为阻塞状态，直到满足发送或处理的条件才能继续执行。这种转变通常是由于排队时间过长导致请求无法及时得到响应或处理而造成的。
一旦请求处于阻塞状态，它需要等待唤醒或满足某些条件（比如网络连接恢复、服务器响应就绪等）才能继续发送或处理。一旦条件得到满足，请求就会被唤醒并继续执行，从而结束阻塞状态。
因此，排队时间过长可能会导致请求进入阻塞状态，而这种阻塞状态会一直持续到满足发送或处理条件为止。优化请求的排队时间和处理速度，可以有效减少请求进入阻塞状态的可能性，提高网络性能和用户体验。
10.Time列是pending 什么意思
当时间（Time）列显示为"pending"时，通常表示该请求正在等待被处理或执行，但尚未完成。这意味着请求已经发送给服务器或正在服务器上执行，但还没有返回结果或完成处理。
在这种情况下，"pending"表示请求处于一个中间状态，正在等待系统或服务器的进一步响应或处理。可能的原因包括网络延迟、服务器负载、资源竞争等。
一般情况下，一段时间后，"pending"状态会转变为已完成（completed）或者出现错误（error），具体取决于请求的执行结果。如果请求长时间处于"pending"状态，可能需要进一步检查网络连接、服务器状态以及请求本身是否存在问题。