Specific process of strong cache and negotiation cache

When we first visit a page , We will get the static resource file of this page , Save it on local disk , This cache is called http cache ,http There are two types of caching , Strong cache and Negotiate the cache , Next, I will analyze these two in detail .

One 、 Judge the strong cache and negotiation cache

According to the diagram above , When browser page 2——>n The second time you visit this page , First, I will go to the local disk Determine whether it is a strong cache or a negotiation cache , According to the first request , Returned by the server expires and Cache-Control To judge ( The response header returned by the first request is also saved on disk , There are expires and Cache-Control Two fields of information ),expires and Cache-Control Specific fields ：


expires yes http1.0 The specification of , There is the expiration time of the resource , As long as it is before the failure , This resource is always available .

expires:Mar, 06 Apr 2020 10:47:02 GMT.

Cache-Control: yes http1.1 What happened in , Generally, the max-age To judge , This value is a relative time .

Cache-Control:max-age=3600 //  The period of validity of resources is 3600 second 

In addition to this field, there are several other commonly used values .

no-cache： Do not use strong cache directly , Use the negotiation cache every time .
no-store： Direct disallow browser to cache data , Every time a user requests the resource , Will send a request to the server , Download full resources every time .
public： Can be cached by all users , Including end users and CDN Wait for intermediate proxy server .
private： Can only be cached by the end user's browser , Don't allow CDN Wait for the relay cache server to cache it .

Cache-Control Than expires Priority of

cache-control:max-age=691200
expires:Fri, 06 Mar 2020 10:47:02 GMT

So the maximum time that a resource can be cached is 691200 second , Will give priority to max-age.

Two 、 Negotiation cache continues to judge

The above judgment shows , If it doesn't expire , This is strong cache , After expiration , This must be the negotiation cache , Here are four attributes

Last-Modify  If-Modify-Since

Etag  If-None-Match

Last-Modify Is the first time you visit this page , The value returned by the server , We save it on local disk ( image expires and Cache-Control equally ), When we ask again ( It has been determined that the negotiation cache is not a strong cache ), Will be able to Last-Modify Copy the value of , Put it in the request header and send it to the server , At this time, the attribute name is changed to If-Modify-Since, in other words ,Last-Modify Only response headers exist ,If-Modify-Since Only request headers exist .
If-Modify-Since The value of is judged by the server ( The last time the server updates resources will be recorded , Compare these two times , If the update time be equal to If-Modify-Since Value ), return 304, The request body has no data , Front end access 304, Take the negotiation cache by yourself . If （ Server resource update time New to If-Modify-Since Value ）, return 200 And the latest cached data .


From the above, you may feel that using Last-Modified Enough to let browsers know if the local cache copy is new enough , Why do we still need Etag Well ？

 Some files on the server may change periodically , But his content doesn't change ( Just change the modification time ), At this time, we don't want the client to think that the file has been modified , And regain ;
 Some files on the server are modified very frequently , For example, modify it in seconds or less , Still in this second , The content has changed , Time is still this time .

therefore Etag As a unique identifier , You can compare the cached content , Not just a comparison of time .
Last-Modified And ETag The effect is as like as two peas. , and ,Last-Modified And ETag It can be used together , Server will give priority to authentication ETag, Consistent case , Will continue to compare Last-Modified, Finally, I decide whether to return or not 304.

Again , there ETag and If-none-match That's what it means , The first time a browser requests a resource , obtain ETag Value , The browser assigns this value to If-none-match, Send to the server (ETag Only exists in the response header ,If-none-match Only exists in the request header ),
Return the corresponding status code and cache and above last-modify similar .