网络编程——HTTP缓存

HTTP缓存

HTTP缓存指的是: 客户端向服务器请求资源时，会先读取浏览器缓存，如果浏览器保存有“要请求资源”的副本，就直接从浏览器缓存中提取，而不从远端服务器中提取这个资源。

用途

HTTP缓存主要用在对一些实时性要求不高的静态文件，防止“多余”的请求重复访问服务器，对服务器造成压力，从而提高网站的性能。

http缓存机制只作用于 GET 请求。对于其他方式的请求则无能为力。

1. 减少了冗余的数据传输，节省了带宽。
2. 缓解了服务器的压力， 提高了网站的性能
3. 加快了客户端加载网页的速度

 

HTTP缓存机制

HTTP 缓存机制：配置服务器响应头来告诉浏览器，是否应该缓存资源、是否强制校验缓存、缓存多长时间；浏览器非首次请求根据响应头是否应该取缓存、服务器验证缓存是否可用。

 

http缓存的分类

客户端第一次请求资源时，服务器返回资源，并在respone header（响应头）中，回传资源的缓存参数；
客户端第二次请求时，浏览器判断这些请求参数，命中强缓存就直接返回200，否则就把请求参数加到request header（请求头）中，传给服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源。

根据是否需要重新向服务器发起请求来分类，可分为强制缓存，协商缓存。

1、强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，请求直接用缓存，不在时间内，执行协商缓存策略。
2、协商缓存，将缓存信息中的Etag和Last-Modified数据，通过请求头发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

如果命中强制缓存，客户端就不与服务器发生交互，而协商缓存不管是否生效，都需要客户端与服务端交互。

 

强制缓存

强制缓存就是利用时间来让缓存失效。强制缓存策略设定一个缓存时间段，超过这个时间段，缓存就失效，浏览器就会向服务器发起请求。没有超过缓存时间段，浏览器直接使用缓存数据，而不会向服务器发送请求。

强制缓存生效时，如果服务器端的资源修改了，只要时间没有过期，页面是取不到的，因为浏览器没有向服务器发请求。需要按组合键 Ctrl + F5刷新。 强制缓存下，页面的加载速度是最快的，性能也是很好的。

强制缓存相关的header报头属性有：

Pragma ，Cache-Control ， Expires。

Cache-Control     控制缓存行为。
Pragma    是  http1.0的字段，作用和Cache-Control大体相同 。

Pragma的优先级比Cache-Control高。Pragma和Cache-control共存时，如果使用了Pragma: 'no-cache'，再设置Expires或者Cache-Control，就没有用了。

http缓存报头，http1.1最常见的就是 ETag 和 Cache-Control 这两个标签，但是1.0还支持Expires，Pragma 和 Age等多个便签，不过这些都是作为向后兼容来使用的。

ETag：
ETag：它是文档版本的标识符。通常是内容的 MD5 值，不过它也可以包含其他内容，如版本/日期，
如：1.0 或者 2017-10-30。这里注意一点是，它必须用双引号括起来，
如：ETag: “d3b0756geyg42sd3edec49eaa6238ad5ff00”。

 

它们是通用报头属性（头部字段），请求头、响应头都可以包含。

 

协商缓存

就是对比缓存，对比缓存值存在于服务器端。浏览器第一次发起请求，服务器返回的响应头中，没有Cache-Control ，Expires  或者Expires过期，或者Cache-Control属性为no-cache，no-store时，代表不使用强缓存。

在没有走强缓存逻辑的情况下，服务器端会进行Last-Modified和Etag的校验，如果校验发现资源未更新，则会返回304(浏览器收到304会去取缓存呈现)，否则会返回新的资源实体。

将文件内容的hash值作为唯一标识，对文件内容取MD5值作为ETag字段 ， 传给浏览器端，假如这个文件内容没变化，那么MD5值也不会改变。：服务器端先判断文件修改时间是否发生了变化，如果发生了变化，那么再对比浏览器传来的If-None-Match即浏览器端保留的E-tag值，如果发生了变化，则证明文件修改了，需要浏览器重新下载文件，如果没有，则证明文件内容没变化，返回304状态码。

当文件最后修改时间没变，文件内容也没变的时候，返回304，让浏览器从缓存中拿取文件。

跟协商缓存相关的header头属性（报头域）有：

ETag/If-Not-Match（hash值） 、Last-Modified/If-Modified-Since（更改时间秒级）  ，请求头和响应头需要成对出现

ETag/If-Not-Match是在HTTP/1.1出现的，为的是补充标记更改时间的不足：

(1)、存在某些文件被修改，但是Last-Modified却改变了，导致文件没法使用缓存。

(2)、有可能存在服务器时间与代理服务器时间不一致的情形。

 

对应关系（更改时间）
Response：Last-Modified
Request：If-Modified-Since

对应关系（hash值 文件内容）
Response：E-tag
Request：If-None-Match

 

协商缓存的流程：

服务器返回的响应头中会包含协商缓存的头属性（报头域）：

响应头：ETag和Last-Modified，其中

ETag（文件的内容标识）包含的是一个hash值，

Last-Modified（文件最后修改时间）包含的是GMT格式的修改时间。

浏览器将这两个字段及文件缓存起来。浏览器第二次发送请求，会在请求头中带上If-Not-Match，它的值就是响应头返回的ETag值；请求头带上If-Modified-Since，就是上次响应头返回的Last-Modified值。服务器会比较这两个报头域，对比判断资源是否有修改更新。如果服务器的资源没有被更新，那么服务器就会返回304状态码，用于告知浏览器，可以使用缓存中的数据，以此减少服务器的数据传输压力。如果服务器的资源数据已被更新，服务器就会返回200状态码，并将服务器的资源和新的缓存信息一起返回。

协商缓存每次都会与后台服务器进行交互，所以性能上不是很好。从性能上不如强缓存。

 

缓存的报头域

设置缓存是通过设置，请求头和响应头的属性实现的。不设置响应头，则浏览器每次都向服务器发送新的请求。

Expires 

Expires:Sat, 24 Jan 2015 20:30:54 GMT

如果http响应报文中设置了Expires，在Expires过期之前，浏览器无需向浏览器发出请求，只需要自己判断浏览器缓存是否过期就可以了，完全不增加服务器的负担。

HTTP1.1引入了Cache-control显示指令，来让网站发布者可以更全面地控制他们的内容，并对过期时间进行限制（控制是否缓存，怎么缓存）

Expires属性很好，但是我们每次都得算一个精确的时间。Cache-control属性的max-age 标签，可以让我们更加容易的处理过期时间。我们只需要说，这份资料只能用一个星期就可以了。

Max-age 使用秒来计量，如：
Cache-Control:max-age=749897
指定页面749897秒后过期。

 

控制浏览器是否可以缓存资源、强制缓存校验、缓存时间。

ETag                  文件指纹（文件内容生成的hash码， 强校验） 
Last-Modified    请求的资源最近更新时间，根据文件修改时间，弱校验，不精确
Expires               资源缓存过期时间    与响应头中的 Date 对比
 
If-None-Match        缓存响应头中的 ETag 值    发送给服务器比对文件是否更新（精确）
If-Modified-Since    缓存响应头中的 Last-Modified 值    发送给服务器比对文件是否更新（不精确）

Last-Modified

服务器为了通知浏览器当前文件的版本，会发送一个上次修改时间的标签，例如：
Last-Modified:Tue, 06 Jan 2015 08:26:32 GMT

gzip
gzip压缩：网页中出现最频繁的HTML、CSS、javascript、XML等文件，这类本身是没有经过压缩的文本文件，可以取得较好的压缩效果

 

明确禁止缓存，设置响应头
Cache-Control: no-cache, no-store, must-revalidate

确保服务器提供了验证令牌 ETag ：提供资源对比机制。服务器每次验证文件的话，太耗性能，现代前端构建工具都能自动更新文件hash，不需要设置ETag 了，直接设置长缓存时间。

 

Cache-Control报头域

在请求头和响应头中都可以使用，用来客户端和服务器沟通缓存策略的，意义大致相同也有差异。
 

Cache-Control作为请求头部

1、Cache-Control: no-cache

请求头中包含Cache-Control： no-cache ，则表示客户端不会接收缓存过的响应。“中间”的缓存服务器必须把客户端请求转发给源服务器。强制向源服务器再次验证，走协商缓存。

2、Cache-Control: max-age=604800（单位：秒）

当请求头中包含 max-age 指令时，
如果判定缓存资源的缓存时间数值比指定时间的数值更小，那么服务端就直接返回304，客户端会使用自己本地缓存的资源。 另外，当指定 max-age 值为 0，那么服务器就会使用ETag和modefied-time验证，来决定返回304还是200。

HTTP/1.1 版本的缓存服务器遇到同时存在 Expires 首部字段的情况时，会优先处理 max-age 指令，而忽略掉 Expires 首部字段。而 HTTP/1.0 版本的缓存服务器的情况却相反（不用管了因为以后淘汰1.0了）。

Cache-Control 可设置的字段值有：
private ：客户端可以缓存。私有缓存，浏览器级缓存，只能用于单独的用户：Cache-Control: Private
public ：客户端和代理服务器都可缓存。共享缓存，代理级缓存，可以被多个用户使用: Cache-Control: Public
大部分情况可以认为public和private是一样的。

Cache-Control作为响应头部

Cache-Control: public

表示缓存的版本可以被代理服务器或者其他中间服务器识别。表示一些中间代理、CDN等可以缓存资源，即便是带有一些敏感 HTTP 验证身份信息甚至响应状态代码通常无法缓存的也可以缓存。 public 是非必须的，因为响应头 max-age 信息已经明确告知可以缓存了。

Cache-Control: private

意味着这个文件对不同的用户是不同的。只有用户的浏览器能够缓存，不允许公共的代理服务器缓存。明确告知此资源只有用户可以缓存，即发起的浏览器可以缓存，中间代理不能缓存。例如：百度搜索时，特定搜索信息只能被发起请求的浏览器缓存。

响应只以特定的用户作为对象。 缓存服务器会对该特定用户提供资源缓存的服务，对于其他用户发送过来的请求，代理服务器则不会返回缓存。

确定中间代理可以缓存哪些资源：对于个人隐私信息可以设置 private，对于公共资源例如 CDN 资源可以设置 public。
为每个资源设置最佳的缓存寿命：max-age 或 Expires，对于不经常变动或不变的资源设置尽可能大的缓存时间，充分利用缓存性能。

Cache-Control: no-cache

明确禁止缓存文件的内容，缓存服务器不能对资源进行缓存。这在搜索或者翻页结果中非常有用，因为同样的URL，对应的内容会发生变化。源服务器也将不再确认，缓存服务器请求中提出的资源有效性，且禁止缓存服务器缓存响应资源。明确告诉浏览器不要缓存资源。效果和不设置一样。

服务器设置响应头
Cache-Control: no-cache, no-store, must-revalidate  有差别

确认网站的层次机构：例如单页面技术，频繁更新的主入口 index.html 文件，设置较短的缓存周期或 no-cache 强制缓存验证，以确保外链资源的及时更新。

Cache-Control: no-cache=Location

响应头包含字段 Cache-Control 中对 no-cache 字段名具体指定参数值，那么客户端在接收到这个被指定参数值的首部字段对应的响应报文后，就不能使用缓存。换言之，无参数值的首部字段可以使用缓存。只能在响应指令中指定该参数。

Cache-Control: no-store

暗示请求和响应中包含机密信息。该指令规定缓存不能在本地存储请求或响应的任一部分。事实上 no-cache 代表不缓存过期的资源，缓存会向源服务器进行有效期确认后处理资源。no-store 才是真正的不进行缓存。

 

Cache-Control: max-age=604800（单位：秒）

服务器在响应头中加了：
"Cache-Control:max-age=60"，就是告诉浏览器，这个文件只能在浏览器端存60秒。

同时存在 Expires 首部字段的情况时，应用 HTTP/1.1 版本的缓存服务器 ，会优先处理 max-age 指令，而忽略掉 Expires 首部字段。而 HTTP/1.0 版本的缓存服务器的情况却相反。

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

s-maxage 指令的功能和 max-age 指令的相同，不同点是 smaxage 指令只适用于供多位用户使用的公共缓存服务器 ，如CDN缓存。对于向同一用户重复返回响应的服务器来说，这个指令没有作用。使用 s-maxage 指令后，公共缓存服务器会忽略对 Expires 首部字段及 max-age 指令的处理。
 

浏览器缓存刷新 

1.  在地址栏中输入网址后按回车或点击转到按钮
浏览器以最少的请求来获取网页的数据，浏览器会对所有没有过期的内容直接使用本地缓存，从而减少了对浏览器的请求。所以，Expires，max-age标记只对这种方式有效。

2.  按F5或浏览器刷新按钮
浏览器会在请求中附加必要的缓存协商，但不允许浏览器直接使用本地缓存，它能够让 Last-Modified、ETag发挥效果，但是对Expires无效。

3.  按Ctrl+F5或按Ctrl并点击刷新按钮
这种方式就是强制刷新，总会发起一个全新的请求，不使用任何缓存。

html使用HTTP缓存 

html页面缓存的设置主要是在<head>标签中嵌入<meta>标签，这种方式只对页面有效，对页面上的资源无效
html页面缓存的设置如下：
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />