了解Firebug的网络面板 [英] Understanding Firebug's Net panel

问题描述

下面的屏幕截图显示了一个使用Firebug的 Net 面板的网页的性能。谷歌查询的例子。为了这个讨论的缘故，我点了两次，所以一些请求被缓存。

所以这是我的问题：
$ b $ 1）第一次请求结束和下一次开始之间发生了什么请求（这是第三个）。在同一个上下文中：为什么第三个请求比第二个请求更早开始？

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

3）在下一个请求中，有一个相当长的绿条表示接收响应的时间。这是怎么回事，这似乎至少是正比于响应的大小？

4）红色垂直线表示负载事件。根据 https://developer.mozilla.org/en-US/ docs / Web / Events / load 这意味着：加载事件是在资源及其相关资源加载完成时触发的。在时间轴上，您可以看到在加载事件之后仍然执行了一些请求。怎么会？他们是否被认为是不依赖的，如果是这样的话，为什么？ 第一个请求需要被解析，以找出还有什么需要加载。这个解析时间导致第二个请求的差距。另请参阅对相关问题的回答。 >来自缓存的响应仍然有一个关联的网络请求，它返回304 HTTP状态码。

当你展开请求时，你可以看到请求和响应头以及缓存响应的响应头。


与此相反，还有一个响应是直接从一个名为后退前进缓存（或BFCache ）。这些响应直接在浏览器启动之后发生，当您可以启用选项来恢复上一个会话中的选项卡以及在选项卡历史记录中来回导航时。

这取决于网络连接速度和响应的大小，也取决于服务器发送完整响应的时间。为什么这一个请求需要花费很长时间才能与其他请求相比较，如果不知道服务器端会发生什么情况，就无法解释这个请求。

load 事件是在加载页面请求时触发的，包括所有依赖的资源，如CSS，图像，JavaScript源等等。 load 事件是异步加载，例如通过XMLHttpRequest或 推迟元素的属性。

I am trying to get a hang on analysing the performance of a web page using Firebug's Net panel.

The following screenshot shows an example of a google query. For the sake of this discussion I clicked twice, so some requests are cached.

So here are my questions:

1) What is happening between the end of the first request and the beginning of the next request (which is the third one). In the same context: Why is the third request starting earlier than the second request?

2) The next 6 requests are coming from the cache. The purple bar is indicating waiting time and I assumed this is the time the browser "waiting for the server to to something". So as comes from cache, what exactly is the browser waiting for. Also: What could be the reason, that the waiting time for for a 4,4KB response is longer (63ms) than for a 126,3 KB response (50ms).

3) In the next request there is a fairly long green bar indicating the time of receiving the response. How comes that this doesn't seem to be at least fairly proportional to the size of the response?

4) The red vertical line indicates the load event. According to https://developer.mozilla.org/en-US/docs/Web/Events/load this means: "The load event is fired when a resource and its dependent resources have finished loading." In the timeline you can see that there are still a couple of requests performed after the load event. How comes? Are they considered to be not dependent and if so why?

解决方案

1. The response of the first request needs to be parsed to find out what else needs to be loaded. This parsing time causes the gap to the second request. See also my answer to a related question.

2. Responses coming from cache still have an associated network request, which returns the 304 HTTP status code. You can see the request and response headers as well as the response headers of the cached response when you expand the request.
   
   In contrast to that there is also a response that is directly served from a special cache called Back-Forward Cache (or BFCache). These responses happen directly after the browser start when you have the option enabled to restore your tabs from the last session and also when you navigate back and forth in the tab history.

3. This depends on the network connection speed and the response's size in the first place but also on how long the server takes to send the full response. Why that one request takes that long in comparison to the others can't be explained without knowing what happens on the server side.

4. The load event is fired when the page request is loaded including all its depending resources like CSS, images, JavaScript sources, etc. Requests initiated after the load event are loaded asyncronously, e.g. through an XMLHttpRequest or the defer attribute of the element.

这篇关于了解Firebug的网络面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！