购买空间网站哪个好,php代码删除网站,网站建设公司ipo,国外app界面设计网站转载自 干货 | 彻底弄懂 HTTP 缓存机制及原理 前言 Http 缓存机制作为 web 性能优化的重要手段#xff0c;对于从事 Web 开发的同学们来说#xff0c;应该是知识体系库中的一个基础环节#xff0c;同时对于有志成为前端架构师的同学来说是必备的知识技能。 但是对于很多…转载自  干货 | 彻底弄懂 HTTP 缓存机制及原理 前言 Http 缓存机制作为 web 性能优化的重要手段对于从事 Web 开发的同学们来说应该是知识体系库中的一个基础环节同时对于有志成为前端架构师的同学来说是必备的知识技能。 但是对于很多前端同学来说仅仅只是知道浏览器会对请求的静态文件进行缓存但是为什么被缓存缓存是怎样生效的却并不是很清楚。 在此我会尝试用简单明了的文字像大家系统的介绍HTTP缓存机制期望对各位正确的理解前端缓存有所帮助。 在介绍HTTP缓存之前作为知识铺垫先简单介绍一下HTTP报文 HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。 浏览器向服务器请求数据发送请求(request)报文服务器向浏览器返回数据返回响应(response)报文。 报文信息主要分为两部分 1.包含属性的首部(header)--------------------------附加信息cookie缓存信息等与缓存相关的规则信息均包含在header中 2.包含数据的主体部分(body)-----------------------HTTP请求真正想要传输的部分 缓存规则解析 为方便大家理解我们认为浏览器存在一个缓存数据库,用于存储缓存信息。 在客户端第一次请求数据时此时缓存数据库中没有对应的缓存数据需要请求服务器服务器返回后将数据存储至缓存数据库中。 HTTP缓存有多种规则根据是否需要重新向服务器发起请求来分类我将其分为两大类(强制缓存对比缓存)。 在详细介绍这两种规则之前先通过时序图的方式让大家对这两种规则有个简单了解。 已存在缓存数据时仅基于强制缓存请求数据的流程如下 已存在缓存数据时仅基于对比缓存请求数据的流程如下 对缓存机制不太了解的同学可能会问基于对比缓存的流程下不管是否使用缓存都需要向服务器发送请求那么还用缓存干什么 这个问题我们暂且放下后文在详细介绍每种缓存规则的时候会带给大家答案。可以点击此处查看浏览器的缓存机制。 我们可以看到两类缓存规则的不同强制缓存如果生效不需要再和服务器发生交互而对比缓存不管是否生效都需要与服务端发生交互。 两类缓存规则可以同时存在强制缓存优先级高于对比缓存也就是说当执行强制缓存的规则时如果缓存生效直接使用缓存不再执行对比缓存规则。 强制缓存 从上文我们得知强制缓存在缓存数据未失效的情况下可以直接使用缓存数据那么浏览器是如何判断缓存数据是否失效呢 我们知道在没有缓存数据的时候浏览器向服务器请求数据时服务器会将数据和缓存规则一并返回缓存规则信息包含在响应header中。 对于强制缓存来说响应header中会有两个字段来标明失效规则Expires/Cache-Control使用chrome的开发者工具可以很明显的看到对于强制缓存生效时网络请求的情况。可以点击此处查看浏览器的缓存机制。 Expires Expires的值为服务端返回的到期时间即下一次请求时请求时间小于服务端返回的到期时间直接使用缓存数据。 不过Expires 是HTTP 1.0的东西现在默认浏览器均默认使用HTTP 1.1所以它的作用基本忽略。 另一个问题是到期时间是由服务端生成的但是客户端时间可能跟服务端时间有误差这就会导致缓存命中的误差。 所以HTTP 1.1 的版本使用Cache-Control替代。Cache-Control Cache-Control 是最重要的规则。常见的取值有private、public、no-cache、max-ageno-store默认为private。 private:             客户端可以缓存 public:              客户端和代理服务器都可缓存前端的同学可以认为public和private是一样的 max-agexxx:   缓存的内容将在 xxx 秒后失效 no-cache:          需要使用对比缓存来验证缓存数据后面介绍 no-store:           所有内容都不会缓存强制缓存对比缓存都不会触发对于前端开发来说缓存越多越好so...基本上和它说886 举个板栗 图中Cache-Control仅指定了max-age所以默认为private缓存时间为31536000秒365天 也就是说在365天内再次请求这条数据都会直接获取缓存数据库中的数据直接使用。 对比缓存 对比缓存顾名思义需要进行比较判断是否可以使用缓存。 浏览器第一次请求数据时服务器会将缓存标识与数据一起返回给客户端客户端将二者备份至缓存数据库中。 再次请求数据时客户端将备份的缓存标识发送给服务器服务器根据缓存标识进行判断判断成功后返回304状态码通知客户端比较成功可以使用缓存数据。 第一次访问 再次访问 通过两图的对比我们可以很清楚的发现在对比缓存生效时状态码为304并且报文大小和请求时间大大减少。 原因是服务端在进行标识比较后只返回header部分通过状态码通知客户端使用缓存不再需要将报文主体部分返回给客户端。 对于对比缓存来说缓存标识的传递是我们着重需要理解的它在请求header和响应header间进行传递一共分为两种标识传递接下来我们分开介绍。 Last-Modified  /  If-Modified-SinceLast-Modified 服务器在响应请求时告诉浏览器资源的最后修改时间。If-Modified-Since 再次请求服务器时通过此字段通知服务器上次请求时服务器返回的资源最后修改时间。 服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。 若资源的最后修改时间大于If-Modified-Since说明资源又被改动过则响应整片资源内容返回状态码200 若资源的最后修改时间小于或等于If-Modified-Since说明资源无新修改则响应HTTP 304告知浏览器继续使用所保存的cache。 Etag  /  If-None-Match优先级高于Last-Modified  /  If-Modified-Since Etag 服务器响应请求时告诉浏览器当前资源在服务器的唯一标识生成规则由服务器决定。If-None-Match 再次请求服务器时通过此字段通知服务器客户段缓存数据的唯一标识。 服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对 不同说明资源又被改动过则响应整片资源内容返回状态码200 相同说明资源无新修改则响应HTTP 304告知浏览器继续使用所保存的cache。 总结 对于强制缓存服务器通知浏览器一个缓存时间在缓存时间内下次请求直接用缓存不在时间内执行比较缓存策略。可以点击此处查看浏览器的缓存机制。 对于比较缓存将缓存信息中的Etag和Last-Modified通过请求发送给服务器由服务器校验返回304状态码时浏览器直接使用缓存。浏览器第一次请求 浏览器再次请求时