Chrome Browser Network Panel HTTP request time analysis

The Browser Developer Tools Network window allows you to see the exact time required to download each component.

According to the above table for a brief analysis--

Stalled (blocked)

The browser has a limit on the number of concurrent connections to the same host domain, so if the current number of connections exceeds the limit, the remaining requests will be blocked, waiting for new connections to be available, and the script will block the download of other components;

　　Optimization measures:

1, the rational distribution of resources to multiple hosts, you can increase the number of concurrent, but increase the number of concurrent downloads will also increase the cost, depending on the bandwidth and CPU speed, excessive parallel download will degrade performance;

2. The script is placed at the bottom of the page;

DNS Lookup (domain name resolution)

To request a resource under a domain name, the browser needs to first obtain the IP address of the domain name server through the DNS resolver. The browser cannot download anything from the host name until the DNS lookup is complete.

　　Optimization measures:

1, the use of DNS cache (set TTL time);

2, the use of connection:keep-alive features to establish a persistent connection, you can make multiple requests on the current connection, no need to do domain name resolution;

Initial connection (Initialize connection)

Three handshake time for TCP to establish a connection

SSL (included in HTTPS connection)

　　HTTP is a Hypertext Transfer protocol that sends content in plaintext, does not provide data encryption in any way, and obtains information if it is intercepted by criminals to intercept the transmission between the browser and the server.

HTTPS is a Secure Sockets Layer Hypertext Transfer Protocol, that is, on the basis of HTTP added SSL protocol, SSL relies on certificates to verify the identity of the server, and for the communication between the browser and the server encryption.

Therefore, the time to establish an HTTPS connection is equivalent to three handshake time +ssl time.

Request sent (send requests)

The time the HTTP request was sent (from the first bit to the last bit)

　　Optimization measures:

1, reduce the HTTP request, you can use CSS Sprites, inline pictures, merge scripts and style sheets, etc.;

2. Add a long expires header to infrequently changing components (equivalent to setting an old expiration time) and avoid unnecessary HTTP requests in subsequent page views;

Waiting (Waiting for response)

is usually the most time-consuming. The gap between sending a request and receiving a response is affected by factors such as line, server distance, and so on.

　　Optimization measures:

1, using the CDN, the user's access to the closest working cache server, the cache server directly respond to user requests, improve response speed;

Content Download (Download)

Time to download HTTP response (includes header and response body)

　　Optimization measures:

1, through conditional GET request, compare if-modified-since and last-modified time, determine whether to use the components in the cache, the server will return "304 not Modified" status code, reduce the size of the response;

2, remove duplicate scripts, streamline and compress the code, such as with the help of automated building tools grunt, gulp, etc.;

3, compressed response content, the server-side enable gzip compression, can reduce download time;

Chrome Browser Network Panel HTTP request time analysis