Meaning of cache
Caching is not currently configured on the server. Refreshing the page will re-request resources. If caching is configured, resources can be fetched from memory or disk to optimize page loading.
Strong cache
This is essentially done by requesting the response header.
pragma
Progma is a product of HTTP1.0. It is similar to cache-control and can only be set to no-cache. The effect is the same as that of cache-control: no-cache. That is, strong Cache is disabled and only negotiated Cache is used.
expires
If a “max-age” or “s-max-age” directive is set in the cache-control response header, the Expires header is ignored, meaning that cACAhe-Control takes precedence over Expires.
Because expires is a time value, if the system time difference between the server and the client is large, it can cause cache clutter.
cache-control
The cache-control header field can be used in either the request header or the response header.
Cache-control is a response header field that is an improvement on expires. One of the cache-control values is cache-control: max-age=seconds, for example: cache-control: Max – age = 315360000. Seconds is a time difference rather than a fixed time, and because it is a time difference, there is no cache mess caused by client-side and server-side time synchronization mentioned above.
Strong cache priority
Pragma > Cache-Control > Expires.
The specific process
First, when the browser finds a cache of your requested resource in memory or on disk, it also checks to see if the last time the resource was requested it returned the strong cache-related response headers described above.
Step by step, determine the priority of the header field related to strong caching as described above. There may be some fields that the server does not return, such as pragma, so judge directly later.
Pragma: no-cache pragma: no-cache pragma: no-cache pragma: no-cache pragma: no-cache
If there is no pragma, but there is cache-control: no-cache, this is just like pragma: no-cache, strong cache judgment fails.
If cache-control: max-age=seconds, the expiration time is calculated based on the time when the browser last requested the resource and the seconds. If the expiration time is earlier than the expiration time, the strong cache is hit. If the expiration time is expired, the strong cache fails to be detected.
So we said that if control-control is max-age or s-max-age then expires is immediately invalid. If the cache-control value is not the same or not, the expires value is also used to determine whether or not the expires value is expired. If the expires value is not, the strong cache will be hit. Otherwise, the cache will be invalid and the server will request the latest resource.
Configure strong caching using Expires
The server code looks like this, which is basically an expires field in the response header with an expiration time of one minute.
Long press Refresh to select the third clear cache for first loading
Refresh reload
Use cache-control to configure strong caching
Setting cache-control: max-age=60 theoretically should make the cache expire after 1 minute, which it did.
For the first time to load
Refresh reload
Negotiate the cache
Negotiation cache needs to send a request to the server, so it has lower revenue than strong cache. The larger the cache resource volume is, the higher revenue is.
Which header fields in the negotiation cache are paired, namely:
Request header if-modified-since and response header last-modified request header if-none-match and response header eTAG
The if-modified-since and last-modified
Meaning: Has it been changed since…? , the time was last changed to xyz time. The if-modified-since header should be the last-modified value from the response header that requested the resource last time.
When a browser makes a resource request that carries the if-modified-since field, the server compares the if-Modified-since value in the request header with the last modification time of the requested resource. If the resource was last modified later than if-Modified-since, Then the resource expires, the status code is 200, the response body is the requested resource, and the latest last-Modified value is added to the response header. Return 304 without expiration, hit the negotiation cache, the response body is empty, and the response header does not require a last-Modified value.
If-none-match and response header etag
Etag represents the unique identifier of the requested resource, which can be easily implemented by taking a summary string of the requested resource through some hash algorithm and enclosing it in double quotes.
Why do YOU need eTAG with Last-Modified
The resource is updated within 1 second and accessed within that second. The last-Modified negotiated cache cannot obtain the latest resource. This is essentially because last-Modified is accurate to the second and does not reflect changes in less than a second.
When a resource has been modified several times without changing its content, last-Modified processing is wasteful. The last-Modified value of a resource will definitely change if it is modified many times, but if it is not, we don’t need the server to return the latest resource and use the local cache. This is not a problem with etag, because the same resource is modified multiple times with the same content and hash value.
Using etag is more flexible, because etag does not necessarily use hash values as I said. Etag uses a weak comparison algorithm, that is, two files with identical contents can be considered identical except that each bit is identical. For example, two pages are considered the same if they differ only in the generation time of the footer.
Negotiates cache header field priority
If none – match > if – modified – since.
Last-modified Configures negotiation cache
1. Hold down refresh to select the third clear cache to load for the first time
2. Refresh and load the file again
Etag Configures the negotiation cache
I’m just going to arbitrarily set the eTag tests that are returned
1. Hold down refresh to select the third clear cache to load for the first time
2. Refresh and load the file again
