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:
-
- Resource identification:
- 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
- Illustration: