Talk about strong cache and negotiation cache

Preface

Before learning about strong caching and negotiation caching , Let's talk about What is caching ？

Caching refers to browsers （ client ） A copy file saved on the local disk for the accessed resources .

that What are the advantages of browser caching ？

1. Reduce duplicate request data , Avoid reloading resources over the network , Save traffic .
2. Reduce server stress , Improve website performance .
3. Speed up client loading web pages , Enhance user experience .

Browser request process ：

The browser caches resources after the first request , On second request ：

1、 The browser gets the cached resource header Information in , according to response header Medium expires and cache-control To determine whether to hit the strong cache , If hit, read resources directly from the cache .

2、 If the strong cache is not hit , The browser will send a request to the server , This request will be brought IF-Modified-Since perhaps IF-None-Match, Their values are returned by the first request Last-Modified perhaps Etag, The server compares these fields to determine whether they hit .

3、 If hit , Then the server returns 304 Status code , And will not return the content of the resource , The browser will get... From the cache ; Otherwise, the server will eventually return the actual content of the resource , And update the header Related cache fields in .

One 、 Strong cache

Strong caching is based on Expires perhaps Cache-Control Controlled by two fields , Indicates the cache effective time of the resource . If both exist ,Cache-Control Has a higher priority than Expires.

Expires： yes http 1.0 The specification of , Value is a GMT Time point string in format , for example ：Expires:Mon,18 Oct 2066 23:59:59 GMT.

This point in time represents the time of resource failure , If the current timestamp is before the expiration time , Then it is judged that the cache is hit .

shortcoming ： Because the failure time is an absolute time , So when the server time deviates greatly from the client time , Will lead to cache confusion .

Cache-Control： yes http 1.1 The specification of , Generally, this field is used max-age Value to judge .

advantage ： This value is a relative time , for example ：Cache-Control:max-age=3600 The period of validity of the resource is 3600 second , And return the... In the header Date Indicates when the message was sent , Indicates that the current resource is in Date ~ Date +3600s It's effective all this time .

About Cache-Control Other values for ：

• no-cache： Do not use local memory , Need to use negotiation cache .
• no-store： Disable browsers from caching data , Each request for resources will require complete resources like the server .
• public： It can be cached by all users , Including end users and cdn Such as middleware proxy server .
• private： Can only be cached by the end user's browser .

Two 、 Negotiate the cache

Negotiate caching. The server decides whether cache resources are available .

It mainly involves two pairs of attribute fields , They come in pairs , That is, the response header of the first request carries a word , Last-Modified perhaps Etag, Then the subsequent request will be accompanied by the corresponding request field If-Modified-Since perhaps If-None-Match, If the response header does not Last-Modified perhaps Etag Field , Then the request header will not have a corresponding field .

Last-Modified/If-Modified-Since The values of both are GMT Format time string .Last-Modified Mark the last document modification time , On the next request , The request header will be brought If-Modified-Since, Used to tell the server the last modification time of the locally cached file , The server judges whether the resources have changed according to the last modification time of the file . If not, return 304 Not Modified, The request will not return resource content , The browser directly uses the local cache . If there is a change , Return the resource content normally , new Last-Modified Will be in response header return , And update the local cache before the next request Last-Modified, On next request ,If-Modified-Since Will enable the updated Last-Modified.

Etag/If-None-Match： As long as the resource changes, the value will change . The server calculates a hash value according to the file itself and passes ETag Field is returned to the browser , Received If-None-Match After fields , The server determines whether the file content has been changed by comparing whether the two are consistent .

And Last-Modified The difference is , When the server returns 304 Not Modified The response , Because on the server ETag Recalculated ,response header You'll also put this ETag return , Even if this ETag There is no change from the previous .

3、 ... and 、 How to set strong cache and negotiation cache

1、 Back end servers , Write into code logic ：

res.setHeader('max-age': '3600 public')
res.setHeader(etag: '5c20abbd-e2e8')
res.setHeader('last-modified': Mon, 24 Dec 2018 09:49:49 GMT)

2、Nginx To configure ：

add_header Cache-Control "max-age=3600"

Generally speaking , adopt nginx Static resource server , A strong cache will be brought to resources by default 、 Negotiate cached header Field .