http cache笔记

本文作者:IMWeb devinran 原文出处:IMWeb社区 未经同意,禁止转载

Last-Modified 与 If-Modified-Since

在浏览器第一次请求某url获得的返回状态是200的响应头中,获取Last-Modified字段,这个字段标识此文件在服务器端的最后被修改时间,格式类似于:

Last-Modified  Thu, 15 Oct 2015 02:45:17 GMT

然后在浏览器第二次请求此url时,浏览器会根据之前获得的Last-Modified向服务器传送If-Modified-Since请求头,询问文件是否有被修改过

If-Modified-Since  Thu, 15 Oct 2015 02:45:17 GMT

如果服务器端资源没有变化,则请求返回304。达到缓存效果。

如果服务器端资源发生改变或者重启服务器,则重新响应资源,返回200,与第一次相同。

如果If-Modified-Since的时间比服务器当前时间还晚,则会被认定为非法请求

ETag 与 If-None-Match

HTTP协议定义ETag为被请求变量的实体标记,类似于一个资源的hash值,用于对url进行标记。这个值完全取决于服务器,并在响应头中返回浏览器。格式类似于:

Etag  9a932760982d29a83836cbd469bb14e7

第二次请求相同的数据时,浏览器的请求头中带上If-None-Match字段,如果服务器端资源没有变化,则请求返回304。

If-None-Match  9a932760982d29a83836cbd469bb14e7

以上两个方式虽然完成了缓存文件功能,但是每次请求url时还是会向服务器发送一个请求头If-Modified-SinceIf-None-Match。使用一些别的策略,可以省略这个请求过程。

Expires

Expires是存在于响应头中的字段,它用一个绝对的时间点来指定文件的有效时间,(没有设置其他缓存控制的字段情况下)在有效时间内直接使用本地缓存文件。格式类似于:

Expires  Wed, 12 Oct 2016 13:18:42 GMT

Cache-Control

Cache-Control定义了一组关于缓存的控制字段,常用的有以下几个:

  • no-cache: 指定返回的响应在未经服务器检查其是否被修改之前,不能使用。就是说没有经过服务器确认的缓存是被禁止的,但是经过服务器确认未变更的资源可以避免重复下载。
  • no-store: 这个是简单粗暴地直接禁止浏览器和所有的中继缓存()储存任何版本的返回响应。
  • public: 响应可以被缓存(默认)。
  • private: 响应可以由浏览器缓存(用户),但是不允许任何中继缓存(CDN)进行缓存。
  • max-age: 指示获取到的响应,从发送请求开始以秒计算,可以重新使用的最长时间间隔。

格式类似于:

Cache-Control  private, max-age=31104000

Expires来自于HTTP1.0,Cache-Control来自于HTTP1.1,Cache-Control优先级高于Expires

那么问题来了

  • 如果 服务器/客户端 时间不准呢?
  • 如果在expires/Cache-Control缓存期间文件发生变化了呢?
  • 什么时候no-store什么时候private什么时候........?

好的方案

首先梳理一下,我们需要的是:

  • 在过期时间之前缓存可以用
  • 在文件有变化的时候客户端立即更新
  • 客户端时间不正确也可以正常工作(服务器端时间不正确早就赶紧滚去调了还在写什么笔记)

所以比较好的一个方案是使用Cache-Control,并且结合文件版本号。即在文件名中嵌入的一个“指纹”。

见上图,将js与css等静态资源设置Cache-Control一年有效期,然后在文件名中加入了一串版本号信息。那么在文件没有变动的时候,浏览器不用发起请求直接可以使用缓存文件;而在文件有变化的时候,由于文件版本号的变更,导致文件名变化,请求的url变了,自然文件就更新了。

顺便说说

  • Last-Modified 与 Etag的方式还是会请求服务器的,只不过返回的是304,对于304的请求F5是不会重新下载的。
  • Expires 与 Cache-Control max-age是直接从本地读取的,不需要请求服务器,他们的“返回状态”是200 OK(BFCache),这个时候F5是会重新下载的。

最后

补一张Cache-Control策略的图,扒自Google Developers

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • http cache笔记

    在浏览器第一次请求某url获得的返回状态是200的响应头中,获取Last-Modified字段,这个字段标识此文件在服务器端的最后被修改时间,格式类似于:

    IMWeb前端团队
  • web性能优化之:no-cache与must-revalidate深入探究

    引言 稍微了解HTTP协议的前端同学,相比对Cache-Control不会感到陌生,性能优化时经常都会跟它打交道。 常见的值有有private、public、n...

    IMWeb前端团队
  • web性能优化之:no-cache与must-revalidate深入探究

    稍微了解HTTP协议的前端同学,相比对Cache-Control不会感到陌生,性能优化时经常都会跟它打交道。

    IMWeb前端团队
  • http cache笔记

    在浏览器第一次请求某url获得的返回状态是200的响应头中,获取Last-Modified字段,这个字段标识此文件在服务器端的最后被修改时间,格式类似于:

    IMWeb前端团队
  • .love 域名|因你而爱

    爱要大声说出来! 用.love域名谱写你们的故事 送给最爱的TA 2021年2月1日至28日 .love普通词新注只要25元/年 .love域名为新通用顶级...

    腾讯云DNSPod团队
  • 前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【下篇】

    每个人评判的标准不一样,我们唯有拿出碾压这个层级的能力的时候,才能堵住质疑者的嘴。当然,我们不做技术杠精,技术本身没有好坏。不喜欢就不理会

    Peter谭金杰
  • 计算机网络原理梳理丨应用层

    每个对等端都同时兼备C/S应用的客户与服务器的特征,是一个服务器与客户的结合体,对等端之间直接通信。

    码脑
  • 资源论文非系统论文,NLP 圈同行评审存在的六大固化误区!

    NLP中的大多数成功案例都是关于监督学习或半监督学习的。从根本上说,这意味着我们的解析器、情感分类器、QA系统和其他一切都和训练数据一样好。基于这一事实,数据和...

    AI科技评论
  • PaaS基础学习(1)

    PaaS基础学习(1) PaaS学习笔记目录 PaaS基础学习(1) 在PaaS上开发Web、移动应用(2) PaaS优点与限制(3) 1. 基础单元,一个基础...

    王小雷
  • iOS开发~获取验证码倒计时实现

    在app开发中经常会遇到,输入手机号获取验证码的功能,下面就和大家分享一下,获取验证码倒计时的功能实现 首先给大家看一下页面展示

    展菲

扫码关注云+社区

领取腾讯云代金券