Cache control of HTTP

HTTP Cache control

Because the network delay is uncontrollable , Browsers use HTTP The cost of obtaining resources from the server is high . therefore , It's very necessary to put “ Don't come easy ” Data is cached , The next time you request again, reuse it as much as possible without having to look in the server . such , You can avoid multiple requests - The communication cost of the response , Save network bandwidth , It can also speed up the response .

1. Cache control of the server

The process of caching is as follows ：

1. The browser found no data in the cache , So send a request , Get resources from the server
2. Server responds to requests , Returns the resource , meanwhile Mark the validity period of the resource
3. Browser cache resources , Wait for next reuse

The header field used by the server to mark the resource validity period is “Cache-Control”, The value of the inside “max-age=30” Is the effective time of resources , Equivalent to telling the browser ,“ This page can only cache 30 second , After that, even if it is overdue , Out-of-service , If you want to access, you must get it from the server again . Without disabling the cache and not exceeding the effective time , Accessing this resource again hits the cache , Instead of requesting resources from the server, it fetches them directly from the browser cache .

Be careful ： The starting point for calculating the effective time is the creation time of the response message on the server side , Not when the client receives the message , That is, it includes the time spent in the link transmission process . such as , Server settings “max-age=5”, But because the network quality is terrible , When the browser receives the response message, it has passed 4 second , Then this resource can be saved at most on the client 1 Second , Then it will fail .

Other common cache properties ：

• no_store： Caching is not allowed , For some data that changes very frequently , For example, the seckill page
• no_cache： Easy and its literal meaning no_store Mix up , The actual meaning is not to disallow caching , Instead, it can cache , But in Before use, you must go to the server to verify whether it expires , Is there an up-to-date version of , If so, use the latest version of the server
• must-revalidate： It means that if the cache does not expire, it can continue to be used , But if you still want to use it after it expires, you must go to the server to verify whether it is available

Add ：

And header fields “Cache-Control” similar ,Expires The response header indicates that the cache has expired Point in time , Beyond this point in time, the resource expires , However, due to the different time zones, this method is almost no longer used , When two exist at the same time Cache-Control Higher priority .

2. Client cache control

Not only the server can send “Cache-Control” head , Browsers can also send “Cache-Control”, That is to say, request - Both sides of the response can use this field for cache control , Negotiate the use strategy of cache .

When you click “ Refresh ” Button time , The browser will add a “Cache-Control: max-age=0”. Indicates that you need an up-to-date content , The data in the local cache has existed for at least a few seconds , It's not the latest , So the browser will not use the cache , Instead, send a request to the server . The server sees max-age=0, It will also respond to the browser with a newly generated message .

When you click Ctrl+F5 “ Forced to refresh ” when , The browser will send a “Cache-Control: no-cache”, Meaning and “max-age=0” Is essentially the same , Usually the effect is the same , That is, no caching .

When using “ Forward ”、“ back off ”、” Redirect jump “ when , The browser uses a cache , In doing so , Use only the most basic request header , No, “Cache-Control”, So it checks the cache , Direct use of previous resources , No more network communication .

3. Condition request

The cached resource has expired , It doesn't mean that the content of resources has changed , If there is no difference from the resources on the server , In fact, there is no need to request the server again . The client uses a conditional request to verify whether the current resource has been modified , Conditional requests have two pairs of mechanisms ：Last-Modified / If-Modified-Since and Etag / If-None-Match.

3.1 Last-Modified / If-Modified-Since

1. When the server first responds to a request , Tell the browser when the resource was last modified Last-Modified

   

2. When the browser requests the resource again , If there is no expiration, read directly from the cache , If it's out of date , You have to make a request to the server , adopt If-Modified-Since Field notifies the server of the last request , The last modification time of the resource returned by the server

   

3. The server found a header after receiving the request If-Modified-Since, Compare with the last modification time of the requested resource

4. If the comparison is successful , It indicates that the resource has no new modification , Respond to 304 NOT Modified, Tell the browser to continue using the saved cache,304 Only return header part , Notify the client to use the cache through the status code , There is no need to return the main part of the message to the client

5. If the comparison fails , The resource has been changed , Respond to the entire resource content , Return status code 200, The latest content of the resource is in the response body

3.2 Etag / If-None-Match

HTTP1.1 use ETag To determine whether the requested file has been modified , Mainly to solve Last-Modified Some unsolvable problems ：

• Some files may change periodically , But his content doesn't change ( Just change the modification time ), At this time, you don't want the client to think that the file has been modified GET;

• Some files are modified very frequently ,1 I've changed N Time ,If-Modified-Since The granularity that can be detected is second , This modification cannot be judged

• Some servers can't get the exact last modification time of the file

Etag / If-None-Match Workflow ：

1. When the server responds to a request , Tells the browser the unique identity of the current resource on the server Etag

   

2. When the browser requests the server again , adopt If-None-Match Field notifies the server that the client received the unique identification of the cached data last notified by the server

   

3. The server found a header after receiving the request If-None-Match, It is compared with the unique ID of the requested resource , Different , Indicates that the resource has been changed , Response to the whole resource content , Return status code 200. identical , Description no new changes to resources , The response HTTP 304, Tell the browser to continue using the saved cache

Be careful ：

1. If the last modification time of some resources changes , But the content didn't change , Use Last-modified I can't see that the content hasn't changed , however Etag You can judge whether changes have taken place , therefore Etag It's more accurate than Last-modified high . When two pairs of conditional requests are used at the same time ,Etag / If-None-Match Higher priority .

2. ETag also “ strong ”、“ weak ” Points

   strong ETag Requires resources to match exactly at the byte level , weak ETag There is one before the value “W/” Mark , It only requires that the resource has no semantic change , But there may be some internal changes （ for example HTML The order of the labels in , Or a few more spaces ）.