Deep understanding of browser caching mechanism (HTTP)

One 、 Introduce
http cache ： Browser according to the current http Request message strategy take Network resources are stored in local memory (memory cache)/ Hard disk (disk cache) in

Caching process ：

---

Two 、 Access cache priority

• Next When accessing resources for the first time , First look in memory , If there is , Direct load
• If not in memory , Then search the hard disk , If there is , Direct load
• If it's not on the hard drive , Will make a network request , Store network resources in memory after success / In hard disk

3、 ... and 、 classification

• Strong cache
• Negotiate the cache

Give priority to strong caching , After the strong cache fails , Negotiate caching

Strong cache

No request is sent 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. Strong caching can be set in two ways HTTP Header Realization ：Expires and Cache-Control

Expires: Sun, 26 Apr 2020 18:00:00 GMT Maximum expiration time 2020/04/26 18:00:00

Expires： Cache expiration time , If the requested resource is within the expiration time , Read directly from the cache . Because it's absolute time , Limited by local time , If the local time is modified , May cause cache invalidation

Cache-Control:max-age=300

Cache-Control：max-age=300 Represents the return time of the current request 5 Minutes later , Ask again , Read directly from the cache . The default value is private：

Cache-Control There are many instructions , And it can be used in combination ：

Instructions	effect
public	Everything will be cached （ Both client and proxy servers are cacheable ）
private	All content can only be cached by the client
no-cache	Do not use strong cache , Use negotiation cache
no-store	Nothing is cached , No forced caching , Negotiation caching is also not used
max-age	Indicates how many seconds the cache will expire
s-maxage	Same as max-age It works the same , Only works on the proxy server ,s-maxage Has a higher priority than max-age
…	…

Next, let's test the strong cache ：

Be careful ：

Remove the tick here , Otherwise, the cache will not be used

serve.js

let express = require('express')
let app = express()
let fs = require('fs')
let router = express.Router() //  Use here Router

//  Set global response header 
router.all('*', (req, res, next) => {
  res.set({
    'Cache-Control':'max-age=300' // 5 Minutes cache time 
  })
  next()
})

//  Static resources 
router.use(express.static('dist')) //  There are index.html /  Static resources such as pictures 

router.get('/userList', (req, res) => {
  res.send({'name':' Xiao Ming '})
})

app.use('/user',router) //  mount 

let server = app.listen(3000, '127.0.0.1', () => {
  let host = server.address().address
  let port = server.address().port

  console.log('Server running at http://' + host + ':' + port)
})

Next we visit 127.0.0.1:3000/user/index.html

You can see Strong cache is in effect

Next , We F5 Refresh the page , At this time, the process is still , And in the cache time , According to the browser caching principle , It should be from memory cache Read pictures from

Be careful ： Not here ctrl + F5 Force cache not to go

We can see form memory cache Read pictures from memory ！！！

Next , We shut down the process , In cache time , According to the browser caching principle , It should be from disk cache Read pictures from the hard disk

notice form disk cache Reading pictures from the hard disk , Fully compliant with access cache priority

Next , We try 5 Minutes later , That is, after the request cache time expires , Ask again

We can see , After the cache time expires , Send a request directly from the server

Summary process , In cache time ：

---

Negotiate the cache

If not set Cache-Control Default public,max-age=0, Of course, we can set it to Cache-Control : no-cache

serve.js

let express = require('express')
let app = express()
let fs = require('fs')
let router = express.Router() //  Use here Router

//  Set global response header 
router.all('*', (req, res, next) => {
  res.set({
    'Cache-Control':'no-cache' //  Negotiate caching 
  })
  next()
})

//  Static resources 
router.use(express.static('dist')) //  There are index.html /  Static resources such as pictures 

router.get('/userList', (req, res) => {
  res.send({'name':' Xiao Ming '})
})

app.use('/user',router) //  mount 

let server = app.listen(3000, '127.0.0.1', () => {
  let host = server.address().address
  let port = server.address().port

  console.log('Server running at http://' + host + ':' + port)
})

Next we visit 127.0.0.1:3000/user/index.html

You can see ,Cache-Control : no-cache Has to take effect

We find that there are too many return values ETag and Last-Modified

Etag

It represents the unique identification of the data we currently request on the server , On first request , The server will return Etag identification , The next time the browser requests , Will bring the assigned If-None-Match Parameters , And with the return ETag Contrast , If they are consistent, the negotiation cache is hit . return 304 Not Modified

Last-Modified

Represents the last modification time of the requested data on the server , Empathy , On first request , The server will return Last-Modified identification , The next time the browser requests , Will bring the assigned If-Modified-Since Parameters , And with the return Last-Modified Contrast , If they are consistent, the negotiation cache is hit . return 304 Not Modified

！！！ Be careful ：Etag Priority is higher than Last-Modified, So when you ask , If ETag There is , Then contrast If-None-Match, On the contrary, contrast If-Modified-Since

Next, we test the negotiation cache ：

You can see ,Etag And If-None-Match The comparison is consistent , Hit negotiation cache , return 304 Not Modified

then , We modify the static resources of the server , Ask again

We will see that the browser retains If-None-Match And Response head Etag The comparison is inconsistent , Cache policy failure ！！！ Send a request

Summarize the negotiation cache ：

---

thus , We will thoroughly understand http Caching mechanisms