HTTP浏览器缓存粗解

前言：

请求一个页面或文件时，观察开发者工具中的Network页签中，此文件的请求状态，会发现常见的会出现200或304状态，作为前端开发，200状态最为熟悉，而304，也是成功的请求，只不过是使用了本地缓存而已。

使用本地缓存，至少有两个好处：

• 加快页面的展示速度，因为不用再从服务器把文件下载一遍。
• 能极大的节约服务器宽带。

可能缩短用户的展示速度，只是提高用户体验，对开发人员没太多益处（当然作为有责任感的开发，这点也不能忽略），但节约服务器宽带，则能给技术开发人员减少极大的压力了。

所以得学。

请求头和响应头

要说缓存，首先需要了解请求头。
每一个请求，发出的时候，会自带一个请求头：Request Headers；
响应返回的时候，自带一个响应头：Response Headers；

缓存主要由服务器响应时，在响应头中设置缓存方案，主要是设置两个字段：

• expires：不支持HTTP1.1及更高级的HTTP版本，设置一个资源到期时间点。
• cache-control：只支持HTTP1.1和更高级的HTTP版本，优先级高于expires，能控制本地缓存（私有缓存，或者成为浏览器缓存）和共享缓存（代理服务器缓存）

浏览器的HTTP缓存分为两种：

• 强缓存：手动设置了expires或cache-control。
• 协商缓存：未设置上面两个字段时为此模式，则为通用的默认缓存模式，通过对比服务器文件更新时间Last-Modified，和源服务器文件每次更新时，自动生成的版本号ETag，来判断是发送新文件，还是返回状态码304，来告知浏览器使用浏览器缓存。

注：强缓存只是设置时间间隔，减少了刷新时请求服务器的次数，当请求发出后，同样也是使用协商缓存模式处理。

本文以下出现的服务器，如无特殊说明，指的是直接能访问到的服务器，比如若有代理服务器，则指的是代理服务器；若无代理服务器，则为源服务器。

1. 请求头 Request Headers

第一次请求资源，没有任何缓存的余地，请求头中的相关字段如下：

• cache-control 当前浏览器的缓存情况：

  • no-cache：一般为第一次请求、或强制刷新、或明确设置no-store的不缓存时，告知后台我这儿完全没有缓存，返回值正常为200
  • 不会发出请求：非页面html文件，设置了缓存时间，且此文件尚未过期，状态码200
  • max-age=0：当前的页面htlm文件，每次打开页面都会请求一次，状态值200或304
  • 没有此字段：非第一次，设置了过期时间，但是过期了

• if-modified-since 非第一次请求，才会有：

  • 用于协商缓存，判断文件有没有更新的依据，内容是上次响应时返回的Last-Modified字段，意思是服务器此文件的最后更新时间

• If-None-Match：非第一次请求，才会有：

  • 用于协商缓存，判断文件有没有更新的依据，内容是上次响应时返回的ETag字段，意思是服务器此文件的最后一个更新时，服务器随机生成的版本号
• Pragma 只第一次请求出现，值为no-cache，效果和cache-control: "no-cache" 等同，用于兼容http1.0

2. 响应头 Response Headers

设置位置：

• web服务器设置，比如 nginx Apache等（推荐）
• 若为前后台未分离项目，可由后台代码中设置
• 可由前端，在html页面中，使用标签设置

相关字段说明:

• expires 到期时间
• 已被cache-control取代，其值类似于："Wed, 08 Jan 2020 08:25:55 GMT"
• cache-control 缓存执行方案设置的常用值：
• max-age=秒数：单位为秒的时间间隔，向服务器请求一次之后，再次想要请求时的间隔未超过此时间，则不会发出请求，直接使用本地缓存，状态码200；直到时间超过，才能发出请求，但如果服务器对比后，发现此文件未变化，则返回304，仍是使用缓存，若变化了，才会发送新文件，并返回200
• s-maxage=秒数：功能同max-age=秒数，只对代理服务器生效，优先级高于max-age=秒数
• private：只允许浏览器缓存
• public：可以被代理服务器缓存
• must-revalidate：表示浏览器中的文件被命中，必须要检查源服务器是否有更新，即使已经有缓存
• proxy-revalidata：表示代理服务器每次被请求，必须要检查源服务器是否有更新，即使已经有缓存
• no-cache：看似是不缓存，其实仍然有缓存，只不过每次都会向源服务器对比一下文件，仍会出现304
• no-store：浏览器和代理服务器真实不缓存，每次都直接请求并获取文件

• Date: 此文件在页面中被使用的时间

  • 最近一次向服务器请求时，服务器返回的时间，若最近几次刷新，都直接使用了浏览器缓存，没有发出请求，则值不变，其值类似"Tue, 08 Jan 2019 08:14:59 GMT其值类似

• Last-Modified 服务器中，此文件的最后更新时间

  • 当浏览器再次发出请求此文件时，会把此值放在请求头If-Modified-Since字段中（见上面请求头说明），其值类似"Tue, 08 Jan 2019 06:45:12 GMT"

• ETag 每次源服务器的文件更新，自动生成的文件的版本号，HTTP1.1才支持

  • 当浏览器再次发出请求此文件时，会把此值放在请求头If-None-Match字段中（见上面请求头说明），优先级高于Last-Modified，其值类似"5c3446f8-57b"

注：HTTP1.0于1996年提出，HTTP1.1于1999年提出，HTTP2.0于2015年提出，当前应用最广泛的为HTTP1.1。

注：当使用PUT方法，对服务器资源进行更新的时候，请求头可能还会出现If-Match这个字段，这个字段与If-None-Match在使用方式类似，但功能不同；
这个字段会把旧文件的Etag带给服务器，服务器在对比当前文件的Etag是否和If-None-Match（旧文件的Etag）相同，如果相同，说明此时服务器仍是旧文件，则可以覆盖更新；若不同，说明此文件已被更新过，不再进行预期的覆盖更新。

不同的缓存配置和生效时机

以下为响应头设置不同的cache-control，在非html文件、不同的请求方式时，请求的情况和请求头的cache-control的值，和网络和资源正常时，状态码的值。

请求方式	max-age=秒数	未设置	no-cache	no-store
首次请求或Ctrl + F5	no-cache，200，发出请求，得到全部正文。	no-cache，200，发出请求，得到全部正文。	no-cache，200，发出请求，得到全部正文。	no-cache，200，发出请求，得到全部正文。
再次请求，或输入链接回车打开	若未过期，不发出请求，200，直接使用浏览器缓存；若过期，则无此字段，走协商缓存，可能200或304	不发出请求，200，直接使用浏览器缓存	无此字段，走协商缓存，可能200或304	无此字段，200，发出请求，得到全部正文。
F5 刷新	同上	同上	同上	同上

html文件再第一次请求，和以上的资源情况相同，且无论首次的响应头中cache-control为何值，非第一次请求的请求头中的cache-control字段均为max-age=0，使用协商缓存。

html文件是整个页面的入口，只要html未发生变化，那说明引用的资源的名字，是没有发生变化的，资源的请求动向会符合上面的表格；如果发生了变了，那新变化的资源，都会进行首次请求（如果很早之前，这个资源被使用过，则同样走上面的表格）。

前端缓存的文件类别和缓存位置

前端既然能缓存，那肯定也是需要分一些类别的。

WebKit内核，将资源分为两个大类，一个是主资源，比如html文件和下载项；二是派生资源，比如页面中的图片、js、css等资源。

如果主资源访问失败，那会立刻进行报错，比如404（不存在该资源），403（资源拒绝此次访问）等等；
只要主资源可以访问完成，那么基础的页面就可以展示了，此时如果其他的派生资源，比如css样式文件，js脚本文件，图片文件等资源无法访问，也只会在控制台进行报错。

派生资源是可以缓存的，那么缓存位置也需要明了一下

当前前端缓存的文件，主要有两个位置：

• from memory cache：缓存在内存中，当浏览器关闭，资源清除，也就是缓存被清除。
• from disk cache：缓存在磁盘中，可以长久缓存，即使电脑重启也无妨，但只能缓存派生资源。

这个位置，是可以在前台的控制台的network页签中看到的，且也只有当用到该缓存的文件时，才会展示，如下图所示：

在Size一栏中，270B表示发出了请求，表示了该文件的大小；
from memory cache就显而易见了，表示未发出请求，直接从内存中拿的现有的已缓存的资源；
from disk cache同样表示未发出请求，只不过是从磁盘中直接拿的资源；

拓展

HTTP1.0和HTTP1.1的一些区别

HTTP1.0最早在网页中使用是在1996年，那个时候只是使用一些较为简单的网页上和网络请求上，而HTTP1.1则在1999年才开始广泛应用于现在的各大浏览器网络请求中，同时HTTP1.1也是当前使用最为广泛的HTTP协议。 主要区别主要体现在：

• 缓存处理，在HTTP1.0中主要使用header里Last-Modified和Expires来，来实现协商缓存，而HTTP1.1则引入了更多的缓存控制策略例如Etag，If-Unmodified-Since（用于断点续传），cache-control, If-None-Match等更多可供选择的缓存头来控制缓存策略。
• 带宽优化及网络连接的使用，HTTP1.0中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，HTTP1.1则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接。
• 错误通知的管理，在HTTP1.1中新增了24个错误状态响应码，如409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。
• Host头处理，在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域，且请求消息中如果没有Host头域会报告一个错误（400 Bad Request）。
• 长连接，HTTP 1.1支持长连接（PersistentConnection）和请求的流水线（Pipelining）处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。

注：参考链接：HTTP1.0、HTTP1.1 和 HTTP2.0 的区别

HTTPS与HTTP的一些区别

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

• HTTPS协议需要到CA申请证书，一般免费证书很少，需要交费。
• HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密的。
• HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
• HTTPS可以有效的防止运营商劫持，解决了防劫持的一个大问题。

注：参考链接：HTTP与HTTPS的区别