Cache-Control和ETag

2018-05-24 本文已影响0人海山城

Cache-Control

Cache-Control表示浏览器使用缓存，不向服务器发请求

1. 请求端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cache-Control & ETag</title>
  <link rel="stylesheet" href="css/default.css"> <!--比较大的文件，用来测试Cache-Control-->
</head>
<body>
  <script src="js/main.js"></script> <!--比较大的文件，用来测试ETag-->
</body>
</html>

2. 服务器端设置

if (pathName === '/css/default.css'){
    //使用Cache-Control
    let string = fs.readFileSync('./css/default.css', 'utf8')
    response.setHeader('Content-Type', 'text/css; charset=utf8')
    response.setHeader('Cache-Control', 'max-age=30')//30秒内使用缓存，不向服务器发送请求
    response.write(string)
    response.end()
}

3. 缓存还可以用Expires，Expires设置的是时间点，Cache-Control设置的是时间段

response.setHeader('Expires', 'Wed, 23 May 2019 09:16:33 GMT') //格林尼治时间格式，到这个时间之前都不向服务器发送请求

4. 如何更新缓存

一般来说，首页不设置缓存，否则用户无法得到最新的网页。
而css，js等资源，一般设置长点时间，比如设置10年。
那么需要更新设置了缓存的css，js怎么办呢？？
缓存有个很重要的特性：只有相同的url才会利用之前的缓存，那么我在http的请求路径上加上一个查询参数就可以了，每次更新css，js，只要变化查询参数就行了

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cache-Control & ETag</title>
  <link rel="stylesheet" href="css/default.css?version=1"> <!--加上查询参数，变动url即可，而后台解析路径的时候是不带查询参数的 -->
</head>
<body>
  <script src="js/main.js"></script> <!--比较大的文件，用来测试ETag-->
</body>
</html>

ETag

1. 什么是MD5？

MD5是一个摘要算法，它可以用来检查下载文件的完整性。
文件在服务器上经过MD5处理的得出来的值，和下载下来经过MD5处理得出来的值作对比，两者相同，即文件下载完整。
ETag需要利用到MD5。
首先在项目中给nodejs安装MD5

npm install md5

2. ETag的实现过程

①请求端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cache-Control & ETag</title>
  <link rel="stylesheet" href="css/default.css?version=1"> <!--比较大的文件，用来测试Cache-Control -->
</head>
<body>
  <script src="js/main.js"></script> <!--比较大的文件，用来测试ETag-->
</body>
</html>

②客户端首次请求资源(main.js)，服务器将文件对应的字符串做MD5处理，然后在把文件的MD5值放入ETag中

if (pathName === '/js/main.js'){
    //使用ETag
    let string = fs.readFileSync('./js/main.js', 'utf8')
    response.setHeader('Content-Type', 'application/javascript; charset=utf8')
    let fileMd5 = md5(string)
    response.setHeader('ETag', fileMd5)
    response.write(string)
    response.end()
}

③此后客户端每次请求这个资源(main.js)，都会带上if-none-match这个key，这个key的value就是在服务器端通过MD5处理后的MD5值

图示
④服务器端读取if-none-match的内容，和本次的MD5处理后的内容做对比，如果一样，那么就只返回一个304（所以304指的就是Not Modified，即没有修改），不返回请求内容。如果不一样，就是资源有更新变动，就将其返回，并且写入新的MD5处理后的ETag

if (pathName === '/js/main.js'){
    //使用ETag
    let string = fs.readFileSync('./js/main.js', 'utf8')
    response.setHeader('Content-Type', 'application/javascript; charset=utf8')
    let fileMd5 = md5(string)
    response.setHeader('ETag', fileMd5)
    if(request.headers['if-none-match'] === fileMd5){
      //main.js没有更新，没有响应体
      response.statusCode = 304
    } else{
      //有更新，再把新的内容返回
      response.write(string)
    }
    response.end()
}

Cache-Control和ETag的区别

Cache-Control直接是通过不请求来实现，而ETag是会发请求的，只不过服务器根据请求的东西的内容有无变化来判断是否返回请求的资源