什么是浏览器缓存

浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。

浏览器缓存的优点有：

1.减少了冗余的数据传输，节省了网费

2.减少了服务器的负担，大大提升了网站的性能

3.加快了客户端加载网页的速度

通过复用以前获取的资源，可以显着提高网站和应用程序的性能。Web 缓存减少了等待时间和网络流量，因此减少了显示资源表示形式所需的时间。通过使用 HTTP缓存，变得更加响应性。
浏览器第一次请求时：

浏览器后续在进行请求时：

浏览器缓存分为强缓存（本地缓存）和协商缓存（对比缓存）

1.强缓存：浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信；在chrome控制台的network选项中可以看到该请求返回200的状态码;

上面是打开浏览器后直接访问的截图，我矩形圈起来的那块也就是 size 部分显示的都是 from disk cached或者from memory cache ，说明这些资源命中了强缓存，强缓存的状态码都是 200。
为什么有内存缓存和硬盘缓存呢，怎么区分？这涉及到内存交换的知识了

我们都知道，虽然在运行速度上硬盘不如内存，但在容量上内存是无法与硬盘相提并论的。当运行一个程序需要大量数据、占用大量内存时，内存就会被“塞满”，并将那些暂时不用的数据放到硬盘中，而这些数据所占的空间就是虚拟内存。现在我们也明白为什么pagefile.sys的大小会经常变化了。
内存在计算机中的作用很大，电脑中所有运行的程序都需要经过内存来执行，如果执行的程序分配的内存的总量超过了内存大小，就会导致内存消耗殆尽。为了解决这个问题，Windows中运用了虚拟内存技术，即拿出一部分硬盘空间来充当内存使用，当内存占用完时，电脑就会自动调用硬盘来充当内存，以缓解内存的紧张。
举个例子来说，压缩程序在压缩时有时候需要读取文件的很大一部分并保存在内存中作反复的搜索。假设内存大小是128MB，而要压缩的文件有 200MB，且压缩软件需要保存在内存中的大小也是 200MB，那么这时操作系统就要权衡压缩程序和系统中的其他程序，把多出来的那一部分数据放进交换文件。

也就是说在超过VM设置的内存大小后将进行内存交换，跟硬盘内存交换。

2.协商缓存：

如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来比对结果是否协商缓存命中；若命中，则服务器返回新的响应header信息（返回304状态码）更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容，

	获取资源形式	状态码	发送请求到服务器
强缓存	从缓存取	200（from cache）	否，直接从缓存取
协商缓存	从缓存取	304（not modified）	是，正如其名，通过服务器来告知缓存是否可用

强缓存参数

Pragma，是HTTP/1.0标准中定义的一个header属性，请求中包含Pragma的效果跟在头信息中定义Cache-Control: no-cache相同，但是HTTP的响应头没有明确定义这个属性，所以它不能拿来完全替代HTTP/1.1中定义的Cache-control头。通常定义Pragma以向后兼容基于HTTP/1.0的客户端。
expires，这是http1.0时的规范；它的值为一个绝对时间的GMT格式的时间字符串，如Mon, 10 Jun 2015 21:31:12 GMT，如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取资源
cache-control：max-age=number，这是http1.1时出现的header信息，主要是利用该字段的max-age值来进行判断，它是一个相对值；资源第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行；cache-control除了该字段外，还有下面几个比较常用的设置值：
- no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
- no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
- public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
- private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
- must-revalidate，指令，那就意味着缓存在考虑使用一个陈旧的资源时，必须先验证它的状态，已过期的缓存将不被使用。
```
Cache-Control: must-revalidate
```

　　注意：如果cache-control与expires同时存在的话，cache-control的优先级高于expires

Pragma > cache-control > expires
Cookie max-age与expires 的区别请看下面的文章https://www.softwhy.com/article-10433-1.html

协商缓存参数

协商缓存都是由服务器来确定缓存资源是否可用的，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问，这主要涉及到下面两组header字段，这两组搭档都是成对出现的，即第一次请求的响应头带上某个字段（Last-Modified或者Etag），则后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match），若响应头没有Last-Modified或者Etag字段，则请求头也不会有对应的字段。

Last-Modified/If-Modified-Since
二者的值都是GMT格式的时间字符串，具体过程：
- 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间
- 浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值
- 服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header
- 浏览器收到304的响应后，就会从缓存中加载资源
- 如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值
Etag/If-None-Match
这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。

参考文献

参考一：http强制缓存和协议缓存https://www.cnblogs.com/guchengnan/p/12146136.html
参考二：强制缓存和协议缓存的区别https://blog.csdn.net/wsymcxy/article/details/82154397#comments

强制缓存和协商缓存的区别相关推荐

前端协商缓存强缓存如何使用_强制缓存和协商缓存有什么区别
1.背景介绍做前端有两个比较令人头痛的事,一个是命名,另一个就是缓存了.HTTP协议提供了非常强大的缓存机制, 了解这些缓存机制,对提高网站的性能非常有帮助. 2.知识剖析什么是浏览器缓存浏览器 ...
计网 - HTTP 协议_强制缓存和协商缓存的区别
文章目录 Pre 请求响应和长连接 HTTP 2.0 的多路复用 HTTP 方法和 RestFul 架构 HTTP 方法缓存强制缓存协商缓存总结 Pre 超文本传输协议(HyperText T ...
简析强制缓存和协商缓存
零.目录背景介绍 http 缓存机制使用小结一. 背景介绍浏览器和服务器进行交互的过程, 时间开销的瓶颈往往出现在数据的传输的过程之中. 这个场景类似介于 A城到 B城之间只有一座 &qu ...
浏览器缓存机制（强制缓存，协商缓存）
浏览器缓存机制(强制缓存,协商缓存) 1. 强制缓存 (1)Expires (2)Cache-Control 2. 协商缓存 (1)Last-Modified / If-Modified-Since ...
web缓存（强制缓存、协商缓存、CDN缓存）
文章目录一.HTTP缓存 1.1 强缓存 1. 强制缓存的header属性(Pragma/Cache-Control/Expires) cache-control 的常用选项 1.2 协商缓存(对比 ...
强缓存和协商缓存区别和过程
1.强缓存(本地缓存) 1.1. 概念不用跟服务器进行通信,直接使用本地缓存的资源, 1.2. 相关header字段 expires ------ HTTP1.0使用的expires 一个未来时间, ...
http缓存中，强缓存和协商缓存的区别？
答:浏览器缓存的作⽤是什么缓存可以减少冗余的数据传输.节省了⽹络带宽,从⽽更快的加载⻚⾯. 缓存降低了服务器的要求,从⽽服务器更快的响应缓存的资源⽂件到什么地⽅去了呢? 那么⾸先来看下 memor ...
浏览器缓存——强缓存、协商缓存
目录浏览器缓存:强缓存.协商缓存 #强缓存 #协商缓存 #补充 #拓展浏览器缓存:强缓存.协商缓存区别:强缓存不向服务器发送请求,协商缓存会发送请求至服务器相同点:若命中,都直接从浏览器缓存加 ...
浏览器Disk Cache磁盘缓存及其协商缓存、及原生App和浏览器实现缓存的差异
浏览器Disk Cache磁盘缓存及其协商缓存.及原生App和浏览器实现缓存的差异目录浏览器Disk Cache磁盘缓存及其协商缓存.及原生App和浏览器实现缓存的差异 1.Memory Cach ...

强制缓存和协商缓存的区别

什么是浏览器缓存

浏览器缓存分为强缓存（本地缓存）和协商缓存（对比缓存）

强缓存参数

协商缓存参数

强制缓存和协商缓存的区别相关推荐

最新文章

热门文章