前言

本文参考简书-浪里行舟深入理解浏览器的缓存机制, 根据自己的思考总结压缩整理

缓存过程的分析

浏览器和服务器通信: 浏览器发起HTTP请求 – 服务器响应该请求

浏览器第一次向服务器发起该请求后拿到响应结果后，将请求结果和缓存标识存入浏览器缓存，浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。如图

由上图我们可以知道非常重要的两点

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

浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

简单总结: 每次请求都会先找缓存, 每次得到响应都会存入缓存

强缓存

不会向服务器发送请求，直接从缓存中读取资源
强缓存可以通过设置两种 HTTP Header 实现：Expires(有效期) 和 Cache-Control。(两者同时存在的话，Cache-Control优先级高于Expires)

Expires

缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。 也就是说，Expires=max-age + 请求时间，需要和Last-modified结合使用。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

Expires 是 HTTP/1 的产物，受限于本地时间，如果修改了本地时间，可能会造成缓存失效。

Cache-Control

HTTP/1.1新增的，主要用于控制网页缓存。比如当Cache-Control:max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的300秒内再次加载资源，就会命中强缓存。

Cache-Control 可以在请求头或者响应头中设置，并且可以组合使用多种指令：

no-cache：客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存。

no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。

主要有以下两种情况：

协商缓存生效，返回304和Not Modified
协商缓存失效，返回200和请求结果

Last-Modified和If-Modified-Since

浏览器在第一次访问资源时，服务器返回资源的同时在响应头中添加 Last-Modified，值是这个资源在服务器上的最后修改时间，浏览器接收后缓存文件和响应头；

浏览器下一次请求这个资源，浏览器检测到有 Last-Modified，又添加If-Modified-Since请求头，值就是Last-Modified中的值；服务器再次收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回304和空的响应体，直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，于是返回新的资源文件和200

简单总结: 第一次请求, 服务器返回Last-Modified, 第二次请求, 浏览器发送请求, 服务器根据Last-Modified判断是否要走缓存

弊端

如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源
因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源

ETag和If-None-Match

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上，那么直接以常规GET 200回包形式将新的资源（当然也包括了新的ETag）发给客户端；如果ETag是一致的，则直接返回304知会客户端直接使用本地缓存即可。

两者之间对比：

首先在精确度上，Etag要优于Last-Modified。
Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。

第二在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
第三在优先级上，服务器校验优先考虑Etag

缓存机制

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)
协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。

浏览器缓存机制(强缓存和协商缓存)总结相关推荐

浏览器缓存机制(强缓存和协商缓存)
1.为什么需要浏览器缓存? 当我们访问同一个页面时,请求资源.数据都是需要一定的耗时,如果可以将一些资源缓存下来,那么从第二次访问开始,就可以减少加载时间,提高用户体验,也能减轻服务器的压力 2.有哪 ...
http状态码304缓存机制(强缓存和协商缓存-304)
前言:好久没写博客了,今天早上闲着没事重新看了下http的304缓存机制.下面我就简单的讲下我的理解吧. 描述:首先我们先明白一点什么是状态码.对于我们开发来说,大家一说起http状态码,都能随口说几 ...
200（强缓存）和304（协商缓存）的区别
本文原链接:https://my.oschina.net/ososchina/blog/494074 https://blog.csdn.net/zl399615007/article/details ...
mysql的缓存机制是什么意思_MySQL缓存机制详解
众所周知,缓存的设置是所有现代计算机系统发挥高性能的重要因素之一.对于MySQL数据库来说,也是得益于MySQL缓存机制,才能够提高MySQL数据库的性能,减少数据的内存占比. MySQL缓存机制简单 ...
HTTP缓存机制及原理（强制缓存/协商缓存）
可以参考文章:https://www.imooc.com/article/267319#comment 主要感觉里面的图很好. 强制缓存(Expires/Cache-Control): 协商缓存: 1 ...
html5 客户端数据缓存机制,深入理解HTML5离线缓存机制
TML5提供了一种离线应用缓存机制,使得网页应用可以离线使用,这种机制在移动端浏览器上支持度非常广,所有版本的android和ios浏览器都能很好的支持.我们可以放心的使用该特性来加速移动端页面的访问 ...
浏览器的缓存机制优点缺点协商缓存和强缓存浏览器缓存过程如何判断强缓存是否过期
缓存的优点: 减少了不必要的数据传输,节省带宽减少服务器的负担,提升网站性能加快了客户端加载网页的速度用户体验友好缺点: 资源如果有更改,会导致客户端不及时更新就会造成用户获取信息滞后当浏览 ...
浏览器缓存机制，强缓存，弱缓存
目录 web缓存类型浏览器缓存规则: 浏览器缓存的控制 cache-control总结 Expires Last-modified & If-modified-since Etag & ...
http缓存（浏览器缓存）——强缓存、协商缓存
定义:利用浏览器存储机制,将一部分数据保存在客户端,从而减少对服务器的请求降低服务器的压力,提升效率. 为什么需要http缓存: 为了减少网络请求的数量和体积,让页面加载更加方便当网络不稳定时,仍可 ...

浏览器缓存机制(强缓存和协商缓存)总结

文章目录

前言