Browser Cache

Overview

• We can make good use http response header (Cache-control & Etag) to control the caching behaviors

• If not http header is not be specified, the default behavior can depend on the specific browser or client making the request. In general, if there's no Cache-Control field in the response header, the client might use heuristic freshness to determine whether to serve the response from cache or make a new request to the server. Heuristic freshness typically uses factors like the Last-Modified date to estimate how fresh or stale the cached response might be.

A cache MUST NOT store a response to any request, unless:

   o  The request method is understood by the cache and defined as being
      cacheable, and

   o  the response status code is understood by the cache, and

   o  the "no-store" cache directive does not appear
      in request or response header fields, and

   o  the "private" response directive does not
      appear in the response, if the cache is shared, and

   o  the Authorization header field does
      not appear in the request, if the cache is shared, unless the
      response explicitly allows it , and
      
   o  the response either:

      *  contains an Expires header field, or

      *  contains a max-age response directive, or

      *  contains a s-maxage response directive 
         and the cache is shared, or

      *  contains a Cache Control Extension that
         allows it to be cached, or

      *  has a status code that is defined as cacheable by default , or
         
      *  contains a public response directive.

Cache - Control

Cache-Control: must-revalidate
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: public
Cache-Control: private
Cache-Control: proxy-revalidate
Cache-Control: max-age=<秒數>
Cache-Control: s-maxage=<秒數>

• no-cache. This instructs the browser that it must revalidate with the server every time before using a cached version of the URL.

• no-store. This instructs the browser and other intermediate caches (like CDNs) to never store any version of the file.

• private. Browsers can cache the file but intermediate caches cannot.

• public. The response can be stored by any cache.

Etag

• Setting ETag or Last-Modified, you'll end up making the revalidation request much more efficient. They end up triggering the If-Modified-Since or If-None-Match request headers that were mentioned in Request headers.

• When a properly configured web server sees those incoming request headers, it can confirm whether the version of the resource that the browser already has in its HTTP Cache matches the latest version on the web server. If there's a match, then the server can respond with a 304 Not Modified HTTP response, which is the equivalent of "Hey, keep using what you've already got!" There's very little data to transfer when sending this type of response, so it's usually much faster than having to actually send back a copy of the actual resource being requested.

References

Prevent unnecessary network requests with the HTTP Cache  |  Articles  |  web.devweb.dev

RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching

前端三十｜23. [FE] 網頁的快取機制是怎麼運作的？Schaos’s Blog