了解Firebug的Net面板

Question

我正试图利用Firebug的 Net 面板分析网页的性能。

以下屏幕截图显示了Google查询的示例。为了便于讨论，我点击了两次，因此缓存了一些请求。

所以这是我的问题：

1）第一个请求的结束和下一个请求的开始（第三个请求）之间发生了什么。在相同的上下文中：为什么第三个请求的开始时间早于第二个请求？

2）接下来的6个请求来自缓存。紫色条表示等待时间，我认为这是浏览器“等待服务器到某事”的时间。因此，从缓存来看，浏览器到底在等什么。另外：可能的原因是，4,4KB响应的等待时间（63ms）比126,3 KB响应（50ms）更长。

3）在下一个请求中，有一个相当长的绿色条表示接收响应的时间。为什么这似乎至少与响应的大小成正比？

4）红色垂直线表示加载事件。根据{{​​3}}，这意味着：“当资源及其相关资源完成加载时，将触发load事件。”在时间轴中，您可以看到在加载事件之后仍有一些请求已执行。怎么会？他们被认为是不依赖，如果是这样，为什么？

Answer 1

1. 需要解析第一个请求的响应，以找出需要加载的其他内容。此解析时间导致与第二个请求的间隙。另请参阅my answer to a related question。

2. 来自缓存的响应仍然有一个关联的网络请求，它返回304 HTTP状态代码。展开请求时，您可以看到请求和响应标头以及缓存响应的响应标头。
   
   与此相反，还有一个响应直接由名为Back-Forward Cache (or BFCache)的特殊缓存提供。当您启用选项以从上一个会话恢复选项卡时以及在选项卡历史记录中来回导航时，这些响应会在浏览器启动后直接发生。

3. 这首先取决于网络连接速度和响应的大小，还取决于服务器发送完整响应所需的时间。为什么一个请求与其他请求相比花费的时间长，如果不知道服务器端发生了什么就无法解释。

4. 加载页面请求时会触发load事件，包括所有依赖资源，如CSS，图像，JavaScript源等。load事件后启动的请求是异步加载的，例如通过XMLHttpRequest或defer attribute of the element。