Come on, boy

1. What is caching

A good cache strategy can reduce the repeated loading of resources and improve the overall loading speed of web pages. Generally, there are two types of browser cache strategies: strong cache and negotiated cache
  • Similarities: If a match is hit, the resource is loaded from the client cache, not from the server
  • Difference: The strong cache does not send requests to the server. The negotiated cache sends requests to the server

2. Fundamentals

  • 1). When loading resources, the browser determines whether the strong cache is hit according to the expires and cache-control of the request header. If so, the browser reads resources directly from the cache without sending requests to the server
  • 2) If the strong cache is not hit, the browser must send a request to the server to verify that the resource is hit by last-Modified and eTAG. If it is hit, the server will return the request, but will not return the data for the resource, and will still read the resource from the cache
  • 3) If neither hits, load resources directly from the server

Expires and Cache-control strong caching

  • Expires

    It describes an absolute time returned by the server. The first time the browser makes a request, the server puts Expires in its header, and the next time the request hits the cache before that time,

Note: Expires is limited by local time. Changing the local time can invalidate the cache
  • Cache-Control

    Max-age indicates the relative time. This value is used to determine the lifetime of the cache in seconds. How can a cache be hit within the lifetime with a higher priority than Expires

Tips, cache-control other common values

Cache-control :no-cache: forces the client to send requests directly to the server, that is, each request must be sent to the server. The server receives the request and determines whether the resource has changed, returning the new content if it has, or otherwise304, unchanged. This can be very misleading and can be mistaken for a response that is not cached. Cache-control: no-cache is actually cached, but every time a client (browser) provides a response, the Cache evaluates the validity of the cached response to the server. Cache-control: public can be cached by all users, including terminals and intermediate proxy servers such as CDN. Cache-control: Private can only be cached by the terminal browser (and private), not by the trunk cache serverCopy the code

3, last-modified/if-modified-since and ETag/ if-none-match negotiate cache

Obviously, negotiating a cache, literally means negotiating with the server to see if a cache is needed

  • Last-Modified/If-Modified-Since

    Last-modified indicates the date the local file was Last Modified. The browser will add if-modified-since to the request header and ask the server If the resource has been updated Since that date. If it has been updated, it will send the new resource back

  • ETag/If-None-Match

    The header of if-none-match will send the Etag returned last time to the server, asking If the Etag of the resource has been updated. New resources are sent back when changes are made

Note: The Etag priority is higher than last-modifed, so the server validates Etag first for the following reasons:

  1. Some files may change periodically, but their contents do not change (only the modification time). At this point we do not want the client to think that the file has been modified and retrieve it.
  2. Some files are Modified very frequently, such as If they are Modified less than seconds (say N times in 1s), and if-modified-since the granularity that can be checked is s-level, and such changes cannot be determined (or the UNIX record MTIME is only accurate to seconds).
  3. Some servers do not know exactly when a file was last modified.