Schematic diagram

(Borrow a picture on the Internet to help understand)

Cache processes

The browser caches the resources returned by the server on the first request.

1. Strong cache

A second request will fetch the header information for the cached resource. Determine whether the cache is hit based on expires and cache-control in the Response header. 1. Expires: The time mark stored in this field indicates the time point at which the resource expires. After this time point, the cached resource expires and needs to be submitted to the server for verification. Disadvantages: Incorrect expiration time may be caused by time inconsistency between the client and server, or network delay. 2. Cache-cotrol: Provides precise cache control through different commands. Common instruction

  • max-ageAnd:expiresSimilar, except that this parameter is set to a number of seconds, which is recorded relative to the request time. (max-age=60The cache expires after 60 seconds.
  • no-cache: Force the submission server to validate the cached resource copy before using it (negotiate caching)
  • no-store: Do not use any cache

More detailed instructions: cache-cotrol

2. Negotiate cache

In the case of a strong cache hit, the browser sends a request to the server. This request carries the ETag and last-Modified cached from the first request via if-none-match and if-modified-since.

Server generation Browser request carrying
ETag If-None-Match
Last-Modified If-Modified-Since

ETag: hjk34321dsj4KH43 in response header; ETag: hjk34321dsj4KH43 in response header;

2) The browser will carry if-none-match :hjk34321dsj4kh43 in the request header when requesting again.

3) the server gets if-none-match in the request:

  • If no resource is found on the serverETagIf the property is the same as it, the server responds with 200, adding the resource entity as wellETagTo return.
  • If the same resource is present, the server responds 304.

4) After the browser gets the response:

  • If it is 200, the resources returned by the server are used, along with the resources and that will be carriedETagCache.
  • If it is 304, the browser will use the resource cached from the last request.

2, last-modified and if-modified-since 1) When the first request is made, the server changes the Last time the resource is Modified. Return last-Modified :Wed, 21 Oct 2020 07:28:00 GMT to response header.

2) The browser will carry if-modified-since :Wed, 21 Oct 2020 07:28:00 GMT in the request header when it is requested again.

3) After the server receives the if-modified-since request, it compares it with the last modification time of the resource on the server.

  • ifIf-Modified-SinceTime is not the earliest time. The server will respond with 200, adding the resource entity as wellLast-ModifiedTo return.
  • If it is the earliest time, the server will respond with 304.

4) After the browser gets the response:

  • If the response is 200, render the resource returned by the server, as well as the resource and that will be carriedLast-ModifiedCache.
  • If it is 304, the browser will render the last requested cache resource.