深入解析 Web 开发中的强缓存与协商缓存机制

在 Web 开发中,缓存机制是提高页面加载速度和用户体验的重要技术。缓存分为两种主要类型:强缓存和协商缓存。本文将详细介绍这两种缓存机制的原理、实现方式及其区别,并演示如何在 <meta> 元素中和 Nginx 服务器中进行缓存控制。

在这里插入图片描述

强缓存

强缓存(Strong Caching)是指在缓存期间,客户端不需要向服务器发送请求,直接从本地缓存中读取资源。这可以显著减少网络请求,提升页面加载速度。

实现方式

强缓存通过响应头中的 ExpiresCache-Control 实现:

  1. Expires

Expires 头指定资源的过期时间,是一个绝对时间点。超过这个时间点,缓存就会失效,浏览器必须再次请求资源。

  • 示例
Expires: Wed, 21 Oct 2021 07:28:00 GMT
  • 解析

Expires 指定的时间之前,浏览器会直接从缓存中读取资源,不会向服务器发送请求。

  1. Cache-Control

Cache-Control 头使用相对时间来指定资源的缓存时间,提供了更为灵活的缓存控制。常用的指令包括:

  • max-age:指定资源缓存的最大有效时间,单位为秒。

  • public:表示响应可以被任何缓存区缓存(如浏览器、CDN 等)。

  • private:表示响应只能被单个用户缓存(即浏览器),不能被共享缓存区缓存。

  • no-cache:缓存资源,但每次请求必须向服务器进行验证。

  • no-store:不缓存资源,每次请求都从服务器获取。

  • 示例

Cache-Control: max-age=3600
  • 解析

max-age=3600 指定资源可以缓存 3600 秒(1 小时)。在此期间,浏览器直接从缓存中读取资源。

协商缓存

协商缓存(Conditional Caching)是指在缓存过期后,客户端每次请求资源时都会向服务器验证缓存资源的有效性。只有在资源更新时才会下载新的资源,否则继续使用缓存。

实现方式

协商缓存通过 Last-Modified/If-Modified-SinceETag/If-None-Match 头实现:

  1. Last-Modified / If-Modified-Since
  • Last-Modified:服务器响应头,表示资源的最后修改时间。
Last-Modified: Wed, 21 Oct 2021 07:28:00 GMT
  • If-Modified-Since:客户端请求头,表示上次缓存的资源的最后修改时间。
If-Modified-Since: Wed, 21 Oct 2021 07:28:00 GMT
  • 工作原理

    • 客户端缓存资源时,记录资源的 Last-Modified 时间。
    • 下次请求该资源时,客户端在请求头中包含 If-Modified-Since
    • 服务器根据资源的最后修改时间和 If-Modified-Since 的值进行比较:
      • 如果资源未修改,返回 304 Not Modified,客户端继续使用缓存。
      • 如果资源已修改,返回新的资源和 200 OK,客户端更新缓存。
  1. ETag / If-None-Match
  • ETag:服务器响应头,表示资源的唯一标识符(如哈希值)。
ETag: "5d8c72a5edda3"
  • If-None-Match:客户端请求头,包含上次缓存的资源的 ETag。
If-None-Match: "5d8c72a5edda3"
  • 工作原理

    • 客户端缓存资源时,记录资源的 ETag。
    • 下次请求该资源时,客户端在请求头中包含 If-None-Match
    • 服务器根据资源的 ETag 和 If-None-Match 的值进行比较:
      • 如果 ETag 未变化,返回 304 Not Modified,客户端继续使用缓存。
      • 如果 ETag 已变化,返回新的资源和 200 OK,客户端更新缓存。

强缓存与协商缓存的区别

  • 强缓存

    • 在缓存有效期内,客户端不向服务器发送请求。
    • 通过 Exp

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

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

相关文章

iPhone的5G设置怎么更改吗?设置好这些能够优化电池的使用寿命

随着5G技术的普及&#xff0c;iPhone用户现在可以享受到更快的网络速度&#xff0c;但这同时也带来了一个问题&#xff1a;如何在使用5G和保持电池寿命之间找到平衡&#xff1f;苹果公司通过引入“5G Auto”设置&#xff0c;为用户提供了一个智能的解决方案&#xff0c;但用户也…

【JAVA WEB实用与优化技巧】如何使用本地.bat/.sh脚本快速将服务发布到测试环境?

文章目录 普通方式的springboot 使用docker打包发布【手动构建镜像模式】1. maven 打包可运行jar包2.手动打包镜像3.运行容器 全自动化本地命令发布到远程服务的方式配置ssh信任公钥获取公钥git 获取公钥方式: 桌面右键 -> open git gui here -> help -> show SSH key…

Honor of Kings 2024.06.03 50star (S35) AFK

Honor of Kings 2024.06.03 50star (S35) AFK 来个赛季S35总结吧&#xff0c;这个赛季结束以后&#xff0c;可能要和【魔兽世界】一样AFK了&#xff0c;手游来说肯定没法子和WOW相比&#xff0c;干啥都是有队友才好玩。 我玩的基本都是肉&#xff0c;爆发强的英雄&#xff0c;最…

llama-factory微调大模型

一、背景 微调或者全量调大语言模型&#xff0c;还包括deepseek,想找个快速的微调教程&#xff0c;网上暂时没有 二、原理和步骤 原理&#xff1a;搭建环境太累了&#xff0c;还是docker环境镜像简单快捷 1、先下载模型 如果用本身的会自动从huggingface下载&#xff0c;这…

解决JSON.stringify 方法在序列化 BigInt 类型时的错误

今天学nest时&#xff0c;使用apifox发送请求获取数据&#xff0c;结果还一直报错&#xff0c;而且还是我从未见过的 Do not know how to serialize a BigInt at JSON.stringify (<anonymous>) at stringify&#xff0c; 我都是跟着人家敲的&#xff0c;我就纳闷了&…

vector的使用和实现

目录 一、vector的常用接口说明1.vector的介绍2.vector的使用2.1 vector的定义2.2 vector的遍历operator[ ]迭代器范围for 2.3 vector的空间增长问题size和capacityreserveresize 2.4 vector的增删查改push_back和pop_backinserterasefindsort vector的模拟实现1、基本成员变量…

Linux基础操作——文件系统+find+head+tail

Linux基础操作——文件系统findheadtail 本文主要涉及LINUX的一些基础操作&#xff0c;文件系统与find命令head和tail命令 文章目录 Linux基础操作——文件系统findheadtail一、Linux下的文件类型二、ls -l 后各列的解释三、 find 查找四、 head 与 tail 查看文件的头部尾部 一…

Nginx Rewrite

Nginx Rerite概述 Nginx Rerite基本操作 location与rewrite的区别 location 通过前缀或正则匹配用户的URL访问路径做页面跳转、访问控制和代理转发 rewrite 对用户的URL访问路径进行重写&#xff0c;再重定向跳转访问重写的路径 Nginx正则表达式 校验数字的表达式 数字&a…

家宽动态公网IP,使用docker+ddns 实现动态域名解析

官方地址&#xff1a;https://github.com/jeessy2/ddns-go 安装docker docker pull jeessy/ddns-godocker run -d --name ddns-go --restartalways --nethost -v /opt/ddns-go:/root jeessy/ddns-go然后访问ip端口 配置时注意如下

pytorch+YOLOv8-1

1.工具开发 2.idea配置pytorch环境 默认安装新版本torch pip install torch 3.pytorch验证 4. print(torch.cuda.is_available()) 输出结果为 False 说明我只能用cpu

有关RIPv2认证技术与网络安全综合实验

有关RIPv2认证技术与网络安全综合实验 实验拓扑如下&#xff1a; 理论知识&#xff1a; 比较 RIPv1&#xff1a;广播式通信&#xff0c;255.255.255.255&#xff1b;不支持认证&#xff0c;有类不带掩码&#xff1b;不支持VLSM和CIDR RIPV2&#xff1a;组播通信&#xff0c;22…

【Matplotlib作图-4.Distribution】50 Matplotlib Visualizations, Python实现,源码可复现

目录 04 Distribution 4.0 Prerequisite 4.1 连续变量的直方图(Histogram for Continuous Variable) 4.2 分类变量的直方图(Histogram for Categorical Variable) 4.3 Density Plot 4.4 Density Curves with Histogram 4.5 Joy Plot 4.6 Distributed Dot Plot 4.7 Box P…

详解和实现数据表格中的行数据合并功能

theme: smartblue 前言 需求场景&#xff1a; 在提供了数据查看和修改的表格视图中(如table、a-table等…)&#xff0c;允许用户自行选择多行数据&#xff0c;依据当前状态进行特定列数据的合并操作。选中的数据将统一显示为选中组的首条数据值。同时&#xff0c;页面会即时反…

插入排序(直接插入排序与希尔排序)----数据结构-排序①

1、插入排序 1.1 插入排序的基本思想 将待排序的元素按其数值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的元素插入完为止&#xff0c;就可以得到一个新的有序序列 。 实际上在我们的日常生活中&#xff0c;插入排序的应用是很广泛的&#xff0c;例如我…

二分查找算法介绍(边界值、循环条件、值的变化、二分查找的原理、异常处理)

一、二分查找法原理介绍 二分查找是经典的查找算法之一&#xff0c;其原理也非常简单。 对于已排序的数组&#xff08;假设是整型&#xff0c;如果非整型&#xff0c;如果有排序和大小比较的定义&#xff0c;也可以使用二分查找&#xff09;&#xff0c;我们每次判断中间值与目…

Golang TCP网络编程

文章目录 网络编程介绍TCP网络编程服务器监听客户端连接服务器服务端获取连接向连接中写入数据从连接中读取数据关闭连接/监听器 简易的TCP回声服务器效果展示服务端处理逻辑客户端处理逻辑 网络编程介绍 网络编程介绍 网络编程是指通过计算机网络实现程序间通信的一种编程技术…

三十五、openlayers官网示例Dynamic Data——在地图上加载动态数据形成动画效果

官网demo地址&#xff1a; Dynamic Data 初始化地图 const tileLayer new TileLayer({source: new OSM(),});const map new Map({layers: [tileLayer],target: "map",view: new View({center: [0, 0],zoom: 2,}),}); 创建了三个样式 const imageStyle new Style(…

黑马微服务实用篇知识梳理

1、微服务治理 1.1服务注册与发现Eureka和Nacos a、nacos和eureka&#xff0c;二者都支持服务注册与发现&#xff0c;但nacos还包括了动态配置管理、服务健康监测、动态路由等功能&#xff0c;是更全面的服务管理平台 b、eureka需要独立部署为服务并运行&#xff0c;需要自行搭…

师彼长技以助己(3)逻辑思维

师彼长技以助己&#xff08;3&#xff09;逻辑思维 前言 上一篇文章进行了工程思维和产品思维的测试&#xff0c;并介绍了几个比较重要的产品思维模型。接下来本篇介绍工程思维。&#xff08;注意产品思维并不代表产品经理思维&#xff0c;工程思维也并不代表工程师思维&…

【用户画像】用户偏好购物模型BP

一、前言 用户购物偏好模型BP&#xff08;Buyer Preferences Model&#xff09;旨在通过对用户购物行为的深入分析和建模&#xff0c;以量化用户对不同商品或服务的偏好程度。该模型对于电商平台、零售商以及其他涉及消费者决策的商业实体来说&#xff0c;具有重要的应用价值。…