HTTP header optimization for building a high-performance WEB

Before discussing Browser Optimization, we should first analyze what happened between initiating an HTTP request from the client and receiving the response from the user? Only when you know yourself and know yourself can you be defeated. This is why as a WEB developer, you must learn more about TCP/IP and other networks.

0 × 00 preface

Before discussing Browser Optimization, we should first analyze what happened between initiating an HTTP request from the client and receiving the response from the user? Only when you know yourself and know yourself can you be defeated. This is why as a WEB developer, you must learn more about TCP/IP and other networks.

0 × 01 what happened?

When a user initiates an HTTP request, the client establishes a TCP connection with the server. after the connection is established, the server processes the request and responds to the client, the response content generally includes the response body.

(Here we only briefly describe it, but what happens in a real request is quite complicated. here we post a connection, which is detailed ).

What happened during the process from URL input to page loading?

Establish a TCP connection

For reliable data transmission, TCP performs TCP three-way handshakes before sending data to determine that the receiver can successfully collect transmitted data and establish a connection, system resources and time resources are required.

Server processing and response

After the server receives a request sent from the client, if the request content is a static resource, the server extracts the static resource from the hard disk, places the static resource in the response body, and sends it to the client. If it is a dynamic resource, the server first retrieves the resource and dynamically generates the final response body through business logic operations, and then sends it to the client.

Client rendering

The client receives the network resources transmitted to the server, performs rendering, rendering, and so on, and finally displays the resources to the user.

0 × 02 where is the optimization point?

Through a simple understanding, we know that TCP connection establishment consumes resources and time. if we don't need to establish a resume TCP connection each time, can we improve the website performance? The answer is yes.

• Optimization point 1: reduce TCP connections

We know that when getting resources, the speed from slow to fast is: network resources-> local hard disk resources-> Local memory resources. Network resources are also divided into hard disk resources and memory resources. In addition, the transmission of network resources also has a considerable latency.

• Optimization point 2: cache data

• Optimization point 3: reduce data transmission volume

0 × 03 how to optimize it?

This article focuses on optimization related to HTTP headers, or browser-related optimization. Other optimizations are not described here.

Persistent connection: Keep-Alive

HTTP connections are designed to be request-response-closed at the beginning, that is, each time an HTTP connection is established, only one resource request is allowed. when multiple resources need to be obtained on the same target server, you need to establish HTTP connections multiple times, and the process of establishing connections multiple times reduces the website performance.

As a result, there is a Connection: Keep-Alive, called persistent Connection. Keep-Alive avoids the process of establishing or re-establishing a connection and reduces the number of HTTP connections.

In contrast, Keep-Alive: timeout = 120, max = 5

Timeout = 120 means that the TCP channel is 120 S, and max = 5 means that the TCP channel can receive a maximum of five HTTP requests, and then the connection is automatically closed.

Last-Modified and If-Modified-Since

The Last-Modified header is a cache-related HTTP header added by the server to the client's HTTP response. it marks the Last modification time of the requested resource on the server. For example:

Last-Modified: Fri, 12 May 2015 13:10:33 GMT

When the client finds that there is a Last-Modified in the HTTP response header, the resource will be cached. in the next request for resources, add the If-Modified-Since header to the HTTP request header, in the header, the value of the Last-Modified attribute in the response header is added when the resource is successfully requested. that is:

If-Modified-Since: Fri, 12 May 2015 13:10:33 GMT

When an If-Modified-Since header is found in the HTTP request received by the server, the attribute value is compared with the last modification time of the requested resource, if the last modification time is the same as the attribute value, the server returns a 304 Not Modified response, which does Not include the response entity. After the browser receives a 304 response, it redirects to obtain the local cache resources. If the last modification time is different from the attribute value, the system obtains the resource from the server and returns a 200 response.

Version tag: ETag and If-None-Match

In fact, ETag is similar to Last-Modified, but ETag does not use time as the mark. Instead, it uses some algorithms to generate a unique string for the requested file, mark a file. When receiving a request from the client for a resource, the server adds the ETag header when the server responds, as shown below:

ETag: W/"a627ff1c9e65d2de2efe0dd25efb8c"

When the client discovers the ETag header, it also caches the resource and adds If-None-Match in the request header at the next request, for example:

If-None-Match: W/"a627ff1c9e65d2dede2efe0dd25efb8c"

When the server receives a request containing this header, it uses the same ETag generation algorithm to calculate the file ETag and compares it with the If-None-Match attribute value. If it is consistent, then a 304 Not Modified response is returned, basically consistent with the previous method.

Cache Time: Expires and Cache-Control

In the preceding two methods, although cache is selected for rendering and rendering when resources are requested, an HTTP request is initiated before this, although there is no real response entity, it will still cause some resource consumption. Expires and the above two methods use different ideas.

When the server wants the client browser to cache a certain resource, in order to avoid the client from asking itself every time: Can I still use the last cache? Therefore, the server selects authority. I only want to tell the browser how long it will take for you to use the resources I have given you this time. you can keep using the resources during this time period without having to consult with me every time. The server uses the Expires attribute to tell the client browser how long it will take to ask the server. As follows:
Expires: Thu, 19 Nov 2015 15:00:00 GMT

When the client finds this attribute value in the response header, the resource is cached, and the cache expiration time is the time in Expires. In this period, the browser is completely autonomous.

However, the disadvantage of Expires is that if the server time is inconsistent with the local time of the client, the server may allow the client to cache the resource for an hour, the local time of the client is two hours faster than the server time, which means that all the caches will not take effect.

Therefore, there is an attribute that makes up for this deficiency, namely: Cache-Control. If the server adds this attribute in the response header, the client directly uses this attribute value to generate the cache expiration time for the local time. This solves the problem as follows:

Cache-Control: max-age = 3600

If the client receives the response at on January 1, October 01, 2015, it will add 3600 seconds, that is, on January 1, October 01, 2015, as the cache expiration time. If the response header contains both Expires and Cache-Control, the browser will first choose Cache-Control.

0 × 04 ends

Here, we basically talk about the website performance optimization related to the HTTP header. This article focuses on the study notes of chapter 6 browser cache in "building a high-performance WEB site. Guo Xin. This book provides a detailed explanation of the optimization of WEB sites at all levels. it is indeed a great book and I would like to thank HQBOSS for its recommendation.