Probe into HTTP caching

The role of caching

Users access a Web page more often than the frequency of Web page updates, so most of the time users get from the server HTML, JS, CSS and pictures and other content is the same, if each access from the server to obtain these static content is reduced the speed of the page loading, but also occupy the extra server bandwidth is obviously a thankless task, and it needs to be cached at this point. The Web cache can be broadly divided into: Database cache, server-side cache (Proxy Server cache, CDN cache), browser cache, browser cache also contains a lot of content: HTTP cache, Indexdb, cookies, localstorage, etc., we only discuss the HTTP cache.

HTTP caching

By having an overall understanding of the HTTP cache:

An HTTP message is a block of data that is sent and responded to when the browser and server communicate with each other. The browser requests data from the server, sends the request message, the server returns the data to the browser, and returns the response response message. And the message information is divided into two main parts:

The header header, cookie , cache information and other cache-related rules information are included in the header;
Contains the body part of the data body, which is the part of the HTTP request that really wants to be transferred.

As you can see, the HTTP cache is implemented primarily depending on the parameters in the header, and we can see how the HTTP cache works by analyzing the parameters of the cache in the header.

The HTTP cache is divided into two main categories: forced cache, contrast cache. Force Cache

In the absence of cached data, when the browser requests data from the server, the server returns the data and cache rules, the cache rule information is included in the response header, and the cached data can be used directly in case the cache data is not invalidated, and for forced caching There are two fields in the response header that indicate the failure rule (Expires/cache-control).

Expires

The expires value is the expiry time returned by the server, i.e., the next request, the request time is less than the expiry time returned by the server, and the cached data is used directly. But expires is HTTP1.0, now the browser is the default use of HTTP1.1 (Cache-control), so its role is basically ignored.

Cache-control

Cache-control common values are private, public, No-cache, Max-age,no-store, and the default is private.

Private: Client can cache public: both client and proxy server can cache max-age=xxx: Cached content will expire after xxx seconds no-cache: You need to use a contrast cache to validate cached data no< /c2>-store: All content is not cached, forced cache, contrast cache is not triggered

Contrast cache

Compare the cache to determine if the cache can be used. When the browser requests the data for the first time, the server returns the cached identity with the data to the client, the client backs up to the cache database, the client sends the cached identity of the backup to the server when the data is requested again, the server determines the cache identity, and succeeds returns a 304 status code. Notifies the client that cached data can be used, and if unsuccessful, returns a 200 status code to retrieve the data.

There are two main cache identities in the header of the comparison cache, in the request header and in the response header, respectively.

Last-modified/if-modified-since

last-Modified ( in the header): When the server responds to the request, it informs the browser of the last modification time of the resource.　　If-modified-since (in Request header): When you request the server again, this field notifies the server of the last time the resource was returned by the server when it was last requested. When the server receives the request, it finds that the header if-modified-since is compared with the last modification time of the requested resource, and if the last modification time of the resource is greater than if-modified-since, return the status Code 200 and return the resource again. If the last modification time of the resource is less than or equal to if-modified-since, the response status Code 304 tells the browser to continue using the saved cache.

Etag/if-none-match (priority higher than last-modified/if-modified-since)

Etag (In response header): When the server responds to a request, it tells the browser that the current resource is uniquely identified on the server (the build rule is determined by the server). If-none-Match (in Request header): This field informs the server browser of the unique identification of the cached data when the server is requested again.    when the server receives the request, it finds that if-none-match, which is different from the unique identity of the requested resource, returns the status code 200, returns the resource again, and returns the status code 304, telling the browser to continue using the saved cache.

Note: Forcing the cache to take effect does not require any further interaction with the server, and the contrast cache, whether or not it takes effect, requires interaction with the service side, and if both types of cache rules exist at the same time, force cache priority higher than contrast cache。

Probe into HTTP caching