零基础自学Nginx 进阶篇 2 Nginx静态资源部署 2.5 Nginx静态资源的缓存处理 2.5.2 Nginx中浏览器缓存的执行流程

水深无声 2024-03-26 13:55 71阅读 0赞

#### 零基础自学Nginx ####

#### 文章目录 ####

*   *   *  零基础自学Nginx
         *  进阶篇
         *  2 Nginx静态资源部署
         *   *  2.5 Nginx静态资源的缓存处理
             *   *  2.5.2 Nginx中浏览器缓存的执行流程

[【黑马程序员Nginx教程，Java进阶从0到1学会Nginx分布式框架】 ][Nginx_Java_0_1_Nginx_]

![在这里插入图片描述][b77384b7885946dc8db19299e7680dc2.png_pic_center]

#### 进阶篇 ####

#### 2 Nginx静态资源部署 ####

##### 2.5 Nginx静态资源的缓存处理 #####

###### 2.5.2 Nginx中浏览器缓存的执行流程 ######

HTTP协议中和页面缓存相关的字段，我们先来认识下：

<table> 
 <thead> 
  <tr> 
   <th>header</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Expires</td> 
   <td>缓存过期的日期和时间</td> 
  </tr> 
  <tr> 
   <td>Cache-Control</td> 
   <td>设置和缓存相关的配置信息</td> 
  </tr> 
  <tr> 
   <td>Last-Modified</td> 
   <td>请求资源最后修改时间</td> 
  </tr> 
  <tr> 
   <td>ETag</td> 
   <td>请求变量的实体标签的当前值，比如文件的MD5值</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][06fe474fe11a4793907346af239727b8.png_pic_center]

流程图：

![在这里插入图片描述][bcf0a661af904772a4ba599685609aa5.png_pic_center]

（1）用户首次通过浏览器发送请求到服务端获取数据，客户端是没有对应的缓存，所以需要发送request请求来获取数据；

（2）服务端接收到请求后，获取服务端的数据及服务端缓存的允许后，返回200的成功状态码并且在响应头上附上对应资源以及缓存信息；

（3）当用户再次访问相同资源的时候，客户端会在浏览器的缓存目录中查找是否存在响应的缓存文件

（4）如果没有找到对应的缓存文件，则走(2)步

（5）如果有缓存文件，接下来对缓存文件是否过期进行判断，过期的判断标准是(Expires),

（6）如果没有过期，则直接从本地缓存中返回数据进行展示

（7）如果Expires过期，接下来需要判断缓存文件是否发生过变化

（8）判断的标准有两个，一个是ETag(Entity Tag),一个是Last-Modified

（9）判断结果是未发生变化，则服务端返回304，直接从缓存文件中获取数据

（10）如果判断是发生了变化，重新从服务端获取数据，并根据缓存协商(服务端所设置的是否需要进行缓存数据的设置)来进行数据缓存。

【牛逼】

![在这里插入图片描述][d056a122070749858aab0428ac3446ee.png_pic_center]

强缓存和弱缓存的区别：

*  强缓存：不会发请求到服务端，直接从本地缓存中获取用户想要的资源给用户
 *  弱缓存：需要发送请求到服务端，服务端判断以后，响应一个304，再从缓存中拿数据进行响应

[Nginx_Java_0_1_Nginx_]: https://www.bilibili.com/video/BV1ov41187bq/
[b77384b7885946dc8db19299e7680dc2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3ca582f367e54b30aa1cd2f729767df7.png
[06fe474fe11a4793907346af239727b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e00fbd02403c4517bc08b1328dd015e1.png
[bcf0a661af904772a4ba599685609aa5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bfa19057ed4c46a7ab6905630a5b6db9.png
[d056a122070749858aab0428ac3446ee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e0258d59c9384446a42e317831964968.png