0. Cache location
Find in turn Service Worker, Memory Cache, Disk Cache,网络请求
1. Mandatory caching
HTTP1.0
By setting the response header Pragma: no-cache;, it means that a request will be sent to the server every time
Expires You can set a specific time. The request will not be initiated before this time point, but this time is relative to the server time. If the client time and server time are inconsistent, it will be useless
HTTP1.1
Cache-Control: max-age=3600; The maximum time for resource cache, during which no request will be initiated
Category max-age = 0, no-cache, no-store
max-age=0, ETag/Last-Modified will be checked and carried in the corresponding request header
no-cache will cache the content and initiate a request every time. Whether to use this content is determined by subsequent comparisons
no-store does not cache, all content does not go through the cache and directly initiates the request
priority
Pragma > Cache-Control > Expires
2. Compare cache
Contrast cache is also called negotiation cache!
When the forced cache is invalidated (exceeding the specified time), it is necessary to use the contrast cache, and the server decides whether the cached content is invalid. Compared with the cache, the number of requests is consistent with no cache. The return of 304 is just a status code, and there is no actual content. The saving in the size of the response body is its optimization point.
Last-Modified 和 If-Modified-Since
1. The server responds to the Last-Modified field to mark the last modification time
2. When the browser requests the same resource next time, it writes the last Last-Modified value in the request header to the If-Modified-Since field in the request header
3. The server compares the value of If-Modified-Since with the Last-Modified field, and responds with 304 if it is equal, otherwise it responds with a 200 status code and returns the modified data
Defect: If the resource update rate is less than seconds, then the cache cannot be used, because its time unit is at least seconds
Etag 和 If-None-Match
1. The special identification (summary) Etag of the server response file
2. When the browser requests the same resource next time, it will bring Etag with the request header If-None-Match
3. The server compares similarly, and returns 304 if it hits, and returns a new resource and 200 if it doesn't hit.
Etag has a higher priority than Last-Modified
3. Make a summary
When the browser wants to request resources, check the Service Worker, memory cache, and disk cache. If there is a forced cache and it is not invalidated (Cache-Control), then use the forced cache. The status code at this time is 200; if there is a forced cache but it has been Invalid, use the comparison cache, after the comparison, determine whether it is 304 or 200