一、强缓存(Strong Cache)

1. 定义

• 强缓存直接告诉浏览器:在缓存过期前,无需与服务器通信,直接使用本地缓存。

• 由服务器通过响应头 Cache-ControlExpires 控制。

2. 响应头

Cache-Control: max-age=3600

表示资源在 3600 秒(1小时) 内有效(优先级高于 Expires)。

Expires: Thu, 31 Dec 2030 23:59:59 GMT

指定一个绝对过期时间(依赖于客户端本地时间,可能存在误差)。

3. Nginx 配置示例

location /static/ {
# 设置强缓存:1年内有效
add_header Cache-Control "public, max-age=31536000";
expires 1y;
}

4. 行为

• 浏览器首次请求资源时,服务器返回资源并附带缓存头。

• 后续请求时,浏览器直接读取本地缓存(状态码 200 (from disk cache)),不发送请求到服务器

5. 适用场景

• 静态资源(如 CSS、JS、图片、字体文件)等长期不变的资源。


二、协商缓存(协商缓存,Weak Cache)

1. 定义

• 协商缓存要求浏览器 每次向服务器验证缓存是否过期,若未过期则返回 304 Not Modified,继续使用本地缓存。

• 由服务器通过响应头 Last-ModifiedETag 控制。

2. 响应头

Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT

表示资源最后修改时间(精度为秒,可能因时间同步问题失效)。

ETag: "5d8c72a5-264"

资源的唯一标识符(哈希值或版本号),精度更高。

3. Nginx 配置示例

location /dynamic/ {
# 启用协商缓存(默认已支持,无需显式配置)
add_header Last-Modified "";
etag on;
}

4. 行为

  1. 浏览器首次请求资源时,服务器返回资源并附带 Last-ModifiedETag
  2. 后续请求时,浏览器通过以下请求头验证缓存:

    If-Modified-Since: [Last-Modified值]

    向服务器询问资源是否在指定时间后修改过。

    If-None-Match: [ETag值]

    向服务器验证资源的 ETag 是否变化。
  3. 若资源未修改,服务器返回 304 Not Modified,浏览器继续使用缓存;若已修改,返回新资源(状态码 200)。

5. 适用场景

• 频繁更新的资源(如 HTML 页面、动态 API 响应)。


三、关键区别

特性 强缓存 协商缓存
通信成本 无网络请求(直接读缓存) 需发送请求验证缓存
响应状态码 200 (from disk cache) 304 Not Modified
优先级 优先于协商缓存 强缓存过期后触发
适用资源 长期不变的静态资源 频繁更新的动态资源

四、Nginx 最佳实践

  1. 混合使用两种缓存

    location / {
    # 强缓存 1 小时,过期后启用协商缓存
    add_header Cache-Control "public, max-age=3600";
    etag on;
    }
  2. 按文件类型区分策略

    # 图片、字体等强缓存
    location ~* \.(jpg|png|gif|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
    } # HTML 文件禁用强缓存(总是协商)
    location ~* \.html$ {
    add_header Cache-Control "no-cache, must-revalidate";
    }
  3. 解决缓存更新问题

    • 强缓存资源建议通过 文件名哈希 控制版本(如 main.abcd1234.js)。

    • 协商缓存可通过修改 ETagLast-Modified 触发更新。


五、调试工具

  1. 浏览器开发者工具(Network 标签):

    • 查看 200 (from disk cache)(强缓存)或 304 Not Modified(协商缓存)。

    • 检查请求头中的 Cache-ControlIf-Modified-SinceIf-None-Match
  2. 命令行工具:
    curl -I http://example.com/resource.js

通过合理配置强缓存和协商缓存,可以显著提升网站性能,减少服务器负载。

什么是nginx的强缓存和协商缓存的更多相关文章

  1. 说说web缓存-强缓存、协商缓存

    网上关于WEB缓存的文章很多,今天汇总一下. 为什么要用缓存 一般针对静态资源如CSS,JS,图片等使用缓存,原因如下: 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影 ...

  2. 浏览器相关,关于强缓存、协商缓存、CDN缓存。

    强缓存和协商缓存 在介绍缓存的时候,我们习惯将缓存分为强缓存和协商缓存两种.两者的主要区别是使用本地缓存的时候,是否需要向服务器验证本地缓存是否依旧有效. 顾名思义,协商缓存,就是需要和服务器进行协商 ...

  3. HTTP强缓存和协商缓存

    一.浏览器缓存 Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间.借助 HTTP 缓存,Web 站点变得更具有响应性. (一).缓存优点: 减少不必要的数据传输,节省带宽 减少服务器 ...

  4. http缓存策略以及强缓存和协商缓存浅析

    http缓存策略以及强缓存和协商缓存浅析 本地缓存-强缓存 本地缓存,也就是我们常说的强缓存:是指当浏览器请求资源时,如果请求服务端的资源命中了浏览器本地的缓存资源,那么浏览器就不会发送真正请求给服务 ...

  5. HTTP 强制缓存和协商缓存

    Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间.借助 HTTP 缓存,Web 站点变得更具有响应性. 缓存优点: 减少不必要的数据传输,节省带宽 减少服务器负担,提升网站性能 加快 ...

  6. 区分http请求状态码来理解缓存(协商缓存和强制缓存)

    什么是http缓存呢,当我们使用chrome浏览器,按F12打开控制台,在网络请求中有时候看到状态码是200,有时候状态码是304,当我们去看这种请求的时候,我们会发现状态码为304的状态结果是:St ...

  7. 浏览器缓存_HTTP强缓存和协商缓存

    浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档. 所以根据上面的特点,浏览器缓存有下面的优点: 减少冗余的数据传 ...

  8. http强制缓存、协商缓存、指纹ETag详解

    目录 实操目录及步骤 缓存分类 强制缓存 对比缓存 指纹 Etag 摘要及加密算法 缓存总结 每个浏览器都有一个自己的缓存区,使用缓存区的数据有诸多好处,减少冗余的数据传输,节省网络传输.减少服务器负 ...

  9. 利用nginx设置浏览器协商缓存

    强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存 协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源 协商缓存运作原理 现在有一个这样的业务情景: ...

  10. http协商缓存VS强缓存

    之前一直对浏览器缓存只能描述一个大概,深层次的原理不能描述上来:终于在前端的两次面试过程中被问倒下,为了泄恨,查阅一些资料最终对其有了一个更深入的理解,废话不多说,赶紧来看看浏览器缓存的那些事吧,有不 ...

随机推荐

  1. Linux新用户登录时出现“-bash-4.2$”的解决办法

    Linux服务器新建的用户在登录时显示"-bash-4.2$",而不是"user@hostname"的显示方式,出现此问题的原因是在添加普通用户时,用户家目录下 ...

  2. Shell_Shell 脚本中字符串的相关操作

    在我们的shell 编程中,一个必不可少的操作就是针对于字符串的操作, 重要有字符串替换,计算字符串长度 等等... 原文地址: https://blog.csdn.net/github_337369 ...

  3. Java多线程处理文件详解与代码示例

    在Java编程中,文件处理是一项常见的任务.当需要处理大量文件或处理文件的时间较长时,单线程的处理方式可能会显得效率低下.为了提高文件处理的效率,我们可以使用多线程技术.本文将详细介绍如何使用Java ...

  4. Qt/C++音视频开发81-采集本地麦克风/本地摄像头带麦克风/桌面采集和麦克风/本地设备和桌面推流

    一.前言 随着直播的兴起,采集本地摄像头和麦克风进行直播推流,也是一个刚需,最简单的做法是直接用ffmpeg命令行采集并推流,这种方式简单粗暴,但是不能实时预览画面,而且不方便加上一些特殊要求.之前就 ...

  5. Qt音视频开发06-海康sdk内核linux客户端

    一.前言 海康sdk的示例在官方是提供了的,但是无论UI还是交互简直是宇宙无敌的垃圾,猜测应该是初学者编写的,估计练手用的,所以老早就想把这个linux支持集成到自己的示例中,既然已经支持了windo ...

  6. UML之类与类图

    在所有项目中,类都是最常见的UML模型元素(当然,不可否认,很多项目还没画出类图就直接进入编码实现的阶段了).类是UML模型与具体实现代码之间的桥梁,随着对UML建模的深入了解,我们也会发现,类(确切 ...

  7. [转]cesium很全的入门教程-翻译官网和加入自己理解

    快速入门教程基本涵盖了大多数的CesiumJS API概念,主要用于Cesium基本入门,对Cesium有全面基本的了解和使用 一.概述本教程会一步一步教会你做一个项目,主要介绍如下内容: 配置1个C ...

  8. [转]怎么使用PyCharm编写Python程序,简单教程

    原文链接:怎么使用PyCharm编写Python程序,简单教程.

  9. Solution Set -「AGC 013~015」C~F

    目录 「AGC 013C」Ants on a Circle 「AGC 013D」Piling Up ^ 「AGC 013E」Placing Squares ^ 「AGC 013F」Two Faced ...

  10. CDS标准视图:分配到任务清单的维护包数据 I_PckgTaskListOpalLocData

    视图名称:分配到任务清单的维护包数据 I_PckgTaskListOpalLocData 视图类型:基础 视图代码: 点击查看代码 @AbapCatalog.sqlViewName: 'IPCKTLO ...