Thoroughly understand browser strong cache and negotiation cache

At work , After the front-end code is packaged, the generated static resources will be published to the static server , At this time, we need to do some operation and maintenance configuration for these static resources , among ,gzip And setting the cache is essential . These two are the most direct impact on website performance and user experience .

The advantages of caching ：

• Reduce unnecessary data transmission , Save bandwidth
• Reduce the load on the server , Improve website performance
• Speed up the client to load web pages
• User experience friendly

shortcoming ：

• If the resources are changed, but the client does not update in time, it will cause users to get information lag , If the old version had bug Words , It's going to get worse .

One . Strong cache

What is strong caching ？ Where is the strength ？ In fact, strong means mandatory . When the browser asks for a file , The server is in respone header Cache configuration is made for the file . Cache time 、 The cache type is controlled by the server , Specific performance: ：
respone header Of cache-control, Common settings are max-age public private no-cache no-store etc.

Strong cache summary

1. cache-control: max-age=xxxx,public
   Both the client and the proxy server can cache this resource ;
   The client is in xxx Within the validity period of seconds , If there is a need to request the resource, read the cache directly ,statu code:200 , If the user does a refresh operation , Send it to the server http request

2. cache-control: max-age=xxxx,private
   Only the client can cache this resource ; The proxy server does not cache
   The client is in xxx Read the cache directly within seconds ,statu code:200

3. cache-control: max-age=xxxx,immutable
   The client is in xxx Within the validity period of seconds , If there is a need to request the resource, read the cache directly ,statu code:200 , Even if the user does a refresh operation , And don't send a message to the server http request

4. cache-control: no-cache
   Skip setting strong cache , However, it does not prevent setting the negotiation cache ; Generally, if you do strong caching , Only when the strong cache fails can the negotiation cache be used , Set up no-cache You won't strengthen the cache , Each request will ask the server back .

5. cache-control: no-store
   Don't cache , This will make the client 、 Servers don't cache , There is no so-called strong cache 、 Negotiation cache .

Two 、 Negotiate the cache

The strong cache mentioned above is to set an expiration time for resources , Every time a client requests a resource, it will see whether it has expired ; Only when it expires will you ask the server . therefore , The purpose of strong caching is to give the client self-sufficiency . And one day , When the client requests the resource, it finds that it has expired , This is to request the server , At this time, the negotiation cache can be set in the process of requesting the server . Now , Negotiation caching requires interaction between the client and the server .

reference ：https://www.jianshu.com/p/9c95db596df5