HTTP cache browser cache that rabbits can understand

Caching & Networking

Caching The source of the

The current web page architecture has become much more complex , Most of the data fetching process will produce many request Request to get response, And when such a request is more than one , It will affect the performance of the server , therefore Caching emerge as the times require .

Whether it's the front end or the back end , Even lower level development , There will be Caching To improve efficiency ...

Caching The core concept of is actually Provide an extra storage space , Put the data you may need to get through the request inside , When you need to request information later , First ask Caching Does the space have the information you need , Some words are good , Then there is no need to send request！

HTTP Caching yes A line of defense to avoid browsers sending unnecessary requests to servers , To enable the HTTP Caching The server side and browser side need to be negotiated in advance , Browser and server through HTTP request And response header Bring in some information with the mechanism of negotiation cache , for example ：

The server tells the browser whether it needs to cache the returned resource ？
Or judge whether the cached data has expired ？ Need to return to server Grab ...

Caching When to use ？

Very often used
The information changes infrequently

public Caching & private Caching

Above all Caching It can be further divided into public Caching and private Caching.

public Caching It refers to the response Can give several different client service ,

For example, the request for return passes proxy server Upper caching It can be used by multiple users .

The private server will serve only one requester , That is, only users of this computer can use Caching Resources for .

Expires, Cache-control

Expires Absolute time

Expires It's an old version （HTTP1.0） The way , The server response header Join in Expires Field . When there are subsequent requests for the same resources, we will check whether the current time of the user has exceeded Expires Expiration time specified in , If not more than , The data in the cache space will be returned directly ; If time passes, it will launch HTTP request Get it again with the server .

But there will be a problem , the reason being that It depends on the time of the user's computer , If the user's computer time is adjusted to a future time point , Then the cache will be considered invalid .

Expires: Wed, 21 Oct 2022 07:28:00 GM
 Copy code

Cache-control Relative time

Later, new header:Cache-control To solve this problem , If response header At the same time Expires And Cache-control, Will adopt Cache-control Set up , Compare with the old version Expires Will be ignored by the browser .

#  Some  http response header

Cache-Control: max-age=60
 Copy code

This means that the user is receiving this response Of 60 Seconds , If the same resource is requested again , You will get the cached version , If exceeded 60 Seconds before sending a request to this resource , Will send a new network request.

and Cache-Control This header It's not just max-age have access to , according to MDN file , In fact, there are many attributes to match , Just introduce some common attributes today .

Cache-control：no-store Never cache

Not all content we want to cache , For example, some private information about user information or frequently changing content , We will hope not to keep in client side, But every time server Go grab it , At this time, it can be in response header Add

Cache-Control: no-store 

 This field tells the browser 「 Please do not cache this resource for me 」.
 Copy code

Cache-Control:no-cache Always check the cache

When you revisit the same page every time , No matter what A Has the website been updated ,A Websites will come 「 The whole new information 」, hypothesis index.html Yes 100 kb Okay , Visited ten times , The accumulated traffic is 1000kb.

B Website , We assume that the website has not been updated for the first nine times , It was not updated until the tenth time . So the first nine times Server Only return Status code 304, Let's calculate the packet size 1kb Okay . The tenth time because there is a new file , Would be 100kb. The total flow of those ten times is 9 + 100 = 109 kb

This is it. no-store Follow no-cache The difference of , Never use cache and always check cache .

Cache-control：s-maxage

s-maxage Can override max-age perhaps Expires header, But it only works for shared caching software （ Such as Nginx）. When set to private cache, the browser will ignore this instruction .

Cache-Control: private || public

private On behalf of response It can only be stored by the browser .

private On behalf of response It can be stored by any caching software , for example reverse proxy The cache of 、 Browser cache .

What to do after the cache expires ？

There will be two things ：

Cache expired , The information has not changed
Cache expired , The data has changed

Last-Modified & If-Modified-Since

Last-Modified & If-Modified-Since It's the old version (HTPP1.0) Cache mode adopted by browser .

Last-Modified： Appears in the... Returned by the server to the browser response header in , Tell the browser when this data was last modified
If-Modified-Since： Appears when the browser makes a request request header in , It is used to confirm with the server whether the data has been modified after a certain time point .

And their use process is like this . for instance , When you are on a website logo The first time a network request is made , Server's response header May bring in some information

# HTTP request header

GET /logo.png
If-Modified-Since: Sat, 11 Sep 2021 07:28:00 GMT
 Copy code

Browser received response I'll put Logo cached , Set the expiration time limit to one year , And record that the last modification date of the file is Sat, 11 Sep 2021 07:28:00

In this year , Whenever there is... Yes logo The request of , The browser will send back the cached version , And when more than a year , The validity of the original cache expires , The browser will bring the previously recorded change time , Ask the server from this point in time , Has this information been changed .

# HTTP request header

GET /logo.png
If-Modified-Since: Sat, 11 Sep 2021 07:28:00 GMT
 Copy code

Suppose the server believes that the file has been changed , Then a new file will be sent back to the browser , The subsequent caching process will run again as mentioned above . But if the server inquires and finds that this file has not been modified since the time provided by the browser , Will tell the user 【 You can continue to use the cached version 】, The server will send back a 304 Of status code , representative not modified, Browser received 304 Then you will know that you can continue to use the previous cache .

however Last-Modified & If-Modified-Since The method of will cause a problem , It is based on documents Edit time To make a judgment , If the file is only opened today, save it again , The content has not changed at all , Because the editing time changes , The server will think that this file has been changed . The better thing to do is According to whether the contents of the document have been updated To decide whether to crawl the data again , Next Etag & If-None-Match(HTTP1.1) That solved the problem .

Etag & If-None-Match

I don't know if you've heard of JWTtoken This authentication mechanism , His concept is to use hash Function to judge token Whether it is legal through artificial changes token.

Etag It also uses similar concepts , Materials with the same content will produce unique Etag value .

Use Etag The process becomes server stay response header Will bring Etag Let the browser save

Cache-Control: max-age=86400
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
 Copy code

Wait until the cache expires , The user requested the same resource again , The browser will be in request header Add this information

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
 Copy code

The server will check the browser Etag Whether it is consistent with the latest information . If the same , The content of the representative data has not changed , Browsers can continue to use cached content , If not , Will crawl again .