2.chrome Network panel

 1. Controls : Use these options to control how the Network panel looks and functions. 2. Filters : Use these options to control which resources are displayed in the Requests Table. Tip: hold cmd and then click on a filter to select multiple filters at the same time. 3. Overview : This graph shows a timeline of when resources were retrieved. If you see multiple bars stacked vertically, it means that those resources were retrieved simultaneously. 4. Requests Table : This table lists out every resource that was retrieved. By default, this table is sorted chronologically, with the earliest resources at the top. Clicking on the name of a resource yields more information about it.  Tip: right-click on any of the table headers except Timeline to  add or remove columns of information. 5. Summary : At a glance this pane tells you the total number of  requests, amount of data transferred, and load times.

The Requests Table displays the following columns by default. You can add and remove columns. - Name. The name of the resource. - Status. The HTTP status code. - Type. The MIME type of the requested resource - Initiator. The object or process that initiated the request. It can have one of the following values:Parser --- Chrome’s HTML parser initiated the request.Redirect --- A HTTP redirect initiated the request.Script --- A script initiated the request.Other --- Some other process or action initiated the request, such as the user navigating to a page via a link, or by entering a URL in the address bar. - Size. The combined size of the response headers (usually a few hundred bytes)plus the response body, as delivered by the server. - Time. The total duration, from the start of the request to the receipt of the final byte in the response. - Timeline. The Timeline column displays a visual waterfall of all network requests. Clicking the header of this column reveals a menu of additional sorting fields.

View DOMContentLoaded and load event information

DOMContentLoaded is fired when the initial markup of a page has been parsed. It is displayed in two places on the Network panel: 1. The blue vertical bar in the Overview pane signifies the event. 2. In the Summary pane you can see the exact time of the event.load is fired when a page has fully loaded. It is displayed in three places: 1. The red vertical bar in the Overview pane signifies the event. 2. The red vertical bar in the Requests Table signifies the event, too. 3. In the Summary pane you can see the exact time of the event.

DOMContentLoaded 和load事件触发:DOMContentLoaded代表的那条线表示当浏览器已经完成解析文档(但其他资源比如图片和样式表可以还没下载完成)，而load事件代表的线表示所有资源都已经加载完成了。如果这两个事件同时发生，这条线会显示为紫色。

---

View details for a single resource

---

View network timing

Queuing(白色) ： 请求被推迟了，这类请求优先级可能比较低。这类请求经常是图片类型。这些图片请求是一起发的get,但是由于浏览器http线程池内可用线程数量有限,这些先排队等着呢,等之前的http请求使用完成有空线程了再按队列中的.Stalled/Blocking(灰色) ： 浏览器发请求前本地的操作时间，比如去缓存中查看页面缓存等。Proxy Negotiation ：与代理服务器的连接时间DNS Lookup ： 很明显，DNS查询的时间，当本地DNS缓存没有的时候，这个时间可能是有一段长度的，但是比如你一旦在host中设置了DNS，或者第二次访问，由于浏览器的DNS缓存还在，这个时间就为0了。Initial Connection / Connecting ：建立TCP连接的时间，就相当于客户端从发请求开始到TCP握手结束这一段，包括DNS查询+Proxy时间+TCP握手时间。SSL ： 完成SSL握手时间。Request Sent / Sending ： 发送请求时间，这个时间一般很小，当然如果POST请求，请求体比较大，那么这个时间段就会比较长了。Waiting (TTFB, time to first byte)：发送请求完毕到接收请求开始的时间。这个时间段就代表服务器处理和返回数据网络延时时间了。服务器优化的目的就是要让这个时间段尽可能短。Content Download / Downloading ： 接收响应数据时间。返回的数据比较大，那么这个接收时间就比较大

---

Diagnosing Network Issues

Queued or Stalled series

chrome 最多允许每个主机 有 6 个 TCP 请求，如果超过6个，则进入等待队列。

---

Slow Time to First Byte(TTFB，Waiting )

---

2. View cookies

---

3.Sort requests

默认资源请求表是按请求的时间开始排序，从最早的开始。

---

4. Filter

---

https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading#view-network-timing-details-for-a-specific-resource

https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/understanding-resource-timing

https://www.w3.org/TR/resource-timing/

https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/

http://developer.51cto.com/art/201209/357025.htm