一、强缓存(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. Swagger2学习——@ApiImplicitParams注解

    @ApiImplicitParams:用在请求的方法上,表示一组参数说明 @ApiImplicitParam:用在@ApiImplicitParams注解中,指定一个请求参数的各个方面 name:参数 ...

  2. Qt编写地图综合应用42-离线轮廓图

    一.前言 离线轮廓图使用起来,就没有在线轮廓图方便了,在线的可以直接传入名称拿到,离线的只能自己绘制了,一般需要用区域轮廓图下载器将你需要的区域下载好对应的js文件,其实就是一堆坐标点集合数组,这些数 ...

  3. VUE3基础环境搭建

    VUE3基础环境搭建 1. 安装vue.js npm install vue -g 安装webpack Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bun ...

  4. Appium_iOS自动化测试之Appium Log

                  Xcode WebDriverAgentRunner配置参考: https://www.cnblogs.com/dreamhighqiu/p/11023363.html 1 ...

  5. ffmpeg实现视频的合成与分割

    视频合成与分割程序使用   作者开发了一款软件,可以实现对视频的合成和分割,界面如下: 下载该程序 播放时,可以选择多个视频源:在选中"保存视频"情况下,会将多个视频源合成一个视频 ...

  6. git与svn的对比-copy

    SVN与Git比较的优缺点差异   目录: SVN与Git比较(一)集中式vs分布式 SVN与Git比较(二)版本库与工作区 SVN与Git比较(三)全局版本号和全球版本号 SVN与Git比较(四)部 ...

  7. wget命令简单使用

    wget是Linux下一个文件下载工具.wget支持HTTP.HTTPS.FTP协议,可使用HTTP代理. 所谓自动下载,是指 wget 可以在用户退出系统的之后在继续后台执行,直到下载任务完成. w ...

  8. Codeforces Round 961 (Div. 2)

    题目链接:Codeforces Round 961 (Div. 2) 总结:B1wa两发可惜,C出得有点小慢. A. Diagonals fag:贪心 Description:给定一个\(n * n\ ...

  9. linxu7下安装pacemaker+corosync集群-01

    1.yum仓库的配置-自行配置 2.安装软件包: yum -y install pacemaker* corosync* pcs* psmisc yum -y install pcs fence-ag ...

  10. .net core使用Nacos注册中心

    一.前言 好久不见~复工第一更 本文仅参考Nacos快速开始,实现Windows本机单节点测试部署Nacos服务,不适用于生产环境. Nacos是实现动态服务发现.配置管理和服务管理平台的项目,由阿里 ...