[头参数]04 - 缓存

目录

1. 搭建测试缓存的服务端
2. 测试缓存
3. 前端使用哈希命名文件的原因

0. 缓存概述

• 可缓存性

1. public 返回时经过的任何地方都可以缓存（例如代理服务器） 。
2. private 只有发送请求的客户端可以缓存。
3. no-cache 可以存储缓存，但是需要去服务端验证后才能使用。

• 到期

1. max-age = seconds 浏览器使用的到期时间。
2. x-max-age = seconds 代理服务器使用的到期时间。
3. max-stale = seconds 在过期后仍使用过期的文件，需要在请求头中设置，浏览器中用不到。

• 重新验证

1. must-revalidate
2. post-revalidate

• 其他

1. no-store 不允许存储缓存
2. no-transform 不允许压缩缓存

• 常用参数

public, private, no-cache, max-age

• 其他说明

这些参数只是一种协议，并非是设置了就会自动实现。

• 缓存章节将用到的参数

1. 首先缓存的头参数是Cache-Control
2. Cache-Control中使用的参数有max-age，no-cache
3. 其他头参数有Last-Modified，Etag

1. 搭建测试缓存的服务端

• 搭建服务端

1. url是/就返回html。
2. url是/script.js就返回一个js代码，并且设置200秒缓存'Cache-Control': 'max-age=200'。

/**
 * 1. 测试缓存的max-age
 */
/**
 * 1. 测试缓存的max-age
 */
const http = require('http')
const port = 9000

http.createServer(function (request, response) {

    const url = request.url

    switch(url) {
      case '/': {
        response.writeHead(200, {
          'Content-Type': 'text/html'
        })
        response.end('')
      }
      case '/script.js': {
        response.writeHead(200, {
          'Content-Type': 'text/javascript',
          'Cache-Control': 'max-age=200'
        })
        response.end('console.log("It is script.js")')
      }
    }

}).listen(port)

console.log("serve is listen ", port)

2. 测试缓存

1. http://localhost:9000，第一次请求
   
   从服务端读取

2. 刷新，第二次请求

   
   
   从本地读取
3. 修改返回的js代码

response.end('console.log("It is script update")')

修改后重启服务，观察浏览器终端的内容，发现并未改变，证明用的扔是缓存的js。

3. 前端使用哈希命名文件的原因

1. 每次资源文件（js,css等等）修改后，都会用哈希对资源文件重新命名，同时html中请求的url也会指向新的资源文件。
2. 服务端向客户端发送html时，响应头中并不设置缓存相关的参数，所以每次客户端都会请求一个新的html文件。
3. 这时客户端收到的html中引入的资源文件的url是指向最新的资源文件，因此客户端将获取新的资源文件，而不是使用本地缓存的文件。