强缓存与协商缓存、缓存失效的问题、缓存nginx配置、缓存存在哪里

前端缓存,这是一个老生常谈的话题,也常被作为前端面试的一个知识点。今天我们来总结一下。

分类:前端缓存分为强缓存和协商缓存两种。

强缓存

强缓存主要使用 Expires、Cache-Control 两个头字段,两者同时存在 Cache-Control 优先级更高。当命中强缓存的时候,客户端不会再求,直接从缓存中读取内容,并返回HTTP状态码200。

1、Expires 响应头,代表该资源的过期时间,是一个GMT 格式的标准时间。

当客户端请求服务器的时候,服务器会返回资源的同时还会带上响应头Expires,表示资源的过期具体时间,如果客户端在过期时间之前再次获取该资源,就不需要再请求我服务器了,可以直接在缓存里面拿。

使用Expires强缓存优点:

  • 在过期时间以内,为用户省了很多流量。
  • 减少了服务器重复读取磁盘文件的压力。

使用Expires强缓存缺点

  • 缓存过期以后,服务器不管文件有没有变化会再次请求服务器。
  • 缓存过期时间是一个具体的时间,这个时间依赖于客户端的时间,如果时间不准确或者被改动缓存也会随之受到影响。

2、Cache-Control:请求/响应头,缓存控制字段,精确控制缓存策略。

为了让强缓存更精确,HTTP1.1增加了Cache-Control字段。Cache-Control既能出现在请求头又能出现在响应头,其不同的值代表不同的意思,下面我们具体分析一下。

Cache-Control 服务端参数:

  • max-age: 在多少秒内有效,是一个相对时间,这样比Expires具体的时间就更精确了。
  • s-maxage: 就是用于表示 cache 服务器上(比如 cache CDN,缓存代理服务器)的缓存的有效时间的,并只对 public 缓存有效。
  • no-cache:不使用本地强缓存。需要使用缓存协商。
  • no-store:直接禁止浏览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。
  • public:可以被所有的用户缓存,包括终端用户和中间代理服务器。
  • private:只能被终端用户的浏览器缓存,不允许中间缓存代理进行缓存,默认的。

Cache-Control 客户端参数:

  • max-stale: 5 表示客户端到代理服务器上拿缓存的时候,即使代理缓存过期了也不要紧,只要过期时间在 5 秒之内,还是可以从代理中获取的。
  • min-fresh: 5 表示代理缓存需要一定的新鲜度,不要等到缓存刚好到期再拿,一定要在到期前 5 秒之前的时间拿,否则拿不到。
  • only-if-cached 这个字段加上后表示客户端只会接受代理缓存,而不会接受源服务器的响应。如果代理缓存无效,则直接返回 504(Gateway Timeout)。

协商缓存

协商缓存主要有四个头字段,它们两两组合配合使用,If-Modified-Since 和 Last-Modified 一组,Etag 和 If-None-Match 一组,当同时存在的时候会以 Etag 和 If-None-Match为主。当命中协商缓存的时候,服务器会返回HTTP状态码304,让客户端直接从本地缓存里面读取文件。

  • If-Modified-Since:请求头,资源最近修改时间,由浏览器告诉服务器。其实就是第一次访问服务端返回的Last-Modified的值。
  • Last-Modified:响应头,资源最近修改时间,由服务器告诉浏览器。
  • Etag:响应头,资源标识,由服务器告诉浏览器。
  • If-None-Match:请求头,缓存资源标识,由浏览器告诉服务器。其实就是第一次访问服务端返回的Etag的值。

1、If-Modified-Since 和 Last-Modified

当客户端第一次请求服务器的时候,服务端会返回一个Last-Modified响应头,该字段是一个标准时间。客户端请求服务器的时候会带上If-Modified-Since请求头字段,该字段的值就是服务器返回的Last-Modified的值。服务器接收到请求后会比较这两个值是否一样,一样就返回304,让客户端从缓存中读取,不一样就会返回新文件给客户端并更新Last-Modified响应头字段的值。

使用If-Modified-Since 和 Last-Modified的优点:当缓存有效时服务器不会返回文件给客户端,而是直接返回304状态码,让客户端从缓存中获取文件。大大节省了流量和带宽以及服务器的压力。

2、Etag 和 If-None-Match

为了解决文件修改时间只能精确到秒带来的问题,我们引入 Etag 响应头。Etag 是由文件修改时间与文件大小计算而成,只有当文件文件内容或修改时间变了Etag的值才会发生变化。

当客户端第一次请求服务器的时候,服务端会返回一个Etag响应头。客户端请求服务器的时候会带上If-None-Match请求头字段,该字段的值就是服务器返回的Etag的值。服务器接收到请求后会比较这两个值是否一样,一样就返回304,让客户端从缓存中读取,不一样就会返回新文件给客户端并更新Etag响应头字段的值。

使用Etag 和 If-None-Match的优点:

(1)当缓存有效时服务器不会返回文件给客户端,而是直接返回304状态码,让客户端从缓存中获取文件。大大节省了流量和带宽以及服务器的压力。

(2)并且解决了一秒内修改并读取的问题。

缓存失效问题

引入了缓存固然是好事,能大大提升响应速度以及减轻服务端的压力,但是也会出现一些问题,比如我们明明更新了系统版本,为什么客户端看到的还是老文件。在不同的时代有不同的解决方案。

1、老方案通过人工自己修改文件名或者在文件名后带上版本号、时间戳,这样客户端就会当新文件请求并使用,之前的强缓存就算在有效期内也会失效。

<script src="http://randy.js?version=1.1.1> </script>

2、新方案

在现在的构建阶段基本上都不需要人工操作了,都是使用构建工具比如Wbpack、Gulp、Grunt等构建工具自动构建。

比如在使用Webpack构建的时候,会根据文件名或文件内容自动计算hash值来给文件命名,当内容或文件名发生改变的时候,构建出来的文件名也一定会不一样,这样也解决了强缓存还在有效期内的问题。

3、扩展:pragma

pragma是旧产物,已经逐步抛弃,有些网站为了向下兼容还保留了这个字段。pragma的值为no-cache时,表示禁用缓存。优先级是 pragma > cache-control > expires。

缓存的配置

如果我们使用Nginx作为Web服务器,我们可以如下配置

location / {# 其它配置...if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {#非html缓存1个月add_header Cache-Control "public, max-age=2592000";}if ($request_filename ~* ^.*[.](html|htm)$) {#html文件使用协商缓存add_header Cache-Control "public, no-cache";}
}

缓存到底存在哪呢?

很多小伙伴会好奇,这缓存到底存在哪里了呢?

按缓存位置分类我们可以分为memory cache、disk cache、Service Worker三类,我们可以在 Chrome 的开发者工具中,Network -> Size 一列看到一个请求最终的处理方式:如果是大小 (多少 K, 多少 M 等) 就表示是网络请求,否则会列出 from memory cache、from disk cache、from ServiceWorker就表示命中了缓存。

1、memory cache 是内存中的缓存,(与之相对 disk cache 就是硬盘上的缓存)。按照操作系统的常理:先读内存,再读硬盘。

2、disk cache 也叫 HTTP cache,顾名思义是存储在硬盘上的缓存,因此它是持久存储的,是实际存在于文件系统中的。而且它允许相同的资源在跨会话,甚至跨站点的情况下使用,例如两个站点都使用了同一张图片。

3、上述的缓存策略以及缓存/读取/失效的动作都是由浏览器内部判断进行的,我们只能设置响应头的某些字段来告诉浏览器,而不能自己操作。

service work给予了我们另外一种更加灵活,可以直接的操作方式。我们可以从 Chrome 的 Application找到Service Workers。这个缓存是永久性的,即关闭 TAB 或者浏览器,下次打开依然还在(而 memory cache 不是)。

有两种情况会导致这个缓存中的资源被清除:手动调用 API cache.delete(resource) 或者容量超过限制,被浏览器全部清空。

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

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

相关文章

P2246 SAC#1 - Hello World(升级版)

网址如下&#xff1a; P2246 SAC#1 - Hello World&#xff08;升级版&#xff09; - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 刚开始是用递归做的&#xff0c;虽然用了哈希表优化&#xff0c;但是超时&#xff0c;只得了50 后面想到了一个新的算法&#xff0c;时间复杂度…

喝酒筛子小游戏集合源码微信小程序喝酒骰子程序带流量主版本源码酒桌玩筛子源码

2023新版酒桌小游戏喝酒小程序源码-&#xff08;流量主版本&#xff09; 修改增加了广告位 根据文档直接替换&#xff0c;原版本没有广告位 直接上传源码到开发者端即可 通过后改广告代码&#xff0c;然后关闭广告展示提交&#xff0c;通过后打开即可 无广告引流 流量主版…

3338 蓝桥杯 wyz的数组IV 简单

3338 蓝桥杯 wyz的数组IV 简单 //C风格解法1&#xff0c;通过率50% #include<bits/stdc.h>int main(){std::ios::sync_with_stdio(false);std::cin.tie(nullptr);std::cout.tie(nullptr);int n; std::cin >> n;int ans 0;std::vector<int>a(n);for(auto &am…

深入探究C语言中的常量指针与野指针概念及其应用

目录 常量指针&#xff08;Constant Pointers&#xff09; 1. 指向常量的指针 2. 常量指针 以下是一个使用const声明常量的示例&#xff1a; 通过修改被const修饰的a的地址&#xff0c;修改a的值 const位置的不同 指针的应用 利用指针打印数组的几种方式 野指针&#x…

必应聊天在当前安全搜索设置下不可用

使用Bing必应搜索引擎&#xff0c;想用必应AI聊天功能会提示&#xff1a;必应聊天在当前安全搜索设置下不可用。 当安全搜索设置设置为“严格”时&#xff0c;不支持必应聊天。 那么怎么修改安全搜索设置呢&#xff1f; 点击右上角的菜单图标&#xff0c;在下拉菜单里点击安全…

权威的健康养生与医学基础知识科普学习信息汇总

目录 1 关于健康与食物营养的权威网址1.1 世界卫生组织&#xff08;World Health Organization: WHO&#xff09;1.2 美国国家卫生研究院 (National Institutes of Health: NIH)1.3 澳大利亚政府健康门户 (Healthdirect)1.4 国际食品信息委员会 (International Food Informatio…

存量为王,持牌消金押注MGM获客

来源 | 镭射财经&#xff08;leishecaijing&#xff09; 存量&#xff0c;已成为消费金融公司运营的王道。 行业十年扩张&#xff0c;跑马圈地难以为继&#xff0c;取而代之的则是一场刀刃向内的运营变革。特别是近几年&#xff0c;消金公司不约而同地将目光聚焦到存量盘活&a…

【Midjourney】内容展示风格关键词

1.几何排列(Geometric) "Geometric" 是一个与几何有关的词汇&#xff0c;通常用于描述与形状、结构或空间几何特征相关的事物。这个词可以涉及数学、艺术、工程、计算机图形学等多个领域。 使用该关键词后&#xff0c;图片中的内容会以平面图形拼接的方式展示&#…

Apache Shiro <= 1.2.4反序列化漏洞攻击 CVE-2016-4437 已亲自复现

Apache Shiro < 1.2.4反序列化漏洞攻击 CVE-2016-4437 已亲自复现 漏洞名称漏洞描述影响版本 漏洞复现环境搭建漏洞利用 修复建议总结 漏洞名称 漏洞描述 在 1.2.5 之前的 Apache Shiro 中&#xff0c;当未为“记住我”功能配置密钥时&#xff0c;远程攻击者可以通过未指定…

Spring Retry机制详解

介绍 Spring框架提供了Spring Retry能让在项目工程中很方便的使用重试。 使用 1、引入pom <dependency><groupId>org.springframework.retry</groupId><artifactId>spring-retry</artifactId><version>1.3.2</version></depen…

obsidian阅读pdf和文献——与zotero连用

参考&#xff1a; 【基于Obsidian的pdf阅读、标注&#xff0c;构建笔记思维导图&#xff0c;实现笔记标签化、碎片化&#xff0c;便于检索和跳转】 工作流&#xff1a;如何在Obsidian中阅读PDF - Eleven的文章 - 知乎 https://zhuanlan.zhihu.com/p/409627700 操作步骤 基于O…

武忠祥2025高等数学,基础阶段的百度网盘+视频及PDF

考研数学武忠祥基础主要学习以下几个方面的内容&#xff1a; 1.微积分:主要包括极限、连续、导数、积分等概念&#xff0c;以及它们的基本性质和运算方法。 2.线性代数:主要包括向量、向量空间、线性方程组、矩阵、行列式、特征值和特征向量等概念&#xff0c;以及它们的基本…

VASP安装教程

目录 前言 正文 1. 准备好安装包 VASP 5.4.4 2. VASP安装前的准备 Install GNU Compiler 3. VASP安装 提取并修补 修改文件 编译&#xff0c;构建VASP的std、gam和ncl 修改路径 运行vasp 前言 接上一章&#xff0c;今天我们来讲VASP的安装。 正文 1. 准备好安装…

RK3568平台 of 操作函数获取设备树节点

一.of函数概述 Linux内核给我们提供了一系列的函数来获取设备树中的节点或者属性信息&#xff0c;这一系列的函数都有一个统一的前缀 ”of“ &#xff0c; 所以在很多资料里面也被叫做OF函数。 Linux 内核使用device_node 结构体来描述一个节点&#xff0c;此结构体定义在文件…

设计模式三(原型模式)

在开发过程中&#xff0c;创建多个数据相同的对象&#xff0c;每次new都开销比较大&#xff0c;在这里可以使用对象克隆&#xff0c;以先创建的原型对象为模板进行对象的复制。这种模式是实现了一个原型接口&#xff0c;该接口用于创建当前对象的克隆。当直接创建对象的代价比较…

Python初学者学习记录——python基础综合案例:数据可视化——折线图可视化

一、案例介绍 效果一&#xff1a;2020年印美日新冠累计确诊人数 效果二&#xff1a;全国疫情地图可视化 效果三&#xff1a;动态GDP增长图 数据来源&#xff1a; 本案例数据全部来自《百度疫情实时大数据报告》&#xff0c;及公开的全球各国GDP数据 使用的技术&#xff1a; E…

C++爱好者的科目四易错点总结

科目四易错点总结 在科目四考试中&#xff0c;一部分内容是可以通过刷题快速掌握的&#xff0c;一部分内容缺因易混淆而降低我们的准确率&#xff0c;本文主要对后者进行总结&#xff0c;期待大家补充与指正。 注&#xff1a; 本文不是全部的知识点总结处 本文不是权威机构 本文…

张维迎《博弈与社会》笔记(3)导论:一些经济学的基础知识

这篇的主要内容介绍了经济学的基础知识吧。 经济学、社会学、心理学的区别 经济学与社会学的区别与共同点 经济学一般是从个人的行为出发解释社会现象&#xff08;from micro to macro&#xff09;。社会学的传统方法则是从社会的角度来解释个人的行为&#xff08;from macro…

硕士毕业论文如何体现自己的工作量

一、工作量是什么 工作量就是你在科研过程中做的所有工作量的体现&#xff0c;包括你对背景的调查&#xff0c;对问题的发现&#xff0c;你做的实验&#xff0c;提出的创新点。 notice&#xff1a;任何别人做的实验&#xff0c;提出的模型&#xff0c;都不能算是你的工作量。…

uniapp+vue3+ts --微信小程序tab导航可以上下滚动选中选项组件代码

uniappvue3ts --微信小程序tab导航可以上下滚动选中选项组件代码 废话不多说&#xff0c;直接上代码。 组件代码&#xff1a; <template><view class"scroll-tabs-container"><view class"radiusz bg-white pt-[10rpx] z-[999]" :class&…