HTTP cache

Preface

Caching is a technique for saving a copy of a resource and using it directly on the next request .

We use HTTP cache , By reusing cache resources , Reduces client latency and network traffic , At the same time, it can also relieve the pressure on the server side . It can significantly improve the performance of our website and applications .

although HTTP Caching is not necessary , But reusing cached resources is often necessary ,HTTP Caching is a web Important means of performance optimization .

HTTP The type of cache

Usually HTTP There are two caching strategies ：

• Strong cache
• Negotiate the cache .

We can intuitively see the difference between them from the literal meaning ：

• Strong caching forces direct use of the cache .
• To negotiate the cache, you have to negotiate with the server to confirm whether the cache can be used .

Strong cache

Strong caching does not send requests to the server , Read the resource directly from the cache , stay chrome Console network You can see the request return in the options 200 The status code , also size Show from disk cache or from memory cache;

Negotiate the cache

The negotiation cache will first send a request to the server , The server will follow this request request header To determine whether to hit the negotiation cache , If hit , Then return to 304 Status code and bring new response header Notify browser to read resources from cache .

HTTP Cache control

stay HTTP in , We can control the caching policy by setting the response header and the request header .

Strong cache can be set by Expires and Cache-Control Two kinds of response header implementation . If they exist at the same time ,Cache-Control Priority over Expires.

Expires

Expires Response head , It is HTTP/1.0 The product of . Represents the expiration time of the resource , Its value is an absolute time . It tells the browser that it can access data directly from the browser cache before the expiration time . Because it is an absolute time , The time difference or error between the client and the server may cause the time inconsistency between the client and the server , Will result in cache hit errors . If in Cache-Control The response header is set max-age perhaps s-max-age Instructions , that Expires Will be ignored .

Expires: Wed, 21 Oct 2015 07:28:00 GMT

Cache-Control

Cache-Control Appear in HTTP/1.1. The caching mechanism can be implemented by specifying multiple instructions . It mainly represents the maximum effective time of resource cache . That is, within this time end , The client does not need to send a request to the server . Priority over Expires. The value of the expiration time instruction is the relative time , It solves the problem of absolute time .

Cache-Control: max-age=315360000

Cache-Control There are many attributes , Different attributes represent different meanings .

Cacheability

• public Indicates that the response can be （ Include ： The client sending the request , proxy server , wait ） cache .
• private Indicates that the response can only be cached by a single user , Cannot be shared cache （ That is, the proxy server cannot cache it ）
• no-cache Do not use strong cache , You need to negotiate cache validation with the server .
• no-store The cache should not store anything about client requests or server responses , It doesn't use any cache .

Be overdue

• max-age=<seconds> The maximum period of cache storage , Beyond this period is considered expired .
• s-maxage=<seconds> Set shared cache . Will be covered max-age and expires, Private cache will ignore it
• max-stale[=<seconds>] The client is willing to receive an expired resource , You can set an optional number of seconds , Indicates that the response cannot be out of date for more than the given time .
• min-fresh=<seconds> The client wants to get the latest response within the specified time

Revalidation and reload

• must-revalidate If the page is out of date , Then go to the server to get .
• proxy-revalidate And must-revalidate The same effect , But for shared caching .

other

• only-if-cached No network requests , Use only cache completely .
• no-transform No conversion or transformation of resources . for example , Do not convert the image format .

The negotiation cache can be through Last-Modified/If-Modified-Since and ETag/If-None-Match These two pairs Header To control .

Last-Modified、If-Modified-Since

Last-Modified And If-Modified-Since The values are all GMT Format time string , Represents the last modification time of the file .

1. When the server responds to a request , Will pass Last-Modified Tell the browser when the resource was last modified .
2. When the browser requests the server again , The request header will contain Last-Modified Field , Followed by the last modification time obtained in the cache .
3. The server receives this request and sends it to the existing server if-Modified-Since, Compared with the last modification time of the requested resource , If consistent, return 304 And response headers , The browser only needs to get information from the cache . If it has been modified , So start transmitting the response as a whole , Server return ：200 OK

But this often happens on the server , A resource has been modified , But the actual content has not changed at all , because Last-Modified The time does not match and the whole entity is returned to the client （ Even if there is as like as two peas in the client cache. ）. To solve this problem ,HTTP/1.1 Launched Etag.Etag High priority and Last-Modified.

Etag、If-None-Match

Etag Are unique identifiers generated by the server for each resource , It's like a fingerprint , Changes in resources can lead to ETag change , It has nothing to do with the last modification time ,ETag It can guarantee that every resource is unique .

Make a request in the browser , The request header of the browser will contain If-None-Match Field , Its value is the last returned Etag Send to the server , After receiving the message, the server finds If-None-Match It is compared with the unique identification of the requested resource . If it is the same, it means that the resource has not been modified , Then the response returns 304, The browser gets data information directly from the cache . If different, the resource has been changed , Then respond to the entire resource content , Return status code 200.

summary

By way of the foregoing , We learned that HTTP Cache is mainly divided into ：

• Mandatory cache
• Negotiate the cache .

Force caching by Cache-Control,Exipres（HTTP1.0） control . The browser reads the local cache directly , No longer interact with the server , Status code 200.

The negotiation cache is made by Last-Modified / IfModified-Since, Etag /If-None-Match Realization , Each request requires the server to determine whether the resource has been updated , This determines whether the browser uses caching , If it is , Then return to 304, Otherwise, complete the response again .

~ The end of this paper , Thank you for reading ！