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的区别