当浏览器第一次加载资源的时候,返回一般为200,意思是成功获取资源,并会在浏览器的缓存中记录下max-age,第二次访问的时候:如果只是用浏览器打开,那么浏览器会去判断这个资源在缓存里有没有,如果有的话,会去判断max-age,看看过期没有,如果没有过期,则直接读缓存,根本不会和服务器进行交互,换句话说,断网都能打开,就和本地跑一样!如果已经过期了,那就去服务器请求,等待服务器响应,这是很费时间的,服务器如果发现资源没有改变过,那么就会返回304,告诉浏览器,我没变过,你去读缓存吧,于是浏览器也不用从服务器拉数据了,然而,等待服务器响应也是一个很要命的问题,在网速发达的今天,等一个响应,有时比下载还慢。如果是用浏览器刷新的,那么浏览器不会去判断max-age了,直接去服务器拿,如果服务器判断资源没变过,则还是会返回304,和上面是一样的,所以刷新一下,其实很可怕,等于把所有的资源都要去服务器请求一边,问问服务器我过期了没有。
浏览器在第一次请求资源的时候,服务端响应头里可以设置expires字段,该字段表示该资源的缓存过期时间,第二次请求的时候,如果时间还在该缓存时间之内,则会直接使用缓存,否则重新加载资源, 这个expires字段有个缺陷,就是它必须服务端和客户端的时间严格同步才能生效,所以现在很多人不会使用改方案。另外一种方案是第一次请求资源的时候,服务端设置响应头cache-control: max-age,这样设置的意思是告诉浏览器,这个资源什么时候过期,等第二次请求资源的时候,判断是否超出了过期时间,如果没超出,直接使用缓存。
缓存状态码 200 OK (from cache) 与 304 Not Modified
304 Not Modified:客户端有缓冲的文件并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
304 Not Modified 比 200 OK (from cache) 慢,指的是浏览器还向服务器确认了下 “If-Not-Modified”,才用的缓存
200和304特点
状态为304的请求要比状态为200的请求的数据量小很多,因为304只需要返回响应头,并不需要返回整个文件,所以只需要几字节就可以了,这样能够节省大量的网络带宽,并减少了页面的渲染时间。
什么是浏览器缓存?
浏览器缓存是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。浏览器缓存主要包括强缓存和协商缓存。-- 百度百科
浏览器缓存也称为http缓存。
通俗地说,浏览器缓存指的是浏览器为了节省网络资源及加快页面渲染,将请求过的资源缓存在本地(硬盘和内存中),再根据http响应头来判断是否读取本地的缓存资源。
缓存HTTP头信息
Expires
Expires Cache-Control
强缓存(200 from disk cache 或者 200 from memory cache, 硬盘缓存和内存缓存)
强缓存指的是浏览器缓存了该请求的资源且根据缓存标识(响应头的cache-control:max-age 及 expires)判定资源未过期。
协商缓存(304)
协商缓存指的是浏览器缓存了该请求的资源但未能判断资源是否过期,需要向服务器发起携带缓存标识(响应头的 last-modified 及 Etag)的请求来询问资源是否过期。
浏览器缓存相关响应头
强缓存相关
Expires
Expires 是 HTTP/1.0 中控制浏览器缓存的字段,其值为服务器返回的该请求结果缓存的到期时间。当浏览器再次发起请求时,如果客户端时间早于到期时间,则直接读取缓存结果而不用再次发起请求。
因为这边用到了客户端的时间进行判断,所以可能会因为客户端时间和服务器时间不同导致预期之外的缓存行为
Cache-Control
cache-control 是HTTP/1.1 的字段,是控制缓存的重要规则,它的值包含了几组可选的值,中间使用逗号相隔开
当 max-age 和 expires 同时存在时,只有 max-age 有效,expires 将不再生效
协商缓存相关
last-modified
last-modified 用于标识资源的最新修改时间,用于标记内容是否更新。
响应头的 last-modified 会作为缓存标识一起存储与缓存中,当再次请求需要进行服务器协商时,请求头的 if-Modified-Since 字段将带上缓存中的 last-modified 的值与服务器的资源修改时间进行比较,判断缓存是否过期。
使用 last-modified 有可能出现服务器资源未产生实质性更新但是修改时间更新的情况,比如资源重写。
Etag
Etag 是服务器根据资源内容通过一系列算法计算得出的用于标识资源的字符串编码,当资源内容有修改时,对应的 Etag 也会更新。其主要功能就是用于标记资源内容是否更新。
同样的,响应头的 Etag 会作为缓存标识一起存储于缓存中,当再次请求需要进行服务器协商时,请求头的 if-None-Match 字段将带上缓存中的 etag 值与服务器上资源的 Etag 进行比较,判断缓存是否过期。
当 Etag 和 last-modified 同时出现时,以 Etag 的标识为准。
浏览器缓存相关的请求头
Cache-Control
last-modified-since
配合 last-modified 使用
if-None-Match
配置 Etag 使用
完整的浏览器缓存过程
4.正常请求资源,服务器返回资源(200)并进行缓存。
缓存相关知识点
缓存的位置
浏览器缓存的存储位置分为硬盘(disk cache)和内存(memory cache),浏览器的读取顺序为内存->硬盘。
不同的资源可能会缓存在不同的位置
不同的用户行为导致的缓存问题
刷新(F5/Command+r)
刷新时会给文档请求头加上 Cache-Control:max-age=0,所以文档一般会触发协商缓存。而文档之外的其他资源(JS css)则正常请求(可能会触发强缓存或协商缓存)。
强制刷新(CTRL + F5/Command+shift+r/勾选disable cache)
强制刷新时会给请求头加上 Cache-control:no-cache,使用协商缓存,但同时会删除协商缓存字段(if-modified-since if-none-match),所以最终结果都是从服务器请求新资源。
关闭浏览器/打开新标签
没有特殊操作,有可能使用强缓存或协商缓存。
网页名称:HTTP之200还是304?
当前地址:http://www.shufengxianlan.com/qtweb/news35/449435.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联