HTTP cache tongtianpian, there may be something you want

HTTP Cache type

Strong cache

What is strong caching

The so-called strong cache is a cache strategy that can be used in the browser without saying hello to the server . Strong cache and sub Expires and Cache-Control One more Pragma.

Differences among the three

Pragma Only one value no-cache, That is, strong caching is not applicable , Go to negotiation cache , This field is rarely used , This field is only applicable to the request header , You can even ignore the existence of this field （http1.1 Previous fields ）.

Expires The value of is an absolute time period , Like this Date Fri Jul 22 2022 16:52:58 GMT+0800, This field can be applied to request headers and response headers , The disadvantage is that the time of the browser and the time of the server may be inconsistent ; Directly manually adjusting the time of the computer can also invalidate the cache .（http1.1 Previous fields ）.

Cache-Control Of max-age It's a relative time , The unit is seconds , This field can be applied to request headers and response headers , The advantages just make up Expires The pit of （http1.1 Field of ）.

Cache-Control Of public and private The difference between

Cache-Control:max-age=123212343;public

If Cache-Control Above , Then the file is on the client and server （ To be exact, it is the proxy server ） Will be cached .

Cache-Control:max-age=123212343;private

If Cache-Control Above , Then the file will only be cached on the client .

Cache-Control Of max-age and s-maxage The difference between

Cache-Control:max-age=123212343;s-maxage=12334

max-age Is the time of client cache ,s-maxage Is the cache time of the proxy server .

Cache-Control Of no-cache and no-store The difference between

Cache-Control:no-cache

If Cache-Control Above , Then don't strengthen the cache , Go to negotiation cache .

Cache-Control:no-store

If Cache-Control Above , Then don't strengthen the cache , Also take the negotiation cache , Skip caching directly .

Negotiate the cache

What is negotiation cache

Negotiation cache means that the client can use the cache file only after consulting with the server , Don't make decisions without authorization , Negotiation cache is divided into Last-Modified and ETag Field .

Last-Modified and ETag The difference between

Last-Modified: The value is a timestamp , This is a second level cache , If you use single 20 The annual manual speed to modify a file can be controlled at the millisecond level , Then you can smoothly not modify the file cache ; There's another problem , If you only modify a space in the file, the cache of the file will not be modified ; This field is equipped with a request header If-Modified-Since Use .

ETag: The value is a hash, This value is generated from the contents of the file , When the content is modified , Then the value will be updated ; This field is equipped with a request header If-None-Match Use .

The process of strong caching and negotiation caching

The figure comes from the network

A picture is worth a thousand words .

If the strong cache does not expire, it will not communicate with the server , Directly read the cached data of the browser , So is the status code 200, No 304; as follows ：

Only by negotiating caching 304; as follows ：

Cache storage location

The cache location is divided into memory cache( Memory cache ) and disk cache( Disk caching ).

Some people say , Large files exist disk, Small files exist memory, After testing , This statement may also be correct , It may not be true （ Maybe the file I tested is not big enough ？）.

This file introduces an asynchronous script（ There is only one sentence console.log() The file of ）, Two synchronized script（ One jquery It's a relatively large file 200 many kb, There is only one sentence console.log() The file of ）.

First load

continues refresh 100 Time

Those two are introduced synchronously script It's all in memory , But the asynchronous introduction is sometimes in memory and sometimes on disk .

It can be concluded that : If the files introduced during the document rendering process will be stored in memory , Those asynchronous ones will also be stored in memory if they are loaded quickly and the document is still in the process of publicity , Otherwise, it is stored in the disk .（ Personal conclusions , Don't spray , Take an example to overturn ）

If link add preload Of will also be stored on disk , Because pre rendering will not be in the document rendering . Such as <link rel="preload" href="./index.js" as="script" />.

How to set the cache

Mode one nginx

location ~ .*.(css|js|swf|php|htm|html )$ {
    add_header Cache-Control no-store;
}
//  perhaps 
location ~ .*.(css|js|swf|php|htm|html )$ {
    expires 30d(d God ,h when ,m branch ,s second )
}
 Copy code 

Mode two Server configuration （express For example ）

app.use(express.static(path.resolve(__dirname,'./public'),{
  lastModified:true,
  etag:true,
  setHeaders(res){
    res.set('Cache-Control','max-age=50')
    //  perhaps 
    res.set({
      'Cache-Control':'max-age=40'      
    })
  }
}))
 Copy code 

Mode three meta label

<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
 Copy code 

How to clear the cache

Mode one

Console , Disable caching directly .

Mode two

Open console , Right click to refresh logo, Click empty cache and hard reload .

ending

This article only represents a personal understanding of http Cache knowledge summary , Li Xing Watch . First episode Official account number , Interested students pay attention .