认识HTTP----缓存篇

本文内容大多参考 《图解HTTP》一书

所以讲缓存为什么要先扯代理服务器？别急，让我们看一下一个请求的简单示意图。

我们看到客户端(用户)发送了一个请求并不是直接发给源服务器的而是经过了代理服务器，然后经由代理服务器再发送给源服务器，响应也同样遵循这个顺序。

那么代理服务器在这中间担任了什么角色？

缓存是指代理服务器或客户端本地磁盘内保存的资源副本。利用缓存可减少对源服务器的访问，因此也就节省了通信流量和通信时间。

缓存服务器是代理服务器的一种，并归类在缓存代理类型中。换句话说，当代理转发从服务器返回的响应时，代理服务器将会保存一份资源的副本。

缓存服务器的优势在于利用缓存可避免多次从源服务器转发资源。因此客户端可就近从缓存服务器上获取资源，而源服务器也不必多次处理相同的请求了。

即便缓存服务器和客户端内有缓存，也不能每次都给我返回缓存吧，如果是这样，源服务器更新了我也不知道，因为我每次都是看缓存的资源。

为了解决这个问题，针对缓存设计了时效性的概念：

即使存在缓存，也会因为客户端的要求、缓存的有效期等因素，向源服务器确认资源的有效性。若判断缓存失效，缓存服务器将会再次从源服务器上获取“新”资源。

缓存不仅可以存在于缓存服务器内，还可以存在客户端浏览器中。以Internet Explorer 程序为例，把客户端缓存称为临时网络文件（Temporary Internet File）。

浏览器缓存如果有效，就不必再向服务器请求相同的资源了，可以直接从本地磁盘内读取。

另外，和缓存服务器相同的一点是，当判定缓存过期后，会向源服务器确认资源的有效性。若判断浏览器缓存失效，浏览器会再次请求新资源。

Pragma 是HTTP/11 之前版本的历史遗留字段，仅作为与HTTP/10的向后兼容而定义。

规范定义的形式唯一，如下所示。

Pragma: no-cache

该首部字段属于通用首部字段，但只用在客户端发送的请求中。客户端会要求所有的中间服务器不返回缓存的资源。

通过指定首部字段Cache-Control 的指令，就能操作缓存的工作机制。

可用的指令按请求和响应分类如下所示:

public指令

Cache-Control: public

当指定使用public 指令时，则明确表明其他用户也可利用缓存。

private指令

no-store指令

Cache-Control: no-store

当使用no-store 指令时，暗示请求（和对应的响应）或响应中包含机密信息。

因此，该指令规定缓存不能在本地存储请求或响应的任一部分。

ps:从字面意思上很容易把no-cache误解成为不缓存，但事实上no-cache代表不缓存过期的资源，缓存会向源服务器进行有效期确认后处理资源，也许称为do-not-serve-from-cache-without-revalidation更合适。no-store 才是真正地不进行缓存，请读者注意区别理解。

s-maxage指令

Cache-Control: s-maxage=604800 //（单位：秒）

s-maxage 指令的功能和max-age 指令的功能相同， 它们的不同点是s-maxage 指令只适用于供多位用户使用的公共缓存服务器(这里指代理服务器)。也就是说，对于向同一用户重复返回响应的服务器来说，这个指令没有任何作用。

另外，当使用s-maxage 指令后，则直接忽略对Expires 首部字段及max-age 指令的处理。

max-age指令

cache-extension token

Cache-Control: private, community="UCI"

通过 cache-extension 标记（token），可以扩展Cache-Control 首部字段内的指令。

如上例，Cache-Control 首部字段本身没有community 这个指令。借助extension tokens 实现了该指令的添加。如果缓存服务器不能理community 这个新指令，就会直接忽略。因此，extension tokens 仅对能理解它的缓存服务器来说是有意义的。

If-Unmodified-Since: Thu, 03 Jul 2012 00:00:00 GMT

首部字段If-Unmodified-Since 和首部字段If-Modified-Since 的作用相反。它的作用的是告知服务器，指定的请求资源只有在字段值内指定的日期时间之后，未发生更新的情况下，才能处理请求。如果在指定日期时间后发生了更新，则以状态码412 Precondition Failed 作为响应返回。

ps:Last-Modified 存在一定问题，如果在服务器上，一个资源被修改了，但其实际内容根本没发生改变，会因为Last-Modified时间匹配不上而返回了整个实体给客户端（即使客户端缓存里有个一模一样的资源）。

首部字段If-None-Match 属于附带条件之一。它和首部字段If-Match 作用相反。用于指定If-None-Match 字段值的实体标记（ETag）值与请求资源的ETag 不一致时，它就告知服务器处理该请求。

在GET 或HEAD 方法中使用首部字段If-None-Match 可获取最新的资源。因此，这与使用首部字段If-Modified-Since 时有些类似。

不与服务器确认，而是直接使用浏览器缓存的内容。其中响应内容和之前的响应内容一模一样，例如其中的Date时间是上一次响应的时间。

F5的作用和直接在URI输入栏中输入然后回车是不一样的，F5会让浏览器无论如何都发一个HTTP Request给Server，即使先前的响应中有Expires头部。

Ctrl+F5要的是彻底的从Server拿一份新的资源过来，所以不光要发送HTTP request给Server，而且这个请求里面连If-Modified-Since/If-None-Match都没有，这样就逼着Server不能返回304，而是把整个资源原原本本地返回一份，这样，Ctrl+F5引发的传输时间变长了，自然网页Refresh的也慢一些。

Cache-Control 是 HTTP11 才有的，不适用于 HTTP10，而 Expires 既适用于 HTTP10，也适用于 HTTP11，所以说在大多数情况下同时发送这两个头会是一个更好的选择，当客户端两种头都能解析的时候，会优先使用 Cache-Control。

二者都是通过某个标识值来请求资源， 如果服务器端的资源没有变化，则自动返回 HTTP 304 （Not Changed）状态码，内容为空，这样就节省了传输数据量。当资源变化后则返回新资源。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

其中Last-Modified使用文件最后修改作为文件标识值，它无法处理文件一秒内多次修改的情况，而且只要文件修改了哪怕文件实质内容没有修改，也会重新返回资源内容；ETag作为“被请求变量的实体值”，其完全可以解决Last-Modified头部的问题，但是其计算过程需要耗费服务器资源。

Expires和Cache-Control都有一个问题就是服务端的修改，如果还在缓存时效里，那么客户端是不会去请求服务端资源的（非刷新），这就存在一个资源版本不符的问题，而强制刷新一定会发起HTTP请求并返回资源内容，无论该内容在这段时间内是否修改过；而Last-Modified和Etag每次请求资源都会发起请求，哪怕是很久都不会有修改的资源，都至少有一次请求响应的消耗。

对于所有可缓存资源，指定一个Expires或Cache-Control max-age以及一个Last-Modified或ETag至关重要。同时使用前者和后者可以很好的相互适应。

前者不需要每次都发起一次请求来校验资源时效性，后者保证当资源未出现修改的时候不需要重新发送该资源。而在用户的不同刷新页面行为中，二者的结合也能很好的利用HTTP缓存控制特性，无论是在地址栏输入URI然后输入回车进行访问，还是点击刷新按钮，浏览器都能充分利用缓存内容，避免进行不必要的请求与数据传输。

做法很简单，就是把可能会更新的资源以版本形式发布，常用的方法是在文件名或参数带上一串md5或时间标记符：

可以看到上面的例子中有不同的做法，有的在URI后面加上了md5参数，有的将md5值作为文件名的一部分，有的将资源放在特性版本的目录中。

那么在文件没有变动的时候，浏览器不用发起请求直接可以使用缓存文件；而在文件有变化的时候，由于文件版本号的变更，导致文件名变化，请求的url变了，自然文件就更新了。这样能确保客户端能及时从服务器收取到新修改的文件。通过这样的处理，增长了静态资源，特别是资源的缓存时间，避免该资源很快过期，客户端频繁向服务端发起资源请求，服务器再返回304响应的情况（有Last-Modified/Etag）。

keepalive 是 Vuejs 中的一个组件，它可以用来缓存组件的状态，避免在每次需要渲染该组件时都重新创建和销毁它。这样就可以解决一些因为频繁创建和销毁组件而引发的问题，比如数据的重新获取和重新渲染。

当使用 keepalive 包裹一个组件时，该组件的状态将会被缓存起来，当再次需要渲染该组件时，如果组件的输出没有发生改变，Vue 就会跳过重新渲染，而是复用（或称缓存）上一次的渲染结果。

在有些场景中，这种缓存机制可以帮助我们解决一些问题。例如，当一个组件需要从服务器获取数据，并且在页面上渲染这些数据时，如果我们使用了 keepalive，那么在数据请求和渲染结果之间就不需要等待服务器响应，因为 Vue 会直接复用上一次的结果。这样可以减少服务器响应等待时间，提高用户体验。

以下是一个使用 keepalive 的示例：

vue<template>

<div>

<keep-alive>

<my-component v-if="showComponent"></my-component>

</keep-alive>

<button @click="toggleComponent">Toggle Component</button>

</div>

</template>

<script>

export default {

data() {

return {

showComponent: true,

};

},

methods: {

toggleComponent() {

thisshowComponent = !thisshowComponent;

},

},

};

</script>

在这个示例中，我们使用 keepalive 包裹了一个名为 my-component 的组件。通过点击按钮，我们可以切换组件的可见性。当组件可见时，由于 keepalive 的作用，该组件的状态会被缓存起来；当组件不可见时，Vue 会销毁该组件的实例。当我们再次点击按钮使组件可见时，由于缓存的存在，组件的状态将不会丢失，而是直接被复用。

协商缓存和强缓存的区别

（1）强缓存

使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。

强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。

（1）服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使用，不必再向服务器发送请求。这个时间是一个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不一致，或者用户可以对客户端时间进行修改的情况，这样就可能会影响缓存命中的结果。

（2）Expires 是 http10 中的方式，因为它的一些缺点，在 HTTP 11 中提出了一个新的头部属性就是 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缓存处于服务器(也称为源服务器)和客户端之间，监视请求并保存响应的副本，比如HTML页面，和文件等(统称为表述)。如果之后有对同一个URL的新请求，它会使用自己保存的内容来响应，而不是再次请求源服务器来获取内容。

使用Web缓存主要有下面两个原因：

减少延迟——因为响应请求的内容来自缓存(距客户端较近)而不是源服务器，它会花较少的时间来获得表述并将他们呈现出来。这使得Web看起来具有良好的响应速度。

减少网络传输——由于复用了表述，它可以减少客户端使用的带宽总量。如果客户需要为流量付费，这就意味着省钱。缓存会降低对带宽的要求，也降低处理难度。

Web缓存的种类

浏览器缓存

你在查看现代Web浏览器(比如IE、Safari或Mazilla)选项的时候，可能会看到“缓存”设置。这个选项让你配置一部分硬盘空间来保存你看过的表述。浏览器缓存的规则相当简单。它通常会在一次会话(即当前浏览器中一次调用)中检查表述是否新。

这个缓存在用户使用“回退”按钮或者点击一个浏览过的链接时会特别有用。而且，如果你在网站的各个页面中浏览相同的，他们几乎能马上从缓存中加载出来。

代理缓存

Web代理缓存的工作原理相同，但规模更大。代理以同样的方式为成百上千的用户服务;大公司和ISP常常把代码缓存建立在防火墙之上，也可能是以独立设备的形式存在(也称为中间设备)。

代理缓存即不是客户端的一部分，也不是服务器的一部分，而是在网络之外，必须以某种方式把请求路由过去。其中一种方式是手工修改浏览器代理设备，指定要使用的代码;另一种方式是拦截。拦截式代理会根据其自身的基础网络重定向Web请求，不需要在客户端配置，客户端甚至不知道它们的存在。

代理缓存是一种共享缓存，通常不只是一个用户，而是大量用户在使用代理缓存。正因为如此，他们特别擅长降低延迟和网络传输量。这是因为众人都需要的表述会被多次重复使用。

网关缓存

网关缓存又名“反向代理缓存”或“替代缓存”。网关缓存也是一种中介，它他们不是由网络管理员部署以节约带宽，而是由网站管理员自己部署，使其站点更具伸缩性、可靠性以及拥有更好的性能。

很多方法都可以把请求路由到网关缓存，但常见的方法是使用负载均衡器让他们对于客户来说，看起来就跟源服务器一样。

内容分发网络(CDN)在整个Internet(或它的一部分)中分发网关缓存，并将其出售给对此感兴趣的网站。

Web缓存对我有坏处么我为什么要帮助它们

Web缓存是互联网中误解深的技术之一。因为代理缓存可以隐藏使用网站的用户，所以网站管理员特别害怕失去对他们的站点的控制，这会使得他们很难去知道是谁在使用他们的站点。

然而不幸的是，即使没有Web缓存，网络上也有非常多的因素可以保证管理员精确的知道一个用户如何使用他们的站点。如果这是你非常关注的问题的话，这篇手册将会指导你如何在站点没有不友好的缓存机制的情况下获取你需要的统计信息。

客户端如何处理网络延迟？

客户端如何处理网络延迟？

网络延迟是大多数客户端应用程序中经常遇到的一个常见问题，这可能导致用户的体验变得非常糟糕，甚至会对应用程序的性能和可靠性产生负面影响。在开发客户端应用程序时，必须有有效的策略来处理网络延迟，以确保应用程序能够在任何情况下都能运行良好。

1增加缓存数据

利用缓存机制是一种降低网络延迟的有效方式。当客户端应用程序请求数据时，它会先检查缓存中是否存在相同的数据。如果找到该数据，则不必从服务器重新请求它，而是直接获取缓存中的数据。这样就可以减少与服务器通信的数量，并加快数据的加载速度，从而改善应用程序的性能。

2优化网络请求

另一个解决网络延迟的方法是优化网络请求，减少客户端应用程序与服务器之间的通信次数。这可以通过以下几种方式实现：

a批量处理请求

应用程序可以将多个小型请求合并为一个大请求。这样，客户端就可以在请求的响应之前等待更长的时间，从而减少网络通信的数量。

b减少对服务器的请求

应用程序可以在本地存储数据，并尽可能地减少与服务器之间的通信次数。例如，应用程序可以将一些数据（如用户个人资料或应用程序配置）存储在本地，而不必每次启动应用程序时都向服务器请求这些数据。

3优化数据传输

另一种减少网络延迟的方法是通过优化数据传输来减少数据量。以下是一些常见的方法：

a压缩传输数据

应用程序可以使用压缩算法来减少通过网络传输的数据量。压缩能够显著减少传输时间，但也会增加数据处理的工作量。

b降低图像质量

应用程序可以将图像压缩为更小的文件格式，以减少数据量。这可以通过降低图像质量或减少图像的分辨率来实现。

总之，客户端应用程序必须遵循有效的网络延迟处理策略，以确保用户能够获得良好的体验。通过使用缓存机制，优化网络请求和优化数据传输，可以加快应用程序的性能并减少延迟。

有dns的地方,就有缓存。浏览器、操作系统、Local DNS、根域名服务器，它们都会对DNS结果做一定程度的缓存。

DNS查询过程如下:

首先搜索浏览器自身的DNS缓存,如果存在，则域名解析到此完成。

如果浏览器自身的缓存里面没有找到对应的条目，那么会尝试读取操作系统的hosts文件看是否存在对应的映射关系,如果存在，则域名解析到此完成。

如果本地hosts文件不存在映射关系，则查找本地DNS服务器(ISP服务器,或者自己手动设置的DNS服务器),如果存在,域名到此解析完成。

如果本地DNS服务器还没找到的话,它就会向根服务器发出请求,进行递归查询。

浏览器本地缓存失效后，浏览器会向CDN边缘节点发起请求。类似浏览器缓存,CDN边缘节点也存在着一套缓存机制。CDN边缘节点缓存策略因服务商不同而不同，但一般都会遵循http标准协议，通过http响应头中的

Cache-control: max-age 的字段来设置CDN边缘节点数据缓存时间。

当浏览器向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点就会向服务器发出回源请求，从服务器拉取最新数据，更新本地缓存，并将最新数据返回给客户端。 CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间，为用户提供更精细化的缓存管理。

CDN 优势

CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低。

大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源服务器的负载。

http请求报文（request）

请求行

请求方法  空格  URL 空格  协议版本 回车符 换行符

请求头（通用信息头、请求头、实体头）

头部字段名 冒号  值  回车键 换行符

头部字段名 冒号  值  回车键 换行符

空行

回车符   换行符

实体主体（只有post请求有）

主体

http响应报文（response）

状态行

协议版本  空格  状态码 空格  状态码描述 回车符 换行符

响应头部

头部字段名 冒号  值   回车符 换行符

头部字段名 冒号  值   回车符 换行符

空行

回车符   换行符

响应正文

正文

浏览器初次向服务器发起请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存返回的结果，是则将请求结果和缓存标识存入浏览器缓存中

浏览器每次发起请求，都会现在浏览器缓存中查找该请求的结果以及缓存标识

浏览器                浏览器缓存        服务器

——————第一次发起http请求——————>

<——没有该请求的缓存结果和缓存标识————

——————————————发起http请求——————————————>

<——————————返回该请求结果和缓存规则————————————

——将请求结果和缓存标识存入浏览器缓存——>

强制缓存就是向浏览器缓存查找结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程

强制缓存的情况分为三种：

1、不存在该缓存结果和缓存标识，强制缓存失效，直接向服务器发起请求

2、存在该缓存结果和缓存标识，但结果已经失效，强制缓存失效，使用协商缓存

3、存在该缓存结果和缓存标识，且该结果没有失效，强制缓存生效，直接返回该结果

控制强制缓存的字段：Expires，Cache-Control

Expires 是 HTTP/10 控制缓存的字段，值为服务器返回该请求的结果缓存时间

即再次发送请求是，客户端时间 小于 Expires的值，直接使用缓存结果

Cache-Control 是HTTP/11的规则，主要用于控制网页缓存，主要取值为：

public：所有的内容都缓存（客户端和代理服务器都可以缓存）

private：所有内容只有客户端可以缓存（默认值）

no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

no-store：即不使用强制缓存，也不使用协商缓存

max-age=xxx：缓存内容将在xxx秒后失效

Expires 是一个绝对值

Cache-Control 中 max-age 是相对值，解决了 Expires时期 服务端与客户端 可能出现时间差的问题

注：Expires和Cache-Control同时存在时，只有Cache-Control生效

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

协商缓存的两种情况：

1、协商缓存生效，返回304，继续使用缓存

过程：

浏览器                 浏览器缓存     服务器

————————发起http请求————————>

<——该请求的缓存结果失效，只返回缓存标识——

————————携带该资源的缓存标识，发起http请求————————>

<—————————————304，该资源无更新————————————

——————获取该请求的缓存结果——————>

<——————返回该请求的缓存结果——————

2、协商缓存失败，返回200和请求结果

过程：

浏览器                 浏览器缓存     服务器

————————发起http请求————————>

<——该请求的缓存结果失效，只返回缓存标识——

————————携带该资源的缓存标识，发起http请求————————>

<————————200，资源已更新，重新返回请求和结果———————

——将该请求结果和缓存标识存入浏览器缓存中—>

协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的

控制协商缓存的字段：

(1) Last-Modified/If-Modified-Since：Last-Modified是服务器响应请求是，返回该资源文件在服务器最后被修改的时间；If-Modified-Since再次发起请求时，携带上次返回的Last-Modified的值，服务器将该字段值与该资源最后修改时间对比，决定是否用缓存

(2)Etag/If-None-Match：Etag服务器响应请求时，返回当前资源文件的一个唯一标识，由服务器生成之；If-None-Match是再次发起请求时，携带上次返回的唯一标识Etag的值，服务器收到后，将该字段值与该资源在服务器上的Etag对比，一致 则返回304，否则返回200

注：Etag/If-None-Match优先级高于Last-Modified/If-Modified-Since，同时存在时只有Etag/If-None-Match生效

浏览器缓存分为：内存缓存 和 硬盘缓存

内存缓存特性：

(1)快速读取：内存缓存会将编译解析后的文件，存入该进程的内存中，便于下次运行时快速读取

(2)时效性：一旦关闭进程，进程内存清空

硬盘缓存特性：

永久性：直接写入硬盘文件中

复杂、缓慢：读取缓存对该缓存存放的硬盘文件进行I/O操作，重新解析

from memory cache：使用内存中的缓存

from disk cache：使用硬盘中的缓存

浏览器读取顺序：memory ——> disk

浏览器将js和等文件解析执行后直接存入内存缓存中，F5刷新页面时，from memory cache(使用内存中的缓存)

css文件存入硬盘中，F5刷新页面时，from disk cache(使用硬盘中的缓存)

参考文章

https://segmentfaultcom/a/1190000017962411

https://wwwcnblogscom/chengxs/p/10396066html

对于访问的页面和请求，为了缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷，浏览器和服务器都有可能会对请求资源进行缓存，接下来的文章就简单介绍和分析浏览器的缓存机制。

深入理解浏览器的缓存机制：  https://wwwjianshucom/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与服务器的压力。

可以明显的看到请求时间，请求服务器资源时间 >> 请求磁盘缓存 > 请求内存缓存，所以合适的缓存策略，可以在不影响业务的情况下，极大地提升客户体验和后台服务器压力。

1webcache的简单介绍

 web缓存,是一种 缓存技术 ,用于临时存储(缓存)的网页文件,如HTML页面和图像等静态资源,减少带宽以及后端服务器的压力,通常一个WebCache也是一个 反向代理软件 ,既可以通过缓存响应用户的请求,当本地没有缓存时,可以代理用户请求至后端主机。

WebCache分为正向和反向之分，一般正向WebCache不常用,这次主要以反向WebCache为主。

2webcache的由来

 1)由于程序具有局部性,而局部性分为： 时间局部性和空间局部性

A时间局部性是指：在单位时间内,大部分用户访问的数据只是热点数据(热点数据指经常被访问的数据)

B空间局部性是指：某新闻网站突然出来一个重大新闻,此新闻会被被反复访问。

3webcache的变化性

  WebCache的新鲜度监测机制 ：数据都是可变的,所以缓存中的内容要做新鲜度检测

4缓存相关的HTTP首部:

HTTP协议提供了多个首部用以实现 页面缓存及缓存失效 的相关功能，这其中最常用的有：

1)Expires：HTTP/10,用于指定某web对象的过期日期/时间，通常为GMT格式；一般不应该将此设定过长的时间，一年的长度对大多场景来说足矣；其常用于为 纯静态内容 如JavaScripts样式表或指定缓存周期；

(2)Cache-Control：为了解决HTTP/10中对于新鲜度控制的策略而生,通过相对时间来控制缓存使用期限；

(3)Etag：响应首部，用于在 响应报文中为某web资源定义版本标识符 ；

(4)Last-Mofified：响应首部，用于回应客户端关于Last-Modified-Since或If-None-Match首部的请求，以通知客户端其请求的web对象最近的修改时间；

(5)If-Modified-Since：条件式请求首部，基于 请求内容的时间戳作验正 ,如果后端服务器数据的时间戳未发生改变则继续使用,反之亦然

(6)If-None-Match：条件式请求首部； 通过Etag来跟后端服务器进行匹配 ，如果数据的Etag未发生改变,既不匹配,则响应新数据,否则继续使用当前数据

(7)Vary：响应首部，原始服务器根据请求来源的不同响应的可能会有所不同的首部，最常用的是 Vary: Accept-Encoding，用于通知缓存机制其内容看起来可能不同于用户请求时 Accept-Encoding-header首部标识的编码格式；

(8)Age：缓存服务器可以发送的一个额外的响应首部，用于指定响应的有效期限；浏览器通常根据此 首部决定内容的缓存时长；如果响应报文首部还使用了max-age指令，那么缓存的有效时长为 “max-age减去Age”的结果；