强缓存和协商缓存区别和过程

1、强缓存（本地缓存）

1.1. 概念

不用跟服务器进行通信，直接使用本地缓存的资源，

1.2. 相关header字段

expires ------ HTTP1.0使用的expires
一个未来时间，代表资源的有效期，没有过期之前都使用当前资源。
cache-control------HTTP1.1及其之后使用cache-control
max-age: 当值设为max-age=300时，则代表在这个请求正确返回时间(浏览器也会记录下来)的5分钟内再次加载资源，就会命中强缓存。
no-cache：不使用本地缓存。向浏览器发送新鲜度校验请求
no-store：禁止浏览器缓存数据，也禁止保存至临时文件中，每次都重新请求，
pubilc：任何情况下都缓存（即使是HTTP认证的资源）
private：只能被终端用户的浏览器缓存，不允许CDN等中间层缓存服务器对其进行缓存。

F5 刷新后无效，Ctrl + F5 强制刷新后无效
如何重新加载缓存过的资源?----------更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源

2、协商缓存

2.1、概念

首先，将所缓存资源的信息发送给服务器，
其次，让服务器判断资源是否已经更新了,

若已更新，则返回更新后的资源；
若没有更新，则返回304状态，告诉浏览器可直接使用本地缓存的资源，

整个过程至少与服务器通信一次

2.2、相关header字段

响应头： Last-Modified
请求头： If-Modified-Since ( 资源修改的时间 )

1. 浏览器第一次发请求，服务器在返回的 respone 的 header 加上 Last-Modified，
表示资源的最后修改时间2. 再次请求资源，在 requset 的 header 加上 If-Modified-Since ，值就是上一次请求返回的 Last-Modified 值3. 服务器根据请求传过来的值判断资源是否有变化，没有则返回 304，有变化就正常返回资源内容，更新 Last-Modified 的值4. 304 从缓存加载资源，否则直接从服务器加载资源

响应头：Etag
请求头：If-None-Match（标识符字符串）

一个标识符字符串，表示文件唯一标识，只要文件内容改动，ETag就会重新计算。缓存流程和 Last-Modified 一样。

2.3、Last-Modified 与 Etag 的对比：

如果我们打开文件但并没有修改其内容，Last-Modified 也会改变，而Etag则不会改变。
Last-Modified 的时间单位为秒，如果一秒内对文件进行了多次修改，那么由于其时间单位是秒，所以Last-Modified不会改变，最终浏览器还是会去读取缓存资源，而此时缓存的资源已经过时了。
Etag的优先级高于Last-Modified。

2.4、为什么协商缓存有两个属性一起出现

协商缓存是浏览器判断资源是否可用，所以需要两个标识，

第一个是第一次请求的响应头带上某个字段（Last-Modified或者Etag），

第二个则是后续请求带上的对应请求字段（If-Modified-Since或者If-None-Match），

两个标识一起出现才有意义，单独则没有什么效果。

3、浏览器缓存过程（强缓存转协商缓存的过程）

1.浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把文件、文件的返回时间、response header一并缓存；
2.下一次加载资源时，先比较当前时间和上一次返回200时的时间差，
如果HTTP为1.0时，则用expires判断是否过期
如果HTTP为1.1及其以上时，则查看cache-control，如果值是no-cache，则表示不缓存，则直接去请求数据；如果是max-age，则判断时间差是否大于max-age，若小于max-age，则表示没有过期，命中强缓存，不发请求直接从本地缓存读取该文件；如果时间差大于max-age，则表示资源过期了，则向服务器发送请求，并且header中携带有If-None-Match、If-Modified-Since、Etag值等
3.如果服务器收到的请求头中，有Etag值，优先根据Etag的值判断被请求的文件有没有做修改，
如果Etag值一致则没有修改，命中协商缓存，返回304，则读取缓存资源；
如果Etag值不一致则有改动，则直接返回新的资源，并带上新的Etag值；
4.如果服务器收到的请求头中，没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，
如果一致则没有修改，命中协商缓存，返回304；
如果不一致则有修改，则返回新的文件和并在响应头中携带last-modified ，下次请求时通过If-Modified-Since携带上last-modified的值；

作者：肆意木
链接：https://www.jianshu.com/p/f6525b0f8813
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

强缓存和协商缓存区别和过程相关推荐

前端协商缓存强缓存如何使用_强制缓存和协商缓存有什么区别
1.背景介绍做前端有两个比较令人头痛的事,一个是命名,另一个就是缓存了.HTTP协议提供了非常强大的缓存机制, 了解这些缓存机制,对提高网站的性能非常有帮助. 2.知识剖析什么是浏览器缓存浏览器 ...
http缓存中，强缓存和协商缓存的区别？
答:浏览器缓存的作⽤是什么缓存可以减少冗余的数据传输.节省了⽹络带宽,从⽽更快的加载⻚⾯. 缓存降低了服务器的要求,从⽽服务器更快的响应缓存的资源⽂件到什么地⽅去了呢? 那么⾸先来看下 memor ...
说说web缓存-强缓存、协商缓存
网上关于WEB缓存的文章很多,今天汇总一下. 为什么要用缓存一般针对静态资源如CSS,JS,图片等使用缓存,原因如下: 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影 ...
浏览器缓存——强缓存、协商缓存
目录浏览器缓存:强缓存.协商缓存 #强缓存 #协商缓存 #补充 #拓展浏览器缓存:强缓存.协商缓存区别:强缓存不向服务器发送请求,协商缓存会发送请求至服务器相同点:若命中,都直接从浏览器缓存加 ...
浏览器缓存（强缓存和协商缓存）
什么是浏览器缓存(强缓存和协商缓存) 浏览器缓存是浏览器将用户请求过的静态资源(html.css.js),存储到电脑本地磁盘中,当浏览器再次访问时,就可以直接从本地加载了,不需要再去服务端请求了. ...
强制缓存和协商缓存的区别
什么是浏览器缓存浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档. 浏览器缓存的优点有: 1 ...
你知道304吗？图解强缓存和协商缓存
http协议-常见状态码,请求方法,http头部,http缓存一.http状态码 1.引例阐述 2.状态码分类 3.常见状态码 4.关于协议和规范二.http 方法 1.传统的methods 2. ...
浏览器缓存机制(强缓存和协商缓存)
1.为什么需要浏览器缓存? 当我们访问同一个页面时,请求资源.数据都是需要一定的耗时,如果可以将一些资源缓存下来,那么从第二次访问开始,就可以减少加载时间,提高用户体验,也能减轻服务器的压力 2.有哪 ...
超实用的前端强缓存与协商缓存
超实用的前端强缓存与协商缓存一.区别强缓存: 缓存后完全不向服务器发起任何请求,只在缓存时间过期后才对服务器发起请求, 响应码为 200 (from memory cache),即从内存中进行加载 ...