mockplus 的技术方案

  1. # Request
  2. Request URL: https://share.mockplus.cn/go/G5XU3GW4MDTC8U4G/resources/scripts/jquery-1.7.1.min.js
  3. Request Method: GET
  4. Status Code: 200 OK
  5. Remote Address: 121.40.151.193:443
  6. Referrer Policy: no-referrer-when-downgrade
  7. # Response
  8. Connection: keep-alive
  9. Content-Encoding: gzip
  10. Content-Type: text/javascript; charset=utf-8
  11. Date: Wed, 29 Aug 2018 14:54:56 GMT
  12. Server: nginx/1.12.2
  13. Transfer-Encoding: chunked

分析: 没开启 Etag, 没有告知浏览器进行缓存, 且每次请求(开启缓存情况下)都是 200 正确响应. 重新从服务端获取数据. 对服务器压力大

netlify 的技术方案

  1. # request
  2. Request URL: https://eloquent-almeida-b21318.netlify.com/resources/scripts/jquery-1.7.1.min.js
  3. Request Method: GET
  4. Status Code: 304
  5. Remote Address: 35.189.132.21:443
  6. Referrer Policy: no-referrer-when-downgrade
  7. # response
  8. cache-control: public, max-age=0, must-revalidate
  9. date: Wed, 29 Aug 2018 14:49:01 GMT
  10. etag: "538863031fcda87f03398bbc78c06c81-ssl-df"
  11. server: Netlify
  12. status: 304
  13. vary: Accept-Encoding
  14. x-nf-request-id: 6a89484b-8029-4059-aea9-08991fe66ab6-11566228

分析: 启用 Etag, 告知浏览器没有内容更新时候获取本地存储,只是从服务端获取状态
缓存处理方式:
可缓存性 : [public] 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。
到期 : [max-age=] 设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与 Expires 相反，时间是相对于请求的时间。
重新验证和重新加载 : [must-revalidate] 缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。

解决方案

我们采用 netlify 的解决方案

  1. 开启 ETag
  2. 缓存机制采用可缓存, 服务端验证方式
    1. # request
    2. Request URL: http://.../ne14ke/resources/scripts/jquery-1.7.1.min.js
    3. Request Method: GET
    4. Status Code: 304 Not Modified
    5. Remote Address: 139.129.212.119:80
    6. Referrer Policy: no-referrer-when-downgrade
    7. # response
    8. Cache-Control: public, max-age=0, must-revalidate
    9. Connection: keep-alive
    10. ETag: "5b86b33d-16ed9"
    11. Last-Modified: Wed, 29 Aug 2018 14:52:45 GMT
    12. Server: nginx/1.12.2
    当文件改变之后
    1. # request
    2. Request URL: http://.../.../jquery-1.7.1.min.js
    3. Request Method: GET
    4. Status Code: 200 OK
    5. Remote Address: 139.129.212.119:80
    6. Referrer Policy: no-referrer-when-downgrade
    7. Accept-Ranges: bytes
    8. # response
    9. Cache-Control: public, max-age=0, must-revalidate
    10. Connection: keep-alive
    11. Content-Length: 93924
    12. Content-Type: application/javascript
    13. ETag: "5b86b5e2-16ee4"
    14. Last-Modified: Wed, 29 Aug 2018 15:04:02 GMT
    15. Server: nginx/1.12.2
    我们可以看到又重新进行了请求(200), 并且采用了 ETag (重新生成), 目的达到.

    技术点配置

    nginx.conf
    1. # 开启 etag
    2. etag on;
    server{}
    1. # 服务器设置/缓存控制
    2. location ~ .*\.(js|css|png|svg)?$ {
    3.  # 取消缓存
    4.  # 告知浏览器处理缓存的方式
    5.  add_header Cache-Control "public, max-age=0, must-revalidate";
    6. }