js 浏览器缓存机制

article/2025/10/4 19:13:22

什么是浏览器缓存

Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本。缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页。浏览器和网站服务器是根据缓存机制进行缓存的

非HTTP协议定义的缓存机制

浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签

<meta http-equiv="Pragma" content="no-cache">

上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。使用上很简单,但只有部分浏览器可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。

缓存流程图

利用浏览器缓存的过程:


HTTP缓存机制

根据Response Header里面的Cache-Control和Expires这两个属性,当两个都存在时,Cache-Control优先级较高。

Cache-Control

该字段用于控制浏览器在什么情况下直接使用本地缓存而不向服务器发送请求。一般具有以下值:

Public:指示响应可被任何缓存区缓存。

Private:指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。

no-cache:指示请求或响应消息不能缓存。

no-store:用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age:指示浏览器可以接收生存期不大于指定时间(以秒为单位)的响应。

min-fresh:指示浏览器可以接收响应时间小于当前时间加上指定时间的响应。

max-stale:指示浏览器可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么浏览器可以接收超出超时期指定值之内的响应消息。

Expires(石器时代的缓存机制)

Expires 头部字段提供一个日期和时间,在该日期前的所有对该资源的请求都会直接使用浏览器缓存而不用向服务器请求。

例如:Expires: Sun, 08 Nov 2009 03:37:26 GMT

注意:

1. cache-control max-age 和 max-stale将覆盖Expires header。

2. 使用Expires存在服务器端时间和浏览器时间不一致的问题。

3. 另外有人说Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1。


服务端如何判断缓存已失效

服务端通过If-Modified-Since(Last-Modified)和If-None-Match(Etag)这两个属性的值来判断缓存是否失效的。

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。

Last-Modified:响应资源的最后修改时间。

If-Modified-Since:当缓存过期时,发现资源具有Last-Modified声明,则在请求头带上If-Modified-Since(值就是Last-Modified)。服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应HTTP 200整片资源内容(写在响应消息包体内);若最后修改时间较旧,说明资源无新修改,则响应HTTP 304,告知浏览器继续使用所保存的cache。

Etag/If-None-Match

Etag/If-None-Match也要配合Cache-Control使用。

Etag:资源在服务器的唯一标识(生成规则由服务器决定)。Apache中,ETag的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的

If-None-Match:当缓存过期时,发现资源具有Etage声明,则在请求头带上If-None-Match(值就是Etag)。服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,决定返回200或304。

为什么有了Last-Modified还要Etag?

Etag的出现主要是为了解决几个Last-Modified比较难解决的问题:

1. Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间。

2. 如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存。

3. 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形。

200 OK(from cache)与304 Not Modified的区别

200 OK( from cache )不向服务器发送请求,直接使用本地缓存文件。304 Not Modified则向服务器询问,若服务器认为浏览器的缓存版本还可用,那么便会返回304。

200 OK( from cache ) 出现操作:

1.地址栏回车

2.页面链接跳转

3.前进、后退

304 Not Modified 出现操作:

1.F5刷新

2.新开窗口

缓存的不同来源 

from disk cache:从磁盘中获取缓存资源,等待下次访问时不需要重新下载资源,而直接从磁盘中获取。它的直接操作对象为CurlCacheManager。

from memory cache:从内存中获取资源,等待下次访问时不需要重新下载资源,而直接从内存中获取。

两者区别:当退出进程时,内存中的数据会被清空,而磁盘的数据不会,所以,当下次再进入该进程时,该进程仍可以从diskCache中获得数据,而memoryCache则不行。


不能被缓存的请求

当然并不是所有请求都能被缓存。

无法被浏览器缓存的请求:

  1. HTTP信息头中包含Cache-Control:no-cache,pragma:no-cache(HTTP1.0),或Cache-Control:max-age=0等告诉浏览器不用缓存的请求
  2. 需要根据Cookie,认证信息等决定输入内容的动态请求是不能被缓存的
  3. 经过HTTPS安全加密的请求
  4. POST请求无法被缓存
  5. HTTP响应头中不包含Last-Modified/Etag,也不包含Cache-Control/Expires的请求无法被缓存


http://chatgpt.dhexx.cn/article/kV0FJDPG.shtml

相关文章

哈希表和红黑树

哈希表 哈希表顾名思义是一张表&#xff0c;可以用它来存储键值对这种对应的数据&#xff0c;大家都知道&#xff0c;哈希表的查找速度很快&#xff0c;时间复杂度伪O(1)&#xff0c;那么它的查找速度为什么很快呢&#xff1f;   实际上&#xff0c;哈希表将键值变为数组的下…

3.1 哈希算法

哈希算法在区块链系统中的应用很广泛&#xff1a;比特币使用哈希算法通过公钥计算出了钱包地址、区块头以及交易事务的哈希值&#xff0c;梅克尔树结构本身就是一棵哈希树&#xff0c;就连 挖矿算法都是使用的哈希值难度匹配&#xff1b;以太坊中的挖矿计算也使用了哈希算法&am…

高效的搜索方式:哈希

前言 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经过关键码的多次比较。顺序结构查找时间复杂度为O(N)&#xff0c;平衡树查找时间复杂度为O(logN)&#xff0c;搜索的效率取决于搜索过程中…

默克尔树入门

目录 什么是默克尔树构建默克尔树的过程默克尔树验证的原理参考 什么是默克尔树 默克尔树&#xff08;Merkle tree&#xff09;是一种数据结构&#xff0c;以它的提出者默克尔命名&#xff0c;根据默克尔树的性质也可以叫哈希树&#xff0c;是一种典型的二叉树。 默克尔树由根…

java merkle树,使用Merkle树检测数据不一致(翻译)

背景 Cassandra的逆熵功能使用Merkle树来检测副本之间的数据不一致。 定义 Merkle树是一种哈希树&#xff0c;其中的叶子包含各个数据块的哈希值&#xff0c;父节点包含其各自的子节点的哈希值。它提供了一种有效的方法来查找副本上存储的数据块中的差异&#xff0c;并减少了传…

区块链 — 默克尔树

文章目录 默克尔树生成过程应用场景在区块链中的应用 默克尔树 默克尔树&#xff08;又叫哈希树&#xff09;是一种典型的二叉树结构&#xff0c;有一个根节点、一组中间节点和一组叶节点组成。默克尔树最早由 Merkle Ralf 在 1980 年提出&#xff0c;曾广泛用于文件系统和P2P…

哈希算法的原理以及代码实现

哈希函数&#xff1a; 简单来说就是把红框内的数字根据 一定规律 存放到下方白色的数组中 &#xff08;称为哈希表&#xff09; 这里它的一定规律是 取余法 H&#xff08;key&#xff09;key%p &#xff08;还有其他方法&#xff0c;这里采用的是取余法&#xff09;,p为这个…

二、哈希算法和Merkle Tree

章节系列目录&#xff1a;点击跳转 文章目录 哈希算法哈希函数的定义可靠哈希函数需满足的要求哈希函数的主要作用哈希实际例子 Merkle Tree默克尔树完整性校验的方法哈希列表 Hash ListMerkle Tree 哈希树总结 哈希算法 哈希函数的定义 哈希函数&#xff1a;给一个任意大小的…

Android安全启动学习(四):device-mapper-verity (dm-verity)和哈希树

上一篇说AVB内存装不下的较大分区&#xff08;如文件系统&#xff09;可能会使用哈希树&#xff0c;还提到了dm-verity。这篇来看看这两个是啥&#xff1f; dm-verity 1、dm-verity 1、能不能将多个硬盘&#xff0c;映射成一个逻辑的硬盘&#xff0c;那样我们程序就不用关心复…

哈希表与树的介绍

前言 该篇文章&#xff0c;主要带我们认识什么哈希表和树&#xff0c;为我们在研究各个数据结构的实现及扩展算法&#xff0c;有个基本的认识。 哈希表 特点 数组 &#xff1a;寻址容易 &#xff1b;数据连续存储空间链表&#xff1a;插入与删除容易 &#xff1b;放在堆内…

简单哈希树

哈希树 在各种介绍里的都比较抽象&#xff0c;其实没有那么难&#xff0c;这里进行一个最简单的说明。 在将一个数进行哈希的时候&#xff0c;我曾经写过关于哈希的这么些东西&#xff1a;对于数&#xff0c;当一个质数不够用的时候&#xff0c;可以加上第二个质数&#xff0c;…

查找——图文翔解HashTree(哈希树)

引 在各种数据结构&#xff08;线性表、树等&#xff09;中&#xff0c;记录在结构中的相对位置是随机的。因此在机构中查找记录的时需要进行一系列和关键字的比较。这一类的查找方法建立在“比较”的基础上。查找的效率依赖于查找过程中所进行的比较次数。 之前我们介绍的各种…

图文详解哈希树-Merkle Tree(默克尔树)算法解析

2019独角兽企业重金招聘Python工程师标准>>> Merkle Tree概念 Merkle Tree,通常也被称作Hash Tree,顾名思义,就是存储hash值的一棵树。Merkle树的叶子是数据块(例如,文件或者文件的集合)的hash值。非叶节点是其对应子节点串联字符串的hash。[1] 1、Hash Hash是…

图文详解HashTree(哈希树)

引 在各种数据结构&#xff08;线性表、树等&#xff09;中&#xff0c;记录在结构中的相对位置是随机的。因此在机构中查找记录的时需要进行一系列和关键字的比较。这一类的查找方法建立在“比较”的基础上。查找的效率依赖于查找过程中所进行的比较次数。 之前我们介绍的各…

哈希树HashTree(trie树)

引 在各种数据结构&#xff08;线性表、树等&#xff09;中&#xff0c;记录在结构中的相对位置是随机的。因此在机构中查找记录的时需要进行一系列和关键字的比较。这一类的查找方法建立在“比较”的基础上。查找的效率依赖于查找过程中所进行的比较次数。 之前我们介绍的各种…

哈希(Hash)和哈希树(Merkle tree)

哈希函数&#xff08;英语&#xff1a;Hash function&#xff09;又称散列函数&#xff0c;是一种从任何一种数据中创建小的数字“指纹”的方法。散列函数把消息或数据压缩成摘要&#xff0c;使得数据量变小&#xff0c;将数据的格式固定下来。该函数将数据打乱混合&#xff0c…

哈希树总结-java版

目录 哈希树的理论基础 质数分辨定律 余数分辨定理 哈希树简介 查找 删除 优点 缺点 哈希树的java实现 节点 哈希树 哈希树的应用 哈希树的理论基础 质数分辨定律 这个定理可以简单的表述为&#xff1a;n个不同的质数可以“分辨”的连续整数的个数和他们的乘积相等…

哈希树的python实现

一、问题的背景 给定一组商品购买信息&#xff0c;找到商品购买中频繁出现的商品集。比如说&#xff0c;我们有如下的商品交易信息&#xff1a; 市场购物信息 TipItems1Bread, Milk2Bread, Diaper, Beer, Egg3Milk, Diaper, Beer, Coke4Bread, Milk, Diaper, Beer5Bread, Milk,…

哈希列表、哈希链、哈希树

通过哈希算法检验大量数据&#xff08;比如大量文件&#xff09;的一致性时&#xff0c;常见的存储方案&#xff1a; 哈希列表&#xff08;Hash List&#xff09; 原理&#xff1a; 计算每个数据的哈希值&#xff0c;保存为一个列表。记录该列表的哈希值&#xff0c;用于检验…