Ⅰ 静态资源常用的一种缓存方式
http缓存分为强缓存和协商缓存。
强缓存并不会请求服务器，同时响应码会返回200。比如使用的配置cache-control:max-age=1200
在项目中缓存图片等静态资源常用的是协商缓存。
在第一次请求静态资源的时候，服务器会根据资源内容生成etag， 在响应头里返回给浏览器，在下次请求的时候浏览器会在头部配置If-None-Match，携带etag来向服务器询问资源是否发生改变。若是没有发生改变会返回304，这样浏览器就不会从服务器重新获取资源而是直接使用本地缓存。采用etag可以解决文件名没有发生变化但是文件内容被修改的问题。
通常会跟cache-control: no-cache 在一起配合使用。no-cache是指浏览器可以缓存响应，但是必须要向原始服务器提交验证请求。
参考：
https://www.imperva.com/learn/performance/cache-control/
https://blog.csdn.net/aimeimeiTS/article/details/105731709
https://www.zoo.team/article/http-cache
https://imweb.io/topic/5795dcb6fb312541492eda8c
https://aotu.io/notes/2016/09/22/http-caching/index.html
Ⅱ 前端http请求细节——Cache-Control（缓存机制）
请求和响应中的 Cache-Control 指令并不完全相同，具体可以查看 这里 ，包括指令的具体意思，这里不过多赘述。（默认值：private）
浏览器的缓存机制是根据 HTTP 报文的缓存标识进行的，浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果。
浏览器缓存策略分为两种：强制缓存和协商缓存。
强制缓存不会向服务器发送请求，直接从缓存中读取资源，可以看到请求返回的状态码都是200，并且 Size 代表该缓存的位置。
浏览器读取缓存的顺序为memory –> disk。
三级缓存原理 (访问缓存优先级)：
在浏览器中，浏览器会在js，字体，图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
为什么CSS会放在硬盘缓存中？
因为CSS文件加载一次就可渲染出来,我们不会频繁读取它,所以它不适合缓存到内存中,但是js之类的脚本却随时可能会执行,如果脚本在磁盘当中,我们在执行脚本的时候需要从磁盘取到内存中来,这样IO开销就很大了,有可能导致浏览器失去响应。
若服务器的资源最后被修改时间 > If-Modified-Since的字段值
则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件
If-None-Match 的字段值 = 该资源在服务器的Etag值
一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。
ETag 和 Last-Modified 区别
参考链接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252
Ⅲ 协商缓存和强缓存的区别
协商缓存和强缓存的区别
（1）强缓存
使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。
强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。
（1）服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使用，不必再向服务器发送请求。这个时间是一个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不一致，或者用户可以对客户端时间进行修改的情况，这样就可能会影响缓存命中的结果。
（2）Expires 是 http1.0 中的方式，因为它的一些缺点，在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更精确的控制。它有很多不同的值，
Cache-Control可设置的字段：
public：设置了该字段值的资源表示可以被任何对象（包括：发送请求的客户端、代理服务器等等）缓存。这个字段值不常用，一般还是使用max-age=来精确控制；
private：设置了该字段值的资源只能被用户浏览器缓存，不允许任何代理服务器缓存。在实际开发当中，对于一些含有用户信息的HTML，通常都要设置这个字段值，避免代理服务器(CDN)缓存；
no-cache：设置了该字段需要先和服务端确认返回的资源是否发生了变化，如果资源未发生变化，则直接使用缓存好的资源；
no-store：设置了该字段表示禁止任何缓存，每次都会向服务端发起新的请求，拉取最新的资源；
max-age=：设置缓存的最大有效期，单位为秒；
s-maxage=：优先级高于max-age=，仅适用于共享缓存(CDN)，优先级高于max-age或者Expires头；
max-stale[=]：设置了该字段表明客户端愿意接收已经过期的资源，但是不能超过给定的时间限制。
一般来说只需要设置其中一种方式就可以实现强缓存策略，当两种方式一起使用时，Cache-Control 的优先级要高于 Expires。
no-cache和no-store很容易混淆：
no-cache 是指先要和服务器确认是否有资源更新，在进行判断。也就是说没有强缓存，但是会有协商缓存；
no-store 是指不使用任何缓存，每次请求都直接从服务器获取资源。
（2）协商缓存
如果命中强制缓存，我们无需发起新的请求，直接使用缓存内容，如果没有命中强制缓存，如果设置了协商缓存，这个时候协商缓存就会发挥作用了。
上面已经说到了，命中协商缓存的条件有两个：
max-age=xxx 过期了
值为no-store
使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源。
协商缓存也可以通过两种方式来设置，分别是 http 头信息中的Etag 和Last-Modified属性。
（1）服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较，以此来判断资源是否做了修改。如果资源没有修改，那么返回 304 状态，让客户端使用本地的缓存。如果资源已经被修改了，则返回修改后的资源。使用这种方法有一个缺点，就是 Last-Modified 标注的最后修改时间只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，那么文件已将改变了但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。
（2）因为 Last-Modified 的这种可能发生的不准确性，http 中提供了另外一种方式，那就是 Etag 属性。服务器在返回资源的时候，在头信息中添加了 Etag 属性，这个属性是资源生成的唯一标识符，当资源发生改变的时候，这个值也会发生改变。在下一次资源请求时，浏览器会在请求头中添加一个 If-None-Match 属性，这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较，以此来判断资源是否发生改变，是否需要返回资源。通过这种方式，比 Last-Modified 的方式更加精确。
当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更高。使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 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， 因为如果不启用强缓存的话，协商缓存根本没有意义 。
如果资源已经被浏览器缓存下来，在缓存失效之前，再次请求时，默认会先检查是否命中强缓存，如果强缓存命中则直接读取缓存，如果强缓存没有命中则发请求到服务器检查是否命中协商缓存，如果协商缓存命中，则告诉浏览器还是可以从缓存读取，否则才从服务器返回最新的资源。其浏览器判断缓存的详细流程图，如下：
Ⅳ 浏览器缓存（http缓存）
浏览器缓存有两种：强制缓存和协商缓存
向浏览器缓存中查找请求结果，根据【缓存规则】决定是否使用该结果。
强制缓存失效后，携带缓存标识请求服务器，服务器根据缓存标识判断是否使用缓存
当浏览器向服务器发送请求的时候，服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器（ps：下文说的时间点均为类似：Sat Aug 14 2021 11:01:52，秒级）
两个字段：Expires和Cache-Control，优先级：Cache-Control > Expires，客户端比较时间
Expires ：HTTP/1.0，返回值为【到期时间点】，再次请求，客户端的时间< Expires，直接用缓存（ps：客户端与服务器端时间可能存在误差，出问题）
Cache-Control ：HTTP/1.1，有以下字段
Last-Modified / If-Modified-Since 和 Etag / If-None-Match，优先级Etag > Last-Modified，服务器比较时间
Last-Modified（服务端返回客户端） / If-Modified-Since（客户端传入服务端） ：两个值相同，表示：资源文件在服务器最后被修改的时间【时间点】。
Etag（服务端返回客户端） / If-None-Match（客户端传入服务端） ，两个值相同，为当前资源文件的一个唯一标识(由服务器生成)
Etag什么时候用
雅虎禁用了Etag：因为ETag的值和服务器有关，那么对于同样的文件，可能下次请求的时候是发给不同的服务器，结果也会重新发送数据，所以就会影响网页加载速度，增加服务器的压力（但Last-Modified也与服务器有关）
主要解决的问题：
浏览器的每个tab都是一个进程
两个缓存的地方 from memory cache（内存缓存） 和 from disk cache（硬盘缓存） ，读取顺序为memory > disk
Ⅵ 关于html缓存设置
通过HTTP的META设置expires和cache-control
指令不区分大小写，并且具有可选参数，可以用令牌或者带引号的字符串语法。多个指令以逗号分隔。
客户端可以在HTTP请求中使用的标准 Cache-Control 指令。
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached
服务器可以在响应中使用的标准 Cache-Control 指令。
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public
Cache-control: private
Cache-control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-control: s-maxage=<seconds>
拓展缓存指令不是HTTP缓存标准的一部分，使用前请注意检查 兼容性 ！
Cache-control: immutable
Cache-control: stale-while-revalidate=<seconds>
Cache-control: stale-if-error=<seconds>
public
表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。
private
表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。
no-cache
强制所有缓存了该响应的缓存用户，在使用已存储的缓存数据前，发送带验证器的请求到原始服务器
only-if-cached
表明如果缓存存在，只使用缓存，无论原始服务器数据是否有更新
max-age=<seconds>
设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间。
s-maxage=<seconds>
覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略。
max-stale[=<seconds>]
表明客户端愿意接收一个已经过期的资源。 可选的设置一个时间(单位秒)，表示响 应不能超过的过时时间。
min-fresh=<seconds>
表示客户端希望在指定的时间内获取最新的响应。
must-revalidate
缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。
proxy-revalidate
与must-revalidate作用相同，但它仅适用于共享缓存（例如代理），并被私有缓存忽略。
immutable
表示响应正文不会随时间而改变。资源（如果未过期）在服务器上不发生改变，因此客户端不应发送重新验证请求头（例如If-None-Match或If-Modified-Since）来检查更新，即使用户显式地刷新页面。在Firefox中，immutable只能被用在 https:// transactions.
发送如下指令可以关闭缓存。此外，可以参考Expires 和 Pragma 标题。
对于应用程序中不会改变的文件，你通常可以在发送响应头前添加积极缓存。这包括例如由应用程序提供的静态文件，例如图像，CSS文件和JavaScript文件。另请参阅Expires标题。
缓存主要两个策略 强制缓存 ，协商缓存
强制缓存就是设置本地资源html img js等等缓存多长时间 超过时间就去服务器端取。
协商缓存就是每次都询问服务器资源是否已经过期 没有过期就使用缓存 已经过期就从服务器上重新取。
缓存流程可以分三个阶段 本地缓存，协商缓存 ，缓存失败
现在的vue项目里都不是这样缓存的 我个人感觉这是在静态页面时的缓存办法
现在都是webpack打包时通过 hash chunkhash contenthash来决定缓存方式 主要就是在请求的文件名称后面加一个id 来判断文件是否已经更新。
Ⅶ 北大青鸟java培训：什么是浏览器缓存
什么是浏览器缓存浏览器缓存(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。
这个时间代表着这个资源的失效时间，在此时间之前，山东电脑培训建议即命中缓存。
这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当服务器与客户端时间偏差较大时，就会导致缓存混乱。
Ⅷ http缓存之基本概念
1. 重要性
综上所述，所以大家很有必要花时间来研究。
2. 困难之处
个人认为http缓存是比较枯燥的理论知识，尤其对于前端来讲，更多在于理解概念，以及内部缓存机制，而没有什么实践可以巩固，或者说理论和现实脱轨。
浏览器会在请求资源之后，根据自己的缓存策略判断是否对资源进行缓存，当再次请求相同的资源时，浏览器根据缓存策略判断是通过本地缓存获取资源，还是重新向服务器发起请求。
这个 缓存策略 到底是什么呢？
实际每个浏览器的缓存策略是有差异的，但大致受以下几个因素的影响。
搜索关键字 禁止 html 缓存 ，很容易搜到以下答案：
但是，这是 Html 4.0 中的规范，在 Html 5.0 的规范中 http-equiv 已经不存在以上属性值了。
而且代理服务器并不会读取以上meta标签，不利于代理服务器的缓存。
-- 引用自 stackoverflow
综上所述， html meta 是一个不那么可靠，并且已经过时的解决方案，所以不建议再继续使用 。
基于 HTTP 协议的缓存策略，分为 强缓存 和 协商缓存 , 由 HTTP 协议的首部 (Headers) 信息决定。具体的操作设置需要服务器配合，比如 Nginx 。所以相对来说都是后端在做此类事情，前端接触的机会比较少。
如果开启了强缓存，并且在过期时间之内，则浏览器不再发起请求，直接使用本地的缓存资源。
Expires 和 Cache-control 用于控制强制缓存。
Expires 是 HTTP 1.0 的特性。通过指定一个明确的时间点作为缓存资源的过期时间，客户端会根据此时间点来判断到底使用本地缓存，还是向服务器重新请求资源。
优点： 在缓存过期时间内，减少客户端的 HTTP 请求，不仅节省了客户端处理时间，提高了 web 应用的执行速度，而且减少了服务器负载，以及客户端网络资源的消耗。
缺点：指定的过期时间以服务器为准，但是客户端进行过期时间判断时是将 本地的时间 与 指定的过期时间点 进行对比。如果客户端修改了本地时间，将会影响对缓存的判断。
Cache-control 是HTTP1.1 新增的特性，以便更精准地控制缓存。此首部信息 具有最高的优先级。
max-age 指定的是缓存的时间跨度，而非缓存失效的时间点。优先级比 Expires 高。
如果需要使用协商缓存，需要 将 Cache-control 指定为 no-cache 或者 max-age 、Expires 均过期之后。
协商缓存：浏览器本地是有缓存的，但是要先发起请求，由服务器判断缓存是否过期。
Last-Modified / If-Modified-Since
last-Modified 是 HTTP 1.0 的特性，是服务器端在响应请求时用来说明资源的最后修改时间。
缺点：
Etag / If-None-Match
Etag 是 HTTP 1.1 的特性，是服务器为资源分配的字符串形式唯一性标识，作为响应首部返回给浏览器。
采用弱比较，内容没变化，时间变化了，会认为是资源未变化。
浏览器之HTTP缓存的那些事
304和浏览器http缓存
浏览器缓存机制剖析
浏览器缓存机制介绍
技术研究 vue项目的性能优化之路
HTTP缓存控制小结
Ⅸ 浏览器缓存的方式和类型（笔记）
浏览器缓存只是计算机缓存的一种
1.内存缓存
将数据存到内存
2.代理服务器缓存
就是个自己找的中介。你拿东西先找中介，中介找房东，房东给中介，中介又给你。比如你需要房子钥匙，房东把钥匙放在中介那，你直接从中介那里拿钥匙。
3.CDN缓存
将数据存到CDN服务器。CDN也是个中介，不过这个中介是根据中介的忙碌程度（CDN服务器忙碌程度）、跟你的距离（CDN服务器和你的距离）自动给你分配的。
4.浏览器缓存（ 我是个前端，只关注浏览器缓存。 ）
根据HTTP协议决定要不要缓存，以什么方式缓存，缓存到哪（内存还是硬盘等）。
浏览器缓存是将浏览器请求过的数据（资源文件）保存到电脑上。需要再次使用的时候，直接从电脑上获取保存的数据（资源文件），这就是浏览器缓存
1.减少网络请求，节省流量
2.减轻服务器压力
3.资源加载速度快了，前端性能就更好了
1.Server Worker
还没搞懂，搞懂了再来写。
2.Memory Cache
内存中的缓存，关闭页面进程就释放内存
3.Disk Memory
硬盘中的缓存，不主动清理就一直在
4、Push Cache
推送缓存，是HTTP/2的内容，并没有严格执行HTTP头部的缓存指令。在Server Worker、Memory Cache、Disk Cache都没有命中的时候，它会被使用。在Session中存在，Session结束就会被释放，缓存时间短暂。
1.先去内存查找，找到直接加载
2.内存找不到，硬盘中找，找到直接加载
3.硬盘找不到进行网络请求
4.把请求获取的资源再缓存到硬盘和内存
1.强缓存
控制强制缓存的字段分别是Expires和Cache-Control，Cache-Control优先级比Expires高
-Expires设置一个绝对时间的GMT格式的时间字符串，这个是资源失效时间（ 客户端的时间小于Expires的值，缺陷就是客户端的时间被改变就有问题 ），在这个时间之前都直接读取缓存。
-Cache-Control替代Expires，它利用的是相对时间，利用header信息字段的max-age值判断。
2.协商缓存
-Last-Modified/If-Modified-Since
Last-Modified:浏览器向服务器发送资源最后的修改时间
If-Modified-Since:当资源过期时，发现响应头具有Last-Modified声明，则再次向服务器请求时带上头if-modified-since，表示请求时间。服务器收到请求后，发现有if-modified-since则与被请求资源的最后修改时间进行对比（Last-Modified）,若最后修改时间较新，说明资源又被改过，则返回最新资源，返回200；若最后修改时间较小，说明资源无新修改，返回304 ，使用缓存文件。
缺点:单位是秒，一秒内多次改变会认为没过期
-ETag/If-None-Match
ETag:由服务器生成返回给前端，帮助服务器控制web端的缓存验证，服务器会生成并且返回当前资源文件的一个唯一标识
If-None-Match:当资源过期时，发现响应头具有Etag声明，则再次向服务器请求时带上头if-none-match（唯一标识Etag值）。服务器收到该请求后，发现有If-None-Match则根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。
1.强缓存不发请求，协商缓存会发请求给服务器确认有没有过期
2.强缓存文件更新浏览器不知道，协商缓存更新浏览器能实时知道
1.点击浏览器的刷新按钮时，全部走缓存
2.F5或者鼠标右键刷新强制缓存失效，不影响协商缓存
3.CTRL+F5影响强制缓存和协商缓存都失效
Ⅹ 前端浏览器缓存机制
在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。
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，你已经是最新的版本了
浏览器：好，那就可以使用本地缓存了