preface

Caching is an important tool for web page optimization. When you take advantage of caching, your page loads much faster. And when there is a cache, it will also reduce the requests to the server and static resources, which is of great benefit to the consumption of traffic and CDN. Let’s familiarize ourselves with what caching browsers use, and what are the differences?

Browser cache

When the browser requests resources from the server, it directly fetches resources from the cache if it discovers that the local browser has a cache. The browser does not send a real request to the server. A brief description of the cache lookup mechanism:

  • When the browser sends the request to the server for the first time, because the browser is the first time interact with the server, so there is no data resources from the server, the browser local cache data, and then direct access to the server, and then after the server receives the request the resource is returned to the browser, and then the response code for200When the browser receives the resource, it caches it along with the corresponding response header.
  • When the browser sends a request to the server, it checks the local strong cache that was carried in the last requestCache-ControlThe data. If the resource has not expired, use the resource in the cache and do not request data from the server.
  • If the browser does not hit the cache or the hit cache has expired, the browser sends the request to the server and enters the negotiation cache phase.

The browser cache is classified into strong cache and negotiated cache. When a client requests a resource, it performs the following operations to query the cache

  • First of all, according to the resourceshttp headerTo determine if it hits the strong cache, check firstCache-ControlIf a match is made, the resource is fetched directly from the local cache without sending a request to the server
  • If the strong cache does not match, the browser enters the negotiation cache phase. The server uses the Request Header to verify whether the resource matches the negotiation cache. If the resource matches the negotiation cache, the server returns the request but does not return data.
  • When the negotiation cache also fails, the server sends the resource to the client
  • When you force a page refresh, for examplectrl+f5, will directly skip the strong cache and negotiation cache, directly request the server to get the resource
  • A normal refresh just skips the strong cache, but checks the negotiated cache

Strong cache

Expires

Expires is a header that appears in HTTP/1.0 and is also used to determine the local Cache. It is an absolute time. As long as the request s is before Expires, the local Cache is always valid, otherwise a request will be sent to the server to retrieve the latest resource. Max-age and Expires, then max-age takes precedence.

Cache-Control

Cache-control is the most important header in the HTTP Cache. It appears in HTTP/1.1 and has the following values

  • no-cache

If you do not use strong cache, you will enter the negotiation cache phase. How do you negotiate the availability of cache and directly use cache resources

  • no-store

Disable browser caching directly, fetching new resources from the server every time

  • public

It can be cached by all users, including browsers and intermediate proxy servers such as CDN

  • private

Only browser cache is allowed, not CDN intermediate proxy server cache

  • max-age

The maximum amount of time the cache is allowed to be available since the current request

  • must-revalidate

When the cache expires, the server needs to verify the validity of the cache

Negotiate the cache

When do you go back to the negotiation cache?

  • There is noCache-ControlandExpires
  • Cache-ControlandExpiresOut of date
  • Cache-ControlProperty set tono-cachewhen

When the request meets the above criteria, the browser will enter the negotiation cache phase and return 304 to fetch the resource from the cache if a match is made. If the cache is not hit, the server simply sends the new resource status code 200. The negotiated cache headers are last-modified/if-modified-since and ETag/ if-none-match

  • Last-ModifiedThe value is the last update time of the resource, with the serverresponseReturn, even if the file is changed back, the date will change)
  • If-Modified-Since(Compare the two times to determine whether the resource was modified between requests. If not, the negotiated cache is hit.)
  • ETagA unique identifier that represents the content of the resource, along with the serverresponseReturn, only based on whether the contents of the file have changed)
  • If-None-MatchThe server compares the header of the requestIf-None-MatchWith the current resourceETagConsistency determines whether the resource has been modified between requests. If not, the negotiated cache is hit

Last-Modified / If-Modified-Since

When the browser makes a request, the server sends the Last Modified time of the resource back to the browser in the last-Modified header for caching, and when the browser requests it again, it carries the Last time the server returned in if-Modified-since. The server then compares this time to the last time the resource was modified, and if it is equal to or greater than the latest time, the cache is valid, returning 304. If not, it returns the latest resource and updates the last-Modified header information

However, although this can determine whether the cache resource is valid, there are two problems

  • Accuracy errorbecauseLast-ModifiedThe time accuracy is better if the time is in1Updates that happen in seconds, then the judgment is not accurate
  • There are also errors in accuracy. For example, if a file is modified and then restored, the browser cache is still usable, but the modification time has changed, so the cache judgment is not accurate

ETag / If-None-Match

In order to solve the problem of accuracy and quasi-accuracy, ETag method is provided. The cache is accurately judged by the file hash value.

When the browser requests the server, the server adds an Etag field to the response header that is the hash value of the resource. When the browser requests the server again, it will use if-none-match to carry the last cached ETag value. The server then compares the current hash value of the file resource with the imported hash value. If the two values are the same, the resource has not changed and returns 304. Otherwise, it simply returns the new resource and updates the ETag value

Of course, there are some drawbacks to this approach

  • Calculating the cost of generating a hash is a big operation
  • Calculation error Different server using different algorithms may generate different hash values

Cache priority

The strong cache is higher than the negotiated cache, and the ETag in the negotiated cache is higher than last-Modified