Chrome Developer tools:network Panel Description

First, chrome Developer tools:network Panel

From the network panel can get a lot of useful information, such as detailed time data, HTTP request header response header, Cookies,websocket data.

By analyzing this data, you can know which resource is taking the longest time to load and who initiated the network request, which is helpful for performance optimization.

This data acquisition is done through an API, Resource Timing API.

We don't need to know how it's implemented, just know what data it can provide.

This data is also available through the Chrome browser's Window.performace object, as follows

Ii. Overview of Network Panel

The network monitors all HTTP requests in the Web page, one line represents an HTTP request, and each field represents the different properties and states of the request.

1. The amount of information (landscape) of the switchboard row.

Click the button to streamline the display of information and click the button to display all information.

When all information is displayed, including the primary and secondary fields (such as time and latency in the red box), only the primary fields (such as the red box in color) are displayed when you refine.

2, adding and deleting the Network panel column (portrait).

A request for a resource is a row, including many column parameters, which are listed by default.

• Name and path: request the names and paths of resources
• Method: Request methods, common Get,post
• Status and Text:http state code and text information
• Domain: Name of the requesting resource
• Type: The MIME type of the request resource
• Initiator: Sending the requested object (such as Parser,redirect,script,other)

For example, in the Request MENU.CSS resource initiator display as (index): 650[paraser], that the CSS file is parsed from the NO. 650 line of the first page HTML, view the source code can see this line is a <link> tags to request menu.css resources.

The initiator of some resources is a script that indicates that the resource was loaded by a JS file.

• Cookies: Requests with multiple Cookies,cookie numbers can also be seen in the request details.
• Size and Content:size is the true size of the HTTP request transmission, including the response header and the response body, and the content indicates the size of the response body decompression (typically gzip compressed if there is compression). If gzip encoded transmission is used, the general content is larger than size, otherwise the content is smaller than size. If the resource is loaded from the browser cache instead of being fetched over the network, the content is from cache.

For example, this JS request, size is 64.7kb,content to 201kb, indicating that the server is compressed to request the resource, the size of 64.7kb, you can click to view resource details, in headers can see content-encoding: GZIP compressed transmission using GZIP. Browser decompression After the true content size of 201kb, this can reduce the server bandwidth pressure.

• Time and latency:time represents the actual amount of time spent sending a request to the last byte receiving the response, that is, the total duration of the request for a resource, and Latency represents the delay from sending the request to the first byte of the receiving response. Thus, time minus latency is a response to bandwidth problems, including client and server bandwidth.
• Timeline: The entire request process timeline, you can see exactly where the time is spent.

The default is to display only some of the column information, in the header right out of a list, tick is displayed, remove the tick on the network panel in the table to delete this column.

3. Request sort

Requests are ordered by default at the request start time, which is very common for sorting size and time, and one can see which request is consuming resources.

The sort of team timeline can have multiple options:

• Timeline, the default value, is sorted by the start time of each HTTP request, with start time.
• Start time, sort with timeline.
• Response time, sorted by the Response time of the HTTP request.
• End time: As requested by HTTP
• Duration: Total time ordered by request.
• Latency: The request starts at the time of the first byte of the receive response (that is, ttfb-time to primary byte).

4. Keep the history log

Jump when you want to keep the previous days, with the Preserve log option. If unchecked, each time the log is lost, check the preserve log, each time the refresh will retain log, such as the Refresh 3 times there will be three requests log. Page jumps to other address log will also be retained.

5, a request for details

Click any one of the HTTP requests to see the details.

• HTTP Request and Response Headers: includes the request url,http Method,response status code, and so on. You can view the formatted HTTP headers and the original information by toggling the view parsed/view source .

• Resource preview: Images or formatted JSON information can be previewed.

• HTTP Response: Returns the raw information that is not formatted.
• Cookies names and values: Includes request cookies and response cookies.

• Resource Network Timing: The time distribution of the request to the response.

6. Request filtering

Displays only the specified type of request, such as IMG,CSS,JS.

A funnel-shaped button that means whether the filter information option is enabled. When enabled, you can filter on the following column (Hide data urls,xhr,js,css, and so on).

More advanced point, you can make a request query, that is, enter the corresponding characters in the preceding input box to match the HTTP information. For example, input status-code:200 filter out a status code of 200 requests.

When querying, the information entered includes type (StatusCode) and value (200). The browser gives auto-completion hints, which are selected by the up and down arrows or tab.

You can also reverse the selection by adding "-" before the query criteria. For example, by adding a minus sign in front of Status-code, you can filter out all requests for status codes that are not 200.

Some of the filtering types available are as follows:

• Domain: Like www.google-analytics.com
• Has-response-header: Like Access-control-allow-origin
• is: like running
• Larger-than: For larger-than:50 example larger-than:150k , larger-than:2m
• Method: such as Get
• Mime-type: It's content-type, like text/html.
• Scheme: such as HTTPS
• Set-cookie-name: For example, there is a cookie for loggedin=true, which can be filtered by Loggedin
• Set-cookie-value: For example, there is a cookie for loggedin=true, which can be filtered by true
• Set-cookie-domain:
• Status-code: Like 200

7. Disable caching

Tick the Disable cache option to disable caching, all requests with a status code of 304 and size for the from cache into a normal request.

8, a request to spend specific time analysis

Take the request imagemap.php as an example.

The total consumption time is 711.41ms, including 2 parts connection setup and Request/response:

(a more complete picture of the official is as follows)

• Connection Setup : Establish a connection to the server. Specifically, queueing and stalled ... are included.
  • queueing: Not too clear, as if the wait time on the local firewall, or some plug-in interception time.
  • stalled: network latency. The browser gets the instruction to issue this request to the wait time that the request can be issued. This is typically agent negotiation, and the time to wait for a reusable TCP connection to be released, excluding DNS queries, establishing TCP connection times, and so on.
  • Proxy Negotiation: Connection time to the proxy server.
  • DNS Lookup: Indicates the DNS query time, if the first access to the domain name needs to find, the IP address is not required, in the absence of this parameter, the local cache domain name server IP, the browser does not need to query, directly through the IP request server.
  • Initail Connection: Time to establish the connection, including  tcp handshakes/ Retries and negotiating A ssl.
• request/response: The time of the request and response. Details include Request Sent,waiting,Content Download
  • Request sent: The time to send an HTTP request to the server, that is, the upload time, depending on the size of the amount of data sent.
  • Waiting (TTFB): The time it takes to receive the first byte of the response after the request is sent, TTFB, which is an important metric for server optimization, and the purpose of server optimization is to reduce this time.
  • Content Download: The time to get the response data from the server, the download time, which is the time minus latency, which is an important indicator of the response bandwidth. Response message content size, network bandwidth, whether HTTP compression is used, and so on.

Three, page load time analysis

finish:1.39s: Indicates that the entire page load time is 640ms.

Domcontentloaded:998ms: Occurs at the start point of the page domcontentloaded event, corresponding to the blue vertical line.

load:1.39s: Indicates the start point of the page load event, corresponding to the red vertical line.

1, window.onload and domcontentloaded detailed

The domcontentloaded event is executed before Window.onload, and the DOM tree is built to perform the domcontentloaded event, and Window.onload is executed when the page is loaded, including loading complete .

2. Code Test

The code is as follows:

<! DOCTYPE html>
Effect:
jquery's $ (document). Ready (); the domcontentloaded event.
Additional Resource Links:

 
 

  
  
 
   
Pagespeed Insights  pagespeed optimization Tools
 
   
High performance Networking in Google Chrome 
 
   
How gzip compression works 
 
   
Web Performance Best Practices 
 
  
 
 
Chrome Developer tools:network Panel Description