说一下浏览器中的强缓存和协商缓存的区别

写在前面

对于一道高频的面试题，可能很多小伙伴还不知道这两者的概念，不知道是用来做什么的，以及有什么好处，强缓存和协商缓存是 Web 缓存机制的重要组成部分，它们在优化 Web 应用性能方面发挥了重要作用，接下来我们就来详细的聊一下吧！

强缓存

概念

强缓存指的是在缓存有效期内，不需要向服务器发送请求，直接从缓存中读取资源。这意味着在缓存有效期内，浏览器直接使用缓存的资源，不会与服务器通信。

好处

  1. 减少服务器负载：减少了不必要的请求，服务器负载显著降低。
  2. 提高页面加载速度：资源直接从本地缓存中读取，减少了网络延迟，页面加载速度更快。
  3. 节省带宽：避免重复下载相同的资源，节省了带宽资源。
  4. 改善用户体验：快速的页面加载提高了用户满意度和留存率。

如何开启

强缓存主要通过 HTTP 响应头中的 Expires 和 Cache-Control 属性来实现。这些属性是由服务器在响应中设置的，并指示浏览器如何缓存资源。

详细说明

Expires
  • 定义：一个绝对时间点，在此时间点之前，缓存的资源被认为是有效的。
  • 位置：响应头
  • 例子：Expires: Wed, 21 Oct 2024 07:28:00 GMT

示例：

HTTP/1.1 200 OK
Expires: Wed, 21 Oct 2024 07:28:00 GMT
Content-Type: text/html
Content-Length: 1234
Cache-Control
  • 定义：更现代、更灵活的缓存控制方式，可以定义更细粒度的缓存策略。
  • 位置：响应头
  • 常用指令：
    • max-age：相对时间，以秒为单位。例如：Cache-Control: max-age=3600 表示资源可以缓存 3600 秒（1 小时）。
    • no-cache：不使用强缓存，每次都要向服务器发送请求以确认资源是否改变。
    • no-store：不缓存资源，完全禁用缓存。
    • public：表示响应可以被任何缓存存储（包括浏览器和中间代理服务器）。
    • private：表示响应只能被单个用户的浏览器缓存，不允许代理缓存。

 示例：

HTTP/1.1 200 OK
Cache-Control: max-age=3600
Content-Type: text/html
Content-Length: 1234

协商缓存

概念

协商缓存需要客户端和服务器之间的交互。当缓存资源过期时，客户端会向服务器发送请求，服务器根据请求头中的信息判断客户端缓存的资源是否仍然有效。

好处

  1. 节省带宽：对于未修改的资源，服务器只返回状态码而不发送资源内容，节省了带宽。
  2. 减少延迟：即使需要与服务器通信，304 响应也比完全下载新的资源更快。
  3. 保持资源最新：确保浏览器使用的是最新版本的资源，提高了数据的一致性和可靠性。
  4. 平衡性能与新鲜度：在减少不必要请求的同时，确保资源的实时更新。

如何开启

协商缓存使用的主要属性是服务器返回的 Last-Modified 和 ETag，而在下次请求时会使用 If-Modified-Since 和 If-None-Match，它们的值在实现协商缓存时起着关键作用。

详细说明

协商缓存相关属性:

Last-Modified:（服务器响应）

  • 含义: 资源的最后修改时间。
  • 格式: 一个 GMT 格式的时间字符串。
  • 示例: Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
  • 备注：和 If-Modified-Since 配合使用

If-Modified-Since:（请求头携带）

  • 含义: 客户端发送的请求头，其值通常是上次请求时服务器返回的 Last-Modified 值。
  • 用途: 服务器根据这个值判断资源是否有更新。

ETag:（服务器响应）

  • 含义: 资源的唯一标识符，通常是资源内容的哈希值或版本号。
  • 示例: ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
  • 备注：和 If-None-Match 配合使用

If-None-Match:（请求头携带，优先级更高）

  • 含义: 客户端发送的请求头，其值通常是上次请求时服务器返回的 ETag 值。
  • 用途: 服务器根据这个值判断资源是否有更新。

协商缓存的工作流程

首次请求：浏览器请求资源，服务器返回资源内容以及 Last-Modified 和/或  ETag。

HTTP/1.1 200 OK
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "abcd1234"
Content-Type: text/html
Content-Length: 1234

后续请求：浏览器再次请求该资源时，会带上 If-Modified-Since 和/或 If-None-Match 请求头。（当资源被缓存后，浏览器会根据之前服务器响应中的缓存头信息，在后续请求中自动添加这些请求头，以实现协商缓存机制。）

GET /index.html HTTP/1.1
Host: example.com
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT
If-None-Match: "abcd1234"

服务器响应：如果资源未修改，服务器返回 304 Not Modified 状态码，不包含消息体，浏览器继续使用缓存资源。

HTTP/1.1 304 Not Modified

如果资源已修改，服务器返回 200 OK 状态码和新的资源内容，同时更新 Last-Modified 和/或 ETag。

优先级

  • 服务器首先会检查If-None-Match中的ETag值是否与服务器上该资源的当前ETag值匹配。
  • 如果ETag匹配成功（即资源内容未发生变化），服务器会返回304 Not Modified状态码，并结束响应，不再检查Last-Modified。
  • 如果ETag匹配失败（即资源内容可能发生变化），服务器会继续检查If-Modified-Since中的Last-Modified值（这提供了一个"双重检查"的机制，有助于在各种情况下优化资源传输）。
  • ETag 的优先级高于Last-Modified。这是因为 ETag 是基于资源内容生成的唯一标识符，能够更加准确地反映资源是否发生变化。而 Last-Modified 只是记录了资源最后修改的时间戳，可能会因为某些原因（如服务器时间设置不准确、文件被定期生成但内容未变等）而导致不准确。

综合对比

特性/机 制强缓存协商缓存
定义浏览器直接从缓存中读取资源，无需与服务器通信浏览器向服务器验证缓存资源的有效性
实现方式HTTP 头信息中的 Expires 和 Cache-ControlHTTP 头信息中的 Last-Modified 和 ETag
响应头Expires, Cache-ControlETag, Last-Modified
请求头无需特定请求头If-None-Match, If-Modified-Since
匹配优先级无ETag 优先级高于 Last-Modified
匹配原理根据缓存有效期直接使用缓存浏览器发送上次接收的 ETag 或 Last-Modified，服务器比较并返回 304 或 200
处理流程浏览器检查缓存有效期，若有效直接使用浏览器请求资源时，发送 If-None-Match 和 If-Modified-Since，服务器根据 ETag 和 Last-Modified 判断是否返回 304 或 200
典型场景静态资源如图片、CSS、JS 文件动态资源或频繁更新的资源
缓存控制由浏览器控制，依赖于缓存策略和有效期由服务器控制，通过生成和验证 ETag 和 Last-Modified 实现
优先级处理不涉及优先级服务器优先检查 If-None-Match，ETag 不匹配时直接返回 200，不再检查 If-Modified-Since
资源变化检测依赖于缓存时间，不检测内容变化基于内容 (ETag) 或修改时间 (Last-Modified) 检测资源变化
缓存策略通过设置缓存有效期控制通过服务器和浏览器间的缓存验证控制
优势减少网络请求，提升加载速度确保资源最新状态，节省带宽
劣势可能使用过期的缓存，无法实时更新增加请求开销，需要服务器支持

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/41885.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vue + SpringBoot：el-upload组件单文件、多文件上传实战解析

Vue + SpringBoot：el-upload组件单文件、多文件上传实战解析

文章目录 单文件上传后端前端 多文件上传后端前端 单文件上传 后端 PostMapping("/uploadDxfFile") public R uploadDxfFile(RequestParam(value "file", required true) MultipartFile multipartFile) throws Exception {// 文件校验工作if (multipar…
阅读更多...
web Worker学习笔记 | 浏览器切换标签，定时器失效的解决办法

web Worker学习笔记 | 浏览器切换标签，定时器失效的解决办法

文章目录 web Workerweb Worker介绍 - 多线程解决方案浏览器多进程架构 web workers 的使用关闭worker引用其他js文件 浏览器切换标签，定时器失效的解决办法窗口可见性 API解决定时器失效的方案 web Worker web Worker介绍 - 多线程解决方案 Web Workers 是Html5提…
阅读更多...
服务器数据恢复—DS5300存储raid5阵列数据恢复案例

服务器数据恢复—DS5300存储raid5阵列数据恢复案例

服务器存储数据恢复环境： 某单位一台某品牌DS5300存储，1个机头4个扩展柜，50块硬盘组建2组RAID5磁盘阵列（一组raid5阵列有27块成员盘，存放Oracle数据库文件；另外一组raid5阵列有23块成员盘）。存储…
阅读更多...
大带宽独立服务器的购买和配置流程是怎样的？

大带宽独立服务器的购买和配置流程是怎样的？

在当前互联网时代，大带宽独立服务器越来越受到企业和个人用户的青睐。其稳定性和高速的数据传输速率可以为用户提供更好的互联网体验。下面我们将详细介绍如何购买和配置大带宽独立服务器。 第一步：选择合适的服务器提供商 在选择服务器提供商时&#…
阅读更多...
CF1982D Beauty of the mountains

CF1982D Beauty of the mountains

【题意】 Nikita 喜欢爬山。当地的山可以看作一个由 ( n m ) (n \times m) (nm) 个格子组成的 n m n \times m nm 的矩形，每一个格子都有一个初始非负高度 a i , j a_{i,j} ai,j​。 格子有两种类型： 有雪无雪 Nikita 有一种超能力：…
阅读更多...
数组相关内容

数组相关内容

一、数组 就是一个集合，里面存放了相同类型的数据元素 特点： 1.数组中的每个数据元素都是相同的数据类型 2.数组是由连续内存位置组成的 二、一维数组 定义方式 1.数据类型 数组名[数组长度]； 2.数据类型 数组名[数组长度]{值1&#xff0…
阅读更多...
Jacoco的覆盖率原理

Jacoco的覆盖率原理

收集覆盖率信息的方法 Runtime Profiling Runtime Profiling是一种在程序运行时进行的性能分析技术，它可以帮助开发者了解程序的运行情况，识别性能瓶颈和优化程序性能。由于是在程序运行时进行，runtime profiling 能够提供实时的数据，便于理解程序在实际运行条件下的行为…
阅读更多...
周报7.1-7.7

周报7.1-7.7

学习内容 了解注意力机制的相关内容，学习注意力提示、注意力汇聚、评分函数、Bahdanau注意力、多头注意力、Transformer等内容。了解Bahdanau注意力和Transformer的模型代码实现。Qt的碳汇源继续需求整改 下周计划 学习Pytorch的代码实战，学习使用Ten…
阅读更多...
HashMap中的put()方法

HashMap中的put()方法

一. HashMap底层结构 HashMap底层是由哈希表(数组),链表,红黑树构成,哈希表存储的类型是一个节点类型,哈希表默认长度为16,它不会每个位置都用,当哈希表中的元素个数大于等于负载因子(0.75)*哈希表长度就会扩容到原来的2倍 二. 底层的一些常量 三. HashMap的put()方法 当插入一…
阅读更多...
ONLYOFFICE最新8.1版本——桌面编辑器简单测评

ONLYOFFICE最新8.1版本——桌面编辑器简单测评

前言 大家好，我是小雨，看到最近ONLYOFFICE更新了最新的版本，更新了一下当前版本来具体的测评一下，先来看看官网提供的各类更新信息，下面是我找到的三个主页，包括功能演示链接，官网连接以及专门…
阅读更多...
阿里云存储

阿里云存储

传统存储面临的挑战 现如今，数据与土地、劳动力、资本、技术并称为五大生产要素，数据成为数字经济发展的重要引擎。大数据时代，数据处理的需求急剧增长，越来越多的智能设备以及新应用如区块链、机器学习训练和AI等产生大量的数据…
阅读更多...
复分析——第10章——Θ函数应用(E.M. Stein R. Shakarchi)

复分析——第10章——Θ函数应用(E.M. Stein R. Shakarchi)

第10章 Θ函数的应用 (Applications of Theta Functions) The problem of the representation of an integer n as the sum of a given number k of integral squares is one of the most celebrated in the theory of numbers. Its history may be traced back to Diopha…
阅读更多...
CV03_mAP计算以及COCO评价标准

CV03_mAP计算以及COCO评价标准

COCO数据集回顾：CV02_超强数据集：MSCOCO数据集的简单介绍-CSDN博客 1.1 简介 在目标检测领域中，mAP（mean Average Precision，平均精度均值）是一个广泛使用的性能评估指标，用于衡量目标检测模型…
阅读更多...
短信验证码实现

短信验证码实现

一、设置AccessKey 创建用户并配置使用权限，使我们拥有调用 aliyunAPI 的权限，之后会生成 AccessKeyID 和 AccessKey密码，后面我们会使用到。需要注意的是 AccessKeyID 和 AccessKey密码生成后我们需要将他保存起来，否则后期无法查…
阅读更多...
奇迹MU 骷髅战士在哪

奇迹MU 骷髅战士在哪

BOSS分布图介绍 我为大家带来各地区怪物分布图。在游戏前期，很多玩家可能会不知道该去哪里寻找怪物，也不知道哪些怪物值得打。如果选择了太强的怪物，弱小的玩家可能会无法抵御攻击。如果选择了低等级的boss，收益可能并不理想。所…
阅读更多...
智能家居安防系统教学解决方案

智能家居安防系统教学解决方案

前言 随着科技的不断进步和智能家居概念的深入人心，智能家居安防系统作为智能家居领域的重要组成部分，其重要性日益凸显。智能家居安防系统不仅能够提供环境和人员的监测功能，还能够采取措施降低或避免人员伤亡及财产损失。因此，…
阅读更多...
Double 4 VR虚拟情景智能互动系统在高铁乘务管理课堂上的应用

Double 4 VR虚拟情景智能互动系统在高铁乘务管理课堂上的应用

在不断进步的科技背景下，虚拟现实（VR）技术已广泛应用于教育领域。VR技术的运用为课堂教育提供了新的思路与方式，尤其在高铁乘务管理这一专业中，Double 4 VR虚拟情景智能互动系统更是发挥了其独特的优势。 一、VR技术带…
阅读更多...
word文档没有保存就关闭了怎么恢复？找到正确的方法

word文档没有保存就关闭了怎么恢复？找到正确的方法

昨天写教程的时候，终于完成了一个word文档，以为保存了就直接关了。word提醒我“是否保存”，我直接忽略了。动作一气呵成，毫不犹豫的关闭了。之后才发现我没有保存word文档。这种情况大家有遇到过吗?我们该如何在没有保存的情况下…
阅读更多...
迎接AI新时代：GPT-5即将登场的巨大变革与应用前瞻

迎接AI新时代：GPT-5即将登场的巨大变革与应用前瞻

迎接AI新时代：GPT-5即将登场的巨大变革与应用前瞻 💎1. GPT-5 一年半后发布：AI新时代的来临1.1 GPT-5的飞跃：从高中生到博士生 💎2. GPT-5的潜在应用场景💎2.1 医疗诊断和健康管理💎2.2 教育领域…
阅读更多...
Docker+Spring boot为环境变量赋值（普通变量和List变量）

Docker+Spring boot为环境变量赋值（普通变量和List变量）

DockerSpring boot为环境变量赋值（普通变量和List变量） Spring boot开发微服务，使用yml做配置文件，Docker方式部署。 在不同环境中，需要对yml中的配置进行调整，本文主要介绍在以docker run方式运行时&…
阅读更多...
最新文章

Copyright @ 2022~2023