answer key points

强缓存 协商缓存

HTTP caching is mainly divided into 强缓存and 协商缓存.

Strong caching can be controlled by Expires/ , , browser display .Cache-Control命中强缓存时不会发起网络请求，资源直接从本地获取状态码 200 from cache

The negotiation cache can be controlled by Last-Modified/ If-Modified-Sinceand Etag/ If-None-Match. When the negotiation cache is turned on, the request sent to the server will carry the cache identifier. If the negotiation cache server returns , 304 Not Modifiedit means that the browser can use the local cache file. Otherwise, it returns 200 OK and returns the data normally.

In-depth knowledge

flow chart

2. Strong cache

2.1 Expires

HTTP/1.0 artifacts
Priority is lower than Cache-control: max-age
Disadvantages: Use local time to determine whether it is expired, and local time is modifiable and not necessarily accurate

Expiresis the resource expiration time (GMT date format/time stamp) returned by the server, 若用户本地时间在过期时间前，则不发送请求直接从本地获取资源.

2.2 Cache-Control

HTTP/1.1 artifacts
Priority over Expires
Correctly distinguish the role of no-cache/no-store

Cache-ControlIt is a general message header field for page caching, and the caching mechanism can be implemented by specifying instructions.

Commonly used fields are:

max-age: Set the maximum duration of cache storage, in seconds
s-max-age: Consistent with max-age usage, but only applicable to proxy servers
public: Indicates that the response can be cached by any object
private: Indicates that the response can only be cached by private users and cannot be cached by proxy servers
no-cache: Force the client to initiate a request to the server (disable strong caching, negotiate caching available)
no-store: All caching is prohibited, including negotiation caching is also unavailable
must-revalidate: Once a resource expires, the cache cannot respond to subsequent requests with the resource until it successfully authenticates to the origin server
immutable: Indicates that the response body will not change over time (as long as the resource does not expire, the request will not be sent)

It is worth noting that although the above commonly used fields are all response header fields, Cache-Controlthey also support request headers, for example Cache-Control: max-stale=<seconds>, indicating that the client is willing to receive a <seconds>resource that has expired but cannot exceed seconds

2.3 Expand knowledge (unpopular test site)

HTTP/1.0 Pragma
- Pragma used to disable browser caching during HTTP/1.0: no-cache
cache location
- Read cache from Service Worker (HTTPS only)
- Network display when reading cache from memorymemory cache
- The network display when reading the cache from the hard diskdisk cache
- Push Cache (HTTP/2.0)
- Priority Service Worker > memory cache > disk cache > Push Cache
Best practice: resources hit the strong cache as much as possible, and ensure that users use the latest resource files when resource files are updated
- Strong caching will only hit resource files with the same name
- Add a hash identifier to the resource file (webpack can include it on the file name when packaging)
- Forcibly update resources that hit a strong cache by updating the resource filename

negotiation cache

3.1 ETag / If-None-Match

Validate cache by unique identifier
Takes priority over Last-Modified / If-Modified-Since

If the response header of the resource request contains ETag, the client can include the If-Modified-Since header in the header of the subsequent request to verify the cache. If the server judges that the resource identifier is consistent, it will return a 304 status code to inform the browser that it can read from the local fetch cache

The unique identification content is determined by the server-side generation algorithm, which can be the hash value generated by the resource content, or the hash value of the last modification time. So the ETag logo change does not mean that the resource file has changed, and vice versa

3.2 Last-Modified / If-Modified-Since

Validate the cache by the resource's last modification time
Lower priority than ETag / If-None-Match
Disadvantage: 只能精确到秒, if the resource Last-Modified is modified multiple times within 1s, it will not change

If the response header of the resource request contains Last-Modified, the client can include the If-Modified-Since header in the header of the subsequent request to verify the cache. If the server judges that the last modification time of the resource is the same, it returns a 304 status code to inform the browser that the cache can be read locally.

3.3 Expand knowledge (unpopular test site)

ETag is W/prefixed to indicate the weak comparison algorithm (If-None-Match itself only uses the weak comparison algorithm).
ETag can also cooperate with If-Match to detect whether the current request is the latest version. If the resource does not match, return status code 412 error (If-Match does not add W/, use a strong comparison algorithm).