目录

1. 基础代码部分
2. 设置缓存
3. 测试参数private
4. Vary的介绍

1. 基础代码部分

• 服务端代码

1. wait函数是设置经过一个等待时间在去执行
2. 访问/data时延时2秒返回数据，之后会对这个url设置缓存，设置之后如果有缓存则会直接获得数据，如果没有缓存则会等待两秒在得到数据

/**
 * 1. 测试nginx的缓存功能
 */
const http = require('http')
const fs = require('fs')
const port = 9000
const wait = (seconds) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, seconds * 1000)
  })
}

http.createServer(function(request, response) {
  switch(request.url) {
    // 使用Location
    case '/': {
      const html = fs.readFileSync('test.html', 'utf-8')
      response.writeHead(200, {
        'Content-Type': 'text/html',
      })

      response.end(html)
      break
    }
    case '/data': {
      response.writeHead(200, {
        'Content-Type': 'text/plain'
      })
      // 延迟两秒中返回，用于测试是否有缓存，如果有缓存那么浏览器应该立刻收到数据
      wait(2).then(() => response.end('It is data'))
      break
    }
  }
}).listen(port)

console.log(`listen ${port}`)

1. 请求/data, 将得到的数据显示

<div>data is: <span id="data"></span></div>
<script>
  fetch('/data').then(function (res) {
    return res.text()
  }).then(function (text) {
    document.getElementById('data').innerText = text
  })
</script>

• 测试

在浏览器中进行测试，等待两秒后再显示It is data

2. 设置缓存

• nginx配置文件

• 增加头参数

1. 设置本地缓存max-age为5秒
2. 设置代理缓存s-maxage为500秒
3. 如果没有设置s-maxage，那么默认使用max-age
4. 这个参数依然是一种协议，nginx遵守了这个协议进行实现。

case '/data': {
  response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Cache-Control': 'max-age=5, s-maxage=500'
  })
  // 延迟两秒中返回，用于测试是否有缓存，如果有缓存那么浏览器应该立刻收到数据
  wait(2).then(() => response.end('It is data'))
  break
}

• 第二次访问使用浏览器缓存

• 等待5秒后再次访问，没有使用浏览器缓存，但是数据也会立刻显示出来，证明使用的是nginx的缓存

3. 测试参数private

private的意思是仅允许浏览器缓存。

'Cache-Control': 'max-age=5, s-maxage=500, private'

• 第二次访问使用浏览器缓存

• 等待5秒后再次访问，没有使用浏览器缓存，但是需要等待2秒后才显示数据，证明nginx没有缓存

4. Vary的介绍

• 增加Vary

case '/data': {
  response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Cache-Control': 'max-age=5, s-maxage=500',
    'Vary': 'X-Test-Cache'
  })
  // 延迟两秒中返回，用于测试是否有缓存，如果有缓存那么浏览器应该立刻收到数据
  wait(2).then(() => response.end('It is data'))
  break
}

• 设置请求头

<div>data is: <span id="data"></span></div>
<button id="button">click</button>
<script>
  let index = 0
  function doRequest () {
    let data = document.getElementById('data')

    data.innerText = ''

    fetch('/data', {
      headers: {
        'X-Test-Cache': index++
      }
    }).then(function (res) {
      return res.text()
    }).then(function (text) {
      document.getElementById('data').innerText = text
    })
  }
  document.getElementById('button').addEventListener('click', doRequest)
</script>

• 测试

1. 第一次点击参数为0，等待2秒后获得数据

   
   

2. 第二次点击参数为1，也等待2秒后获得数据

   
   
3. 刷新页面，点击三次，前两次都是立马出现数据，因为上面已经缓存过了，而第三次则又等待了两秒

• 使用场景

可以根据User-Agent缓存电脑端或者移动端，也可以根据语言进行不同的缓存，不设置这个参数时直接根据url进行缓存。