❶ 关于浏览器缓存
首先浏览器缓存分为 内存缓存 和 文件缓存 。
内存缓存是浏览器自己控制的，不受 Cache-Control 影响，跟计算机内存空间大小有关，并且关闭浏览器就会消失。
文件缓存 就是我们常说的浏览器缓存。
文件缓存分为2种： 强制缓存 和 协商缓存 。
强制缓存 就是通过Header上配置Cache-Control:public,max-age=300这种形式实现的，Cache-Control可以客户端在请求Header配置，也可以服务端在响应Header配置。
强制缓存 比较适合用在变化频率比较低的文件上，比如图片，js，css都可以，通常我们都使用这种缓存再配合文件hash后缀实现缓存文件的即时更新。
协商缓存 是一种服务端控制文件缓存的策略，机制是服务端会根据最新更改时间和文件标识判断响应的时候是否要返回内容。虽然每次都会向服务端发起请求，但是如果服务端确定缓存，会返回很少响应内容。
这种方式比较适合需要频繁更新的文件，需要配合Cache-Control:no-cache阻止强制缓存。另外html不要配置强制缓存，通常我们请求的html文件地址不会加hash。
协商缓存 主要通过2组Header标签让客户端与服务端确认来达成：首先服务端在响应的时候会加上 Last-Modified 和 Etag ，前者表示文件最后更新时间，后者表示文件唯一标识；然后客户端再次请求的时候会带上 If-Modified-Since 和 If-None-Match ，值分别跟服务端的 Last-Modified 和 Etag 一致。
参考：
浏览器缓存
❷ ☆前端优化：浏览器缓存技术介绍
在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。 其中提高网页反应速度的一个方式就是使用缓存 。缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。
一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
所以，缓存技术是无数WEB开发从业人员在工作过程中不可避免的一大问题。 在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度 。了解浏览器的缓存命中原理，是开发WEB应用的基础，本文着眼于此，学习浏览器缓存的相关知识，总结缓存避免和缓存管理的方法，结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。
在实际WEB开发过程中，缓存技术会涉及到不同层、不同端，比如：用户层、系统层、代理层、前端、后端、服务端等， 每一层的缓存目标都是一致的，就是尽快返回请求数据、减少延迟 ，但每层使用的技术实现是各有不同，面对不同层、不同端的优劣，选用不同的技术来提升系统响应效率。所以，我们首先看下各层的缓存都有哪些技术，都缓存哪些数据，从整体上，对WEB的缓存技术进行了解，如下图所示：
本篇文章重点讲的就是上面红色框部分缓存内容。
当浏览器请求一个网站的时候，会加载各种各样的资源，比如：HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。
那么如何知晓浏览器是读取了缓存还是直接请求服务器？如下图网站来做个示例：
第一次打开该网站后，如果再次刷新页面。会发现浏览器加载的众多资源中，有一部分size有具体数值，然而还有一部分请求，比如图片、css和js等文件并没有显示文件大小，而是显示了 from dis cache 或者 from memory cache 字样。这就说明了，该资源直接从本地硬盘或者浏览器内存读取，而并没有请求服务器。
浏览器启用缓存至少有两点显而易见的好处： （1）减少页面加载时间；（2）减少服务器负载；
浏览器是否使用缓存、缓存多久，是由服务器控制的 。准确来说，当浏览器请求一个网页（或者其他资源）时， 服务器发回的响应的“响应头”部分的某些字段指明了有关缓存的关键信息 。下面看下，HTTP报文中与缓存相关的首部字段：
根据上面四种类型的首部字段不同使用策略， 浏览器中缓存可分为强缓存和协商缓存 ：
当浏览器对某个资源的请求命中了强缓存时， 返回的HTTP状态为200 ，在chrome的开发者工具的network里面 size会显示为from cache ，比如：京东的首页里就有很多静态资源配置了强缓存，用chrome打开几次，再用f12查看network，可以看到有不少请求就是从缓存中加载的：
Expires是HTTP 1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示 ，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT，包含了Expires头标签的文件，就说明浏览器对于该文件缓存具有非常大的控制权。
例如，一个文件的Expires值是2020年的1月1日，那么就代表，在2020年1月1日之前，浏览器都可以直接使用该文件的本地缓存文件，而不必去服务器再次请求该文件，哪怕服务器文件发生了变化。
所以， Expires是优化中最理想的情况，因为它根本不会产生请求 ，所以后端也就无需考虑查询快慢。它的缓存原理，如下：
Expires是较老的强缓存管理header， 由于它是服务器返回的一个绝对时间 ，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题， 比如：随意修改下客户端时间，就能影响缓存命中的结果 。所以在HTTP 1.1的时候，提出了一个新的header， 就是Cache-Control，这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示 ，如：Cache-Control:max-age=315360000，它的缓存原理是：
Cache-Control描述的是一个相对时间 ，在进行缓存命中的时候， 都是利用客户端时间进行判断 ，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。
这两个header可以只启用一个，也可以同时启用， 当response header中，Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires ：
此外，还可以为 Cache-Control 指定 public 或 private 标记。 如果使用 private，则表示该资源仅仅属于发出请求的最终用户，这将禁止中间服务器（如代理服务器）缓存此类资源 。对于包含用户个人信息的文件（如一个包含用户名的 HTML 文档），可以设置 private，一方面由于这些缓存对其他用户来说没有任何意义，另一方面用户可能不希望相关文件储存在不受信任的服务器上。需要指出的是，private 并不会使得缓存更加安全，它同样会传给中间服务器（如果网站对于传输的安全性要求很高，应该使用传输层安全措施）。 对于 public，则允许所有服务器缓存该资源 。通常情况下，对于所有人都可以访问的资源（例如网站的 logo、图片、脚本等）， Cache-Control 默认设为 public 是合理的 。
当浏览器对某个资源的请求没有命中强缓存， 就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串 ，比如你打开京东的首页，按f12打开开发者工具，再按f5刷新页面，查看network，可以看到有不少请求就是命中了协商缓存的：
查看单个请求的Response Header， 也能看到304的状态码和Not Modified的字符串，只要看到这个就可说明这个资源是命中了协商缓存，然后从客户端缓存中加载的 ，而不是服务器最新的资源：
【Last-Modified，If-Modified-Since】的控制缓存的原理，如下 ：
【Last-Modified，If-Modified-Since】都是根据服务器时间返回的header，一般来说， 在没有调整服务器时间和篡改客户端缓存的情况下，这两个header配合起来管理协商缓存是非常可靠的，但是有时候也会服务器上资源其实有变化，但是最后修改时间却没有变化的情况 ，而这种问题又很不容易被定位出来，而当这种情况出现的时候，就会影响协商缓存的可靠性。 所以就有了另外一对header来管理协商缓存，这对header就是【ETag、If-None-Match】 。它们的缓存管理的方式是：
Etag和Last-Modified非常相似，都是用来判断一个参数，从而决定是否启用缓存。 但是ETag相对于Last-Modified也有其优势，可以更加准确的判断文件内容是否被修改 ，从而在实际操作中实用程度也更高。
协商缓存跟强缓存不一样，强缓存不发请求到服务器， 所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器 ，所以资源是否更新，服务器肯定知道。大部分web服务器都默认开启协商缓存，而且是同时启用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】，比如apache:
如果没有协商缓存，每个到服务器的请求，就都得返回资源内容，这样服务器的性能会极差。
【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】一般都是同时启用，这是为了处理Last-Modified不可靠的情况。有一种场景需要注意：
比如，京东页面的资源请求，返回的repsonse header就只有Last-Modified，没有ETag：
协商缓存需要配合强缓存使用，上面这个截图中，除了Last-Modified这个header，还有强缓存的相关header， 因为如果不启用强缓存的话，协商缓存根本没有意义 。
如果资源已经被浏览器缓存下来，在缓存失效之前，再次请求时，默认会先检查是否命中强缓存，如果强缓存命中则直接读取缓存，如果强缓存没有命中则发请求到服务器检查是否命中协商缓存，如果协商缓存命中，则告诉浏览器还是可以从缓存读取，否则才从服务器返回最新的资源。其浏览器判断缓存的详细流程图，如下：
❸ 前端浏览器缓存机制
在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。
1： 为什么需要缓存？
a：缓存可以减少用户等待时间，提升用户体验
b：减少网络带宽消耗
c：降低服务器压力
Note：缓存使用不当，也会造成‘脏数据’问题
2：常见的缓存类型
强缓存 -
Expires服务器端设置，表示该资源的过期时间，会有弊端，客户端时间和服务器时间不一致的问题。
Cache-Control：max-age表示缓存资源的最大生命周期，单位是秒
所以Expires 结合 Cache-Control 一起使用，大型网站中一般比较适用
协商缓存-
Last-Modified：值为资源的最后更新时间，随服务器response返回
If-Modified-Since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有，则命中协商缓存
Etag：表示资源内容的唯一标识，即资源的消息摘要
If-None-Match：服务器通过比较请求头中的If-None-Match与当前资源的Etag是否一致来判断资源是否在两次请求期间有过修改
3：缓存流程图示：
a：浏览器会先检测强缓存类型（Cache-Control 或者 Expires）是否有效；命中直接浏览器本地获取缓存资源
b：未命中。服务器会根据请求头Request Header验证这个资源是否命中协商缓存，称之为HTTP二次验证，命中，服务器返回请求，但返回资源，而是告诉客户端直接中直接从浏览器缓存中获取
Note：
1.强缓存不会发生请求，协商缓存存在服务器请求
2.当协商缓存也未命中时，则服务器会将资源发送到客户端
3.F5刷新页面，会跳过强缓存
4.Ctrl+F5刷新页面，跳过强缓存和协商缓存
5.不会缓存的情况
HTTPS POST请求 根据Cookie获取认证信息 Request Header Cache-Control：no-cache， max-age=0
6.小故事大道理
上文对整个概念做了阐述，还是不够形象，我们来通过几个小故事生动理解一下：
故事一：Last-Modified
浏览器：Hi，我需要 jartto.min.js 这个文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之后修改过的，请发给我。
服务器：（检查文件的修改时间）
服务器：Oh，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。
浏览器：太好了，那我就显示给用户了。
故事二：ETag
浏览器：Hi，我需要 jartto.css 这个文件，有没有不匹配 3c61f-1c1-2aecb436 这个串的
服务器：（检查 ETag…）
服务器：Hey，我这里的版本也是 3c61f-1c1-2aecb436，你已经是最新的版本了
浏览器：好，那就可以使用本地缓存了
❹ 前端HTTP缓存
在面试的时候总是遇到缓存相关问题，回答总是停留缓存就是从浏览器中获取，不向服务器发送请求，回答的不让面试官满意，索性抽点时间整理一下前端相关的缓存，希望下次回答的时候能够多讲点。
前端缓存分为 强缓存 和 协商缓存 ，强缓存就是在缓存未失效时，不在请求服务端，协商缓存就是去跟服务器比较是否需要重新获取资源 。
强缓存分为两种， Cache-control 和 Expires ， Expires 是HTTP1.0的东西，它的值是一个格林时间，比如 Expires: Wed, 21 Oct 2015 07:28:00 GMT ，由于服务器端和浏览器端的时间差异问题，浏览器比服务器时间快，会导致缓存失效。 Cache-control 是HTTP1.1时代的新东西，设置的是一个相对时间， Cache-Control:public, max-age=31536000 ，在31536000秒后才缓存才失效， Cache-control 有很多取值。
强缓存在缓存失效内，不会从原始服务器获取新的数据，假如在缓存时段内服务器有资源更新，会导致资源获取不及时。
协商缓存有两组报文
❺ 浏览器缓存机制简单概括和分析
对于访问的页面和请求，为了缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷，浏览器和服务器都有可能会对请求资源进行缓存，接下来的文章就简单介绍和分析浏览器的缓存机制。
深入理解浏览器的缓存机制： https://www.jianshu.com/p/54cc04190252
这篇文章已经有详细的讲解，这里就概括一下：
以首页的请求为例：
1、强制缓存策略(Expires和Cache-Control) ：当浏览器发起http请求的时候，如果配置了缓存策略且缓存在有效期内，会直接使用浏览器缓存。 不使用强制缓存 （ Cache-Control=no-chache， 或者 max-age=0 ）
（1）、图中请求服务器：是 max-age=0 的情况，浏览器直接请求服务器资源，而不是用本地缓存
（2）、图中磁盘缓存和内存缓存：就是浏览器使用了本地缓存而不再请求服务器资源
2、协商缓存策略（Last-Modified和If-Modified-Since， ETag和If-None-Match）： 当浏览器发起http请求的时候，如果 强制缓存策略 失效，或者者禁用了强制缓存，这时候会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回304和空的响应体，直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，于是返回新的资源文件和200。
不使用协商缓存 （ Cache-Control=no-store ），这个参数同时也会 禁用强制缓存。
（1）、服务器资源返回无更新，浏览器使用上次请求的资源
（2）、服务器资源有更新，返回200并返回最新的资源
3、不使用缓存策略（Cache-Control=no-store）： 所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存。当response head 设置了no-store，浏览器不会对返回的资源做缓存，每次请求都是直接请求服务器。这可以保证浏览器每次都能拿最新的资源，即使资源对比上次请求没有任何更新，但同时也降低了页面的响应速度，和增加了网络的IO与服务器的压力。
可以明显的看到请求时间，请求服务器资源时间 >> 请求磁盘缓存 > 请求内存缓存，所以合适的缓存策略，可以在不影响业务的情况下，极大地提升客户体验和后台服务器压力。
❻ 浏览器缓存及刷新
1、服务器开启Cache-Control缓存控制（优先级更高）
（相对时间，在这个时间之前不会和服务器通信，本地拿过来直接用）
Cache-Control:max-age=3600，这里是3600秒过期，过期前不会和服务器通信，直接用本地缓存
Cache-Control:no-cache，不使用本地缓存
2、服务器开启Expires（过期时间，绝对时间）
Expires:Thu,21 Jan 2017 23:39:02 GMT
1、Last-Modified（服务器返回此文件最肢搏后修改时间）
If-Modified-Since（客户端第二次请求该资源带着上迹信次服务器返回的此文件最后修改时间，比对是否相同）
2、Etag（优先级更高）（第一次请求资源服务器返回一个Etag值）
If-None-Match（第二次请求资源客户端带着之历州祥前的Etag值给服务器进行比对）
如果多个参数同事存在时：
强缓存优先级更高，而在强缓存中，Cache-Control比Expires优先级高
协商缓存中，Etag比Last-Modified优先级高
1、正常操作：地址栏输入url，跳转链接，前进后退等
2、手动刷新：F5，点击刷新按钮，右键菜单刷新
3、强制刷新：ctrl+F5
1、正常操作：强制缓存有效，协商缓存有效
2、手动刷新：强制缓存失效，协商缓存有效
3、强制刷新：强制缓存失效，协商缓存失效
❼ 浏览器缓存和服务器缓存
一、浏览器缓存
浏览器缓存即http缓存；浏览器缓存根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是 强制缓存 和 协商缓存 。
浏览器第一次请求资源的时候服务器会告诉客户端是否应该缓存资源，根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中。如下图：
1.强制缓存 ：浏览器会对缓存进行查找，并根据一定的规则确定是否使用缓存。
强制缓存的缓存规则？
HTTP/1.0 Expires 这个字段是绝对时间，比如2018年6月30日12:30，然后在这个时间点之前的请求都会使用浏览器缓存，除非清除了缓存。
这个字段的缺点就是只会同步客户端的时间，这就有可能修改客户端时间导致缓存失效。
HTTP/1.1 cache-Control 这个是1.1的时候替换Expires的，它会有几种取值：
public ：所有内容都将被缓存（客户端和代理服务器都可缓存）
private ：所有内容只有客户端可以缓存， Cache-Control的默认取值
no-cache ：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
no-store ：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
max-age=xxx (xxx is numeric) ：缓存内容将在xxx秒后失效
比如max-age=500，则在500秒内再次请求会直接只用缓存。
优先性：cache-Control > Expires
如果同时存在，cache-Control会覆盖Expires。
这个字段的缺点就是：
如果资源更新的速度是秒以下单位，那么该缓存是不能被使用的，因为它的时间单位最低是秒。
如果文件是通过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。
上图中浏览器缓存中存在该资源的缓存结果，并且没有失效，就会直接使用缓存的内容。
上图中浏览器缓存中没有该资源的缓存结果和标识，就会直接向服务器发起HTTP请求。
2.协商缓存： 浏览器的强制缓存失效后(时间过期)，浏览器携带缓存标识请求服务器，由服务器决定是否使用缓存。
服务器决定的规则？
控制协商缓存的字段有 Last-Modified / If-Modified-Since 和 Etag / If-None-Match。
①Last-Modified 是服务器返回给浏览器的本资源的最后修改时间。
当下次再次请求的时候，浏览器会在请求头中带 If-Modified-Since ,即上次请求下来的 Last-Modified 的值，
然后服务器会用这个值和该资源最后修改的时间比较，如果最后修改时间大于这个值，则会重新请求该资源，返回状态码200。
如果这个值和最后修改时间相等，则会返回304，告诉浏览器继续使用缓存。
② Etag 是服务器返回的一个hash值。
当下次再次请求的时候，浏览器会在请求头中带 If-None-Match ,即上次请求下来的 Etag 值，
然后服务器会用这个值和该资源在服务器的 Etag 值比较，如果一致则会返回304，继续使用缓存；如果不一致，则会重新请求，返回200。
二、服务器缓存
上面是一个简单的流程图：
用户1访问A页面，服务器解析A页面返回给用户1，同时在服务器内存上做一定映射，把A页面缓存在硬盘上面
用户2访问A页面，服务器直接根据内存上的映射找到对应的页面缓存，直接返回给用户2，这样就减少了服务器对同一页面的重复解析
服务器缓存和浏览器缓存的区别：
服务器缓存是把页面缓存到服务器上的硬盘里，而浏览器缓存是把页面缓存到用户自己的电脑里
Nginx服务器
Nginx是一个高性能的HTTP和反向代理服务器。具有非常多的优越性：
在连接高并发的情况下，Nginx是Apache服务器不错的替代品，Nginx在美国是做虚拟主机生意的老板们经常选择的软件平台之一。
Nginx提供了expires、etag、if-modified-since指令来实现浏览器缓存控制。
nginx -s reload#重新加载配置文件
nginx -s reopen#重新打开log文件
nginx -s stop#快速关闭nginx服务
nginx -s quit #优雅的关闭nginx服务，等待工作进程处理完所有的请求
Nginx设置静态文件的缓存过期时间
location ~.*\.(js|css|html|png|jpg)$ {
expires 3d;
}
expires 3d;//表示缓存3天
expires 3h;//表示缓存3小时
expires max;//表示缓存10年
expires -1;//表示永远过期。
如果设置为-1在js、css等静态文件在没有修改的情况下返回的是http 304，如果修改返回http 200
对于静态资源会自动添加ETag，可以通过添加etag off指令禁止生成ETag。如果是静态文件，那么Last-Modified值为文件的最后修改时间。
在开发调试web的时候，经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼，提供下apache不缓存配置和nginx不缓存配置的设置。在常用的缓存设置里面有两种方式，都是使用add_header来设置：分别为Cache-Control和Pragma。
location ~ .*\.(css|js|swf|php|htm|html )$ {
add_header Cache-Control no-store;
add_header Pragma no-cache;
}
nginx gzip压缩
使用 gzip 压缩可以降低网站带宽消耗，同时提升访问速度。
主要在nginx服务端将页面进行压缩，然后在浏览器端进行解压和解析，
目前大多数流行的浏览器都迟滞gzip格式的压缩，所以不用担心。
默认情况下，Nginx的gzip压缩是关闭的，同时，Nginx默认只对text/html进行压缩
gzip on;
ersio #开启gzip压缩输出
gzip_http_vn 1.0 ;#默认1.1
#其中的gzip_http_version的设置，它的默认值是1.1，就是说对HTTP/1.1协议的请求才会进行gzip压缩
#如果我们使用了proxy_pass进行反向代理，那么nginx和后端的upstream server之间是用HTTP/1.0协议通信的。
gzip_vary on ;
#和http头有关系，加个vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，
#所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩
gzip_comp_level 6;
#设置gzip压缩等级，等级越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大 1-9
gzip_proxied any;
#Ngnix作为反向代理的时候启用
#expample:gzip_proxied no-cache;
# off – 关闭所有的代理结果数据压缩
# expired – 启用压缩，如果header中包含”Expires”头信息
# no-cache – 启用压缩，如果header中包含”Cache-Control:no-cache”头信息
# no-store – 启用压缩，如果header中包含”Cache-Control:no-store”头信息
# private – 启用压缩，如果header中包含”Cache-Control:private”头信息
# no_last_modified – 启用压缩，如果header中包含”Last_Modified”头信息
# no_etag – 启用压缩，如果header中包含“ETag”头信息
# auth – 启用压缩，如果header中包含“Authorization”头信息
# any – 无条件压缩所有结果数据
gzip_types text/html ;#压缩的文件类型
#设置需要压缩的MIME类型,非设置值不进行压缩
#param:text/html|application/x-javascript|text/css|application/xml
gzip_buffers 16 8k; #设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间
#设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间
# param1:int 增加的倍数
# param2:int(k) 后面单位是k
# example: gzip_buffers 4 8k;
# Disable gzip for certain browsers.
gzip_disable “MSIE [1-6].(?!.*SV1)”; #ie6不支持gzip，需要禁用掉ie6
❽ 浏览器缓存策略
浏览器缓存策略分为两种 强缓存 （本地缓存） 和 协商缓存 （弱缓存）。
浏览器在发请求前，先检查强缓存，若没有需要的内容（未命中），则发起请求判断是否需要用弱缓存。
强缓存 是不发起请求，直接使用缓存内的内容的。浏览器将 js 、 css 、 image 、 font-family 等存到内存(存小文件)或者磁盘（存大文件）中，下次用户再访问的时候就从内存中取，以便提升性能。
协商缓存 需要往后台发请求， 通过判断来决定是使用协商缓存。如果请求内容没发生变化，则请求返回304（服务器收到请求，但内容无变化），浏览器就用缓存内的内容。
如果服务器返回的响应标头中包含 Expires (时间戳)，那么客户端发起请求的时间在 Expires 之前的话，就触发强缓存。
服务器在上一次响应请求时，返回一个带 Last-Modified 的响应头，值为一个时间戳，表示该资源最后一次在服务器修改的时间。当客户端再一次请求这个资源的时候， 请求头就会带上 If-Modified-Since ，值为上次服务器发来的 Last-Modified ， 服务器收到后，就和该资源最后修改时间比对， 没变化就返回304， 触发协商缓存。
弊端 ： 时间间隔最小为1s，如果请求的资源在1s内发生了改变，是可能会触发协商缓存的， 导致无法获取到最新的资源。
为解决间隔最小1s的问题， If-None-Match 和 Etag 就诞生了。 Etag 是由服务器世孙厅生成的， 是每个资源搜隐的唯一标识字符串， 随资源变化而改变。 判断过程和http1.0的一致，请求的时候携带 If-None-Match ，然后服务器比较这两个值，没变化就返回304， 触发协商缓存。
弊端凯销 ： 占用服务器资源较多， 虽然准确度高，但是性能上不如 Last-Modified & If-Modified-Since 的方法。不过实际的影响不会很大， 基本上可以忽略不计。
即便我们没有配置缓存策略，浏览器也会采用自己的算法来缓存资源。
❾ 缓存是什么 深入解析网页缓存机制
缓存是指在计算机系统中，将数据暂时存储在高速缓存中，以提高数据访问速度的一种技术。在网页浏览器中，也存在着网页缓存机制，它可以使用户在访问同一网页时，不必每次都从服务器重新获取数据，而是从本地缓存中读取数据，从而提高网页的访问速度。
缓存是指在计算机系统中，将数据暂时存储在高速缓存中，以提高数据访问速度的一种技术。在网页浏览器中，也存在着网页缓存机制，它可以使用户在访问同一网页时，不必每次都从服务器重新获取数据，而是从本地缓存中读取数据，从而提高网页的访问速度。
协商缓存是指在第一次访问网页时，服务器返回的响应头中包含了缓存标识，浏览器会将该网页缓存在本地，并在下次访问时将该缓存标识发送给服务器，询问服务器该网页是否有更新。如果服务器返回的响应头中包含了“304 Not Modified”配咐的状培森纯态码，则表示该网页没有更新，浏览器会直接从本地缓存中读取数据，否则就从服务器上重新获取数据。
网页缓存是指将已经访问过的网页内容保存在用户的本地存储中，以便下次访问时可以更快速地加载页面。当用户访问一个网页时，浏览器会首先查看本地缓存中是否存在该网页的春枝副本，如果存在，则直接从缓存中读取，否则就从服务器上重新获取数据。
强制缓存是指在第一次访问网页时，服务器返回的响应头中包含了缓存时间，浏览器会将该网页缓存在本地，并在缓存时间内不会向服务器发送请求。当缓存时间过期后，浏览器会再次向服务器发送请求，重新获取数据。
缓存是指在计算机系统中，将数据暂时存储在高速缓存中，以提高数据访问速度的一种技术。在网页浏览器中，也存在着网页缓存机制，它可以使用户在访问同一网页时，不必每次都从服务器重新获取数据，而是从本地缓存中读取数据，从而提高网页的访问速度。
❿ 什么是浏览器缓存
什么是浏览器缓存
浏览器缓存(BrowerCaching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。
浏览器缓存的优点有：
减少了冗余的数据传输，节省了网费
减少了服务器的负担，大大提升了网站的性能
加快了客户端加载网页的速度
在前端开发面试中，浏览器缓存是web性能优化面试题中很重要的一个知识点，从而说明浏览器缓存是提升web性能的一大利器，但是浏览器缓存如果使用不当，也会产生很多问题，正所谓是，想说爱你，并不是很容易的事。所以，结合最近遇到的案例，本文对浏览器缓存相关的悉兄知识进行总结归纳，希望对读者睁逗袭有所帮助。
浏览器缓存的分类
浏览器缓存主要有两类：缓存协商和彻底缓存，也有称之为协商缓存和强缓存。
浏览器在第一次请求发生后，再次请求时：
浏览器会先获取该资源缓存的header信息，根据其中的expires和cahe-control判断是否命中强缓存，若命中则直接从缓存中获取资源，包括缓存的header信息，本次请求不会与服务器进行通信;
如果没有命中强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header字段信息(Last-Modified/IF-Modified-Since、Etag/IF-None-Match),由服务器根据请求中的相关header信息来对比结果是否命中协商缓存，若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取;否则返回最新的资源内容
强缓存
强缓存是利用http的返回头中的Expires或者Cache-Control两个字段来控制的，用来表示资源的缓存时间。
Expires
该字段是http1.0时的规范，它的值为一个绝对时间的GMT格式的时间字符串，比如Expires:Mon,18Oct206623:59:59GMT。这个时间代表着这个资源的失效时间，在此时间之前，北京电脑培训建议指伏即命中缓存。这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当服务器与客户端时间偏差较大时，就会导致缓存混乱。