了解 Firebug 的网络面板

Question

我正在尝试使用 Firebug 的 Net 面板分析网页的性能。

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

所以这是我的问题：

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

2) 接下来的 6 个请求来自缓存。紫色条表示等待时间，我认为这是浏览器“等待服务器执行某些操作”的时间。既然来自缓存，浏览器究竟在等待什么。另外：可能是什么原因导致 4.4KB 响应的等待时间（63ms）比 126.3KB 响应（50ms）长。

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

4) 红色竖线表示加载事件。根据https://developer.mozilla.org/en-US/docs/Web/Events/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。