HTTP cache

  • HTTP cache strategy (mandatory cache + negotiated cache)
  • Refresh operation mode and impact on cache

  • About the cache
    • What is caching?
    • Why cache?
      • Pages load faster ~
    • What resources can be cached?
      • Static resources (JS, CSS, IMG)

  • HTTP cache – Mandatory cache
    • Illustration:
      • 1. The initial request is obtained from the server
      • 2. If the server thinks the resource can be cached, it puts cache-control in the response header
      • 3. Request again, as shown in the figure
    • Cache-Control
      • In the Response Headers
      • Controls the logic of forced caching
      • For example, cache-control :max-age=31236000(unit: second) Indicates the maximum time of caching on the client in a year
      • The cache-control value
        • Max-age Sets the cache
        • No-cache Does not cache but does not restrict the operation of the server
        • No-store does not cache and the limiting server does not cache either
        • Private only allows end users to cache
        • Publicb allows intermediate links to be cached, such as routes and proxies

    • About Expires
      • In the Response Headers
      • Also to control cache expiration
      • Has been replaced by cache-control

    • HTTP Cache – Negotiated cache (contrast cache)
      • Server caching policy (the server determines whether the resource can be cached or not)
      • The server determines whether the client resource is the same as the server resource
      • If it is consistent, 304 is returned, otherwise 200 is returned along with the latest resource and the resource identifier
      • Illustration:
        • Resource identification:
          • In Response Headers, there are two types:

            • Last-modified Time when the resource was Last Modified
            • A unique identifier for an Etag resource (a string, similar to a human fingerprint)
          • Illustration:

          • Example:


      • Last-modified and Etag
        • Etag is preferred
        • Last-modified is only accurate to the second level whereas computers are typically accurate to the millisecond level
        • Etag is more accurate and resource-efficient if the resource is generated repeatedly with the same content

      • The flow chart