索鸟网

  1. 首页
  2. HTTP 缓存之浏览器刷新行为

HTTP 缓存之浏览器刷新行为


上一篇文章提到,HTTP Cache-Control 指令 有双向控制缓存的能力。服务器响应报文通过它控制缓存器怎么设置缓存,浏览器请求报文通过它控制本地缓存器怎么使用缓存。

本文结合 no-cache,理解一下 Chrome 浏览器刷新行为

场景描述

使用 Chrome 打开某个页面,服务端响应 Cache-Control: max-age=86400,此页面被缓存的有效期为 1 天。打开 Chrome DevTool,切换到 NetWork 选项卡。
一起来分析一下,以下两个动作分别发生什么事情。

一、勾选 Disable cache

勾选 Disable cache,刷新页面,捉包可见发起的请求报文包含 Cache-Control: no-cache。

按 HTTP 协议,no-cache 告诉缓存器,如果本地无缓存则不使用缓存。如果有缓存,将缓存资源的 ETag 和 Last-Modified 带上,发给服务器进行验证,服务器校验 ETag 和 Last-Modified,缓存资源过期则返回资源,缓存还没过期则返回 304。

但观察发现,不管缓存是否在有效期内,只要勾选 Disable cache,请求报文只有 Cache-Control: no-cache,没有 If-None-Match 和 If-Modified-Since。这种情况下,服务器无法检验资源有效性,只能响应请求资源给浏览器,不可能响应 304。因此,这种情况下 Chrome 是强制不使用本地缓存。捉包如下图所示:

二、不勾选 Disable cache,按下 F5(或 Ctrl+R)

不勾选 Disable cache,按下 F5(或 Ctrl+R) 刷新页面。请求报文包含 Cache-Control:max-age=0;其含义是不使用那些已经缓存了0秒的资源,与 no-cache 一样,它可以配合 ETag 和 Last-Modified 使用,如果本地缓存还在,且服务器返回 304 ,依然可以使用本地缓存。

可见按 F5 或 Ctrl + R,不管缓存是否在有效期内,Chrome 缓存器都不会直接使用本地缓存响应请求。只要有缓存,总是向服务器发起验证,由服务器决定是否使用本地缓存;如果本地无缓存,自然无法使用缓存。捉包如下图:

相关文章
HTTP 缓存的关键路径
HTTP 缓存的相关协议

http

来源地址:https://segmentfault.com/a/1190000010787023 版权归作者所有!

相关教程

  • 浏览器缓存机制浅析--HTTP缓存

    非HTTP协议定义缓存 浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下: <meta http-equ
  • 浏览器缓存

    前言 在前端开发中,缓存有利于加快网页的加载速度,同时缓存能够被反复利用,所以可以减少流量和带宽的开销。 缓存的分类有很多种,CDN缓存、数据库缓存、代理服务器缓存和浏览器缓存。本篇将来讲解一下Web开发中的浏览器缓存。这个在实际开发环境中往往也会被问到,或者使用到。如何去准确认清楚缓存的概念,是前端必须要去学习的。如果你喜欢我的文章,欢迎评论,欢迎St
  • 浏览器缓存机制

    简介 浏览器缓存机制,其实主要就是http协议定义的缓存机制(如:Expires,Cache-control等).但也有非http协议定义的缓存机制,如使用HTML Meta标签,web 开发者可以在html页面的<head>中加入<meta>标签,代码如下: <meta http-equiv='Pragma' cont
  • 前端浏览器缓存

    当用户多次访问您的网站,那么静态资源在浏览器的缓存就是非常重要的。可以缓存的静态资源包括css js 图片等资源。状态码:200:当浏览器没有缓存或者用户按下强制刷新的时候 浏览器就会向服务器直接取数据 当服务器正确响应的时候会返回200 Expire 这个属性是通用首部字段 的cache-control的属性这个字段给出的是一个具体的时间,在这个
  • 浏览器缓存控制

    下面的一片文章《HTTP缓存》关于服务器如何控制浏览器缓存哪里资源、缓存的有效时间、以及如何替换未过期的缓存等过程。https://developers.google.com...不过该篇文章中有一些点没有详细说,然后其他资料:1.浏览器是如何判断缓存过期了的HTTP1.0里定义了eg:Expires,指定该响应的绝对过期时间,eg: Expires:
  • 浏览器缓存详解

    第一次请求了 100 个文件, 再次访问的时候,如果全部重新请求, 非常浪费时间, 也很笨拙. 分析: 因为有些文件, 在用户的多次请求中, 都是相同的, 如果多次请求都重复请求这个文件, 无疑是一种浪费. 那么就想到了缓存: 把资源缓存到本地, 再次请求的时候直接使用本地的缓存文件. 走极端: 把所有的文件都缓存起来. 分析: 这样也不行,
  • 浏览器缓存机制

    引子 昨天晚上上线到很晚,今天早上迷迷糊糊到公司就看到领导在群里@我,气冲冲的说为什么我回车网址还是以前的页面,技术leader好心提醒他说有缓存,刷新一下就好了。果然刷新一下就好了,领导消气完之后跑过来说我不要缓存,好吧,本着我一贯拍领导马屁不动摇的原则,我把电脑和刀抱到运维同学旁边搞了半天,才保证领导每次看到的200的请求返回。 Expires H