一、强缓存(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. Web浏览器播放rtsp视频流详细解决方案

    1.背景 在当前项目中,需要实现Web端直接播放RTSP视频流.该功能的核心目标是使得用户能够通过浏览器观看来自不同品牌的IPC(Internet Protocol Camera)设备的实时视频流.主 ...

  2. Qt编写地图综合应用56-实时动态轨迹

    一.前言 实时动态轨迹经历过很多个版本的迭代,此功能最初是一个客户定制的,主要是需要在地图上动态显示GPS的运动轨迹,有个应用场景就是一个带有监控的车子,实时在运动中,后台可以接收到经纬度信息,需要绘 ...

  3. Qt编写安防视频监控系统21-摄像机管理

    一.前言 摄像机管理在整个系统中是数据库部分最核心的,只有添加了摄像机信息,才能进行加载,生成树状列表等,摄像机表信息的字段内容改过好几次,有可能后期还需要修改,目前摄像机表信息主要包括摄像机编号.摄 ...

  4. [转]Node.js安装详细步骤教程(Windows版)

    什么是Node.js? 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境: Node.js使用 ...

  5. [转]Microsoft Robotics Studio:微软仿真机器人集成开发环境,简称MSRS

    原文链接:Microsoft Robotics Studio 微软官网:Robotics: Simulating the World with Microsoft Robotics Studio 其它 ...

  6. Java实现拍卖系统详解

    一.项目背景与需求分析 随着互联网技术的飞速发展,电子商务领域不断拓展新的业务模式,在线拍卖系统应运而生并逐渐成为一种重要的商业交易方式.在当今数字化的时代,人们越来越倾向于通过网络平台进行各类交易活 ...

  7. IM开发者的零基础通信技术入门(十四):高铁上无线上网有多难?一文即懂!

    [来源申明]本文引用了微信公众号"鲜枣课堂"的<坐高铁手机没信号?原因远比你想的要复杂!>文章内容.为了更好的内容呈现,本文在引用和收录时内容有改动,转载时请注明原文来 ...

  8. Hugo 静态博客部署

    I. 前提条件 1.1 安装 Hugo 1.1.1 Windows 1.下载 Hugo(建议下载扩展版):Hugo(github.com) 2.解压 Hugo 压缩包到指定目录. 3.[Win + R ...

  9. 数字世界中的纸张——理解 PDF (转载)

    转载自 https://type.cyhsu.xyz/2018/09/understanding-pdf-the-digitalized-paper/ 引言 PDF 是我们打交道最多的文件格式之一.提 ...

  10. asp.net core 3.x 通用主机是如何承载asp.net core的-中

    便于理解直接录制视频了 必备知识: 依赖注入.配置系统.选项模式.推荐参考:A大博客 通用主机(参考:https://www.cnblogs.com/jionsoft/p/12154519.html) ...