浏览器与 nginx 缓存

简介

• 一种是：浏览器向 nginx 发出请求，并利用其缓存机制。
• 另一种：nginx 向后端发送请求，并利用本地缓存机制。

响应头字段说明

    Cache-Control: public, max-age=51600
    Connection: keep-alive
    Content-Type: text/html; charset=UTF-8
    Date: Tue, 05 Feb 2019 14:28:26 GMT
    Expires: Wed, 06 Feb 2019 04:48:26 GMT
    Last-Modified: Tue, 05 Feb 2019 14:06:57 GMT
    Server: nginx/1.13.9
    Transfer-Encoding: chunked
    X-Powered-By: PHP/7.1.23
    
    
      
      
      
      
      
      
      
      
      
    
    代码解释

Date 的意思是服务器发送消息的时间

Expires 表示过期时间

当expire 为负时，会在响应头增加Cache-Control: no-cache；

当为正或者0时，就表示Cache-Control: max-age=指定的时间(秒)；

浏览器可采用两种不同的方法来判定缓存文件是否已过时。其中一种方法为If-Modified-Since头信息，在此过程中浏览器携带上一次请求的时间戳（记录于Last-Modified头部）并发送至服务器端进行比较。随后服务器将评估该时间点之后文件是否有变化；若未发生修改则返回状态码304；反之若检测到修改，则返回状态码200以指示需要重新获取最新版本的响应数据。

除了这种方法之外, 还有一种叫做ETag的方法（Entity Tag）

    ETag: "5c5009ae-8a5"
    
    
      
    
    代码解释

访问出现 200 OK (from disk cache)

• 删除了Entity Tag后，在处理请求时始终返回状态码200，并标记为来自磁盘缓存；然而由于未与服务器核实具体请求意图，在后续处理中会直接依赖于浏览器缓存；
• 即使不删除Entity Tag，在请求处理过程中也会交替出现这两种情况；
• 当浏览器和服务器确认一次数据的有效性后，在后续使用该数据时仍基于此次验证结果进行处理；
• 避免返回200状态码（来自磁盘缓存）的方法是通过设置Ajax请求携带cache: false属性来实现的；

chrome 浏览器

header 头

Status Code: 200 (from disk cache)

size 栏通常会有三种状态

该资源来自内存缓存，在页面关闭后会被内存释放掉。当再次访问相同页面时，该资源将不再触发from memory cache的情况。

2. 资源是被从磁盘中取出的，在之前已经加载过该资源的情况下不会向服务器发起请求。因为该资源存储在硬盘上，在页面关闭后下次打开时仍然会从磁盘缓存中获取。

3. 资源本身的大小(如：1.5k)
   当HTTP状态码为200时，则是直接从服务器获取的实际资源。
   而当HTTP状态码为304时所记录的数据量仅反映双方通信报文的信息量，并不代表该资源的实际大小。

chrome采取措施的准则

统计表

通常位于磁盘存储，并未被加载至内存以供使用。这是因为CSS样式仅需在每次页面渲染时加载一次即可完成显示效果的计算与应用。

然而，在某些情况下，脚本可能会随时被执行。然而，在某些情况下，脚本可能会随时被执行。然而，在某些情况下

Firefox 准则

1. 相同的资源在Chrome中位于存储介质缓存或内存缓存中（disk/memory缓存），而Firefox统一返回了304不修改状态码。
2. 在Firefox中并未展示来自内存缓存或存储介质缓存的状态信息。

参考

<>