编程崽

登录

一叶在编程苦海沉沦的扁舟之上,我是那只激情自射的崽

HTTP浏览器缓存粗解

HTTP浏览器缓存粗解

前言:

请求一个页面或文件时,观察开发者工具中的Network页签中,此文件的请求状态,会发现常见的会出现200或304状态,作为前端开发,200状态最为熟悉,而304,也是成功的请求,只不过是使用了本地缓存而已。

使用本地缓存,至少有两个好处:

  • 加快页面的展示速度,因为不用再从服务器把文件下载一遍。
  • 能极大的节约服务器宽带。

可能缩短用户的展示速度,只是提高用户体验,对开发人员没太多益处(当然作为有责任感的开发,这点也不能忽略),但节约服务器宽带,则能给技术开发人员减少极大的压力了。

所以得学。

请求头和响应头

要说缓存,首先需要了解请求头。 每一个请求,发出的时候,会自带一个请求头:Request Headers; 响应返回的时候,自带一个响应头:Response Headers

缓存主要由服务器响应时,在响应头中设置缓存方案,主要是设置两个字段:

  • expires:不支持HTTP1.1及更高级的HTTP版本,设置一个资源到期时间点。
  • cache-control:只支持HTTP1.1和更高级的HTTP版本,优先级高于expires,能控制本地缓存(私有缓存,或者成为浏览器缓存)和共享缓存(代理服务器缓存)

浏览器的HTTP缓存分为两种:

  • 强缓存:手动设置了expirescache-control
  • 协商缓存:未设置上面两个字段时为此模式,则为通用的默认缓存模式,通过对比服务器文件更新时间Last-Modified,和源服务器文件每次更新时,自动生成的版本号ETag,来判断是发送新文件,还是返回状态码304,来告知浏览器使用浏览器缓存。

注:强缓存只是设置时间间隔,减少了刷新时请求服务器的次数,当请求发出后,同样也是使用协商缓存模式处理。

本文以下出现的服务器,如无特殊说明,指的是直接能访问到的服务器,比如若有代理服务器,则指的是代理服务器;若无代理服务器,则为源服务器。

1. 请求头 Request Headers

第一次请求资源,没有任何缓存的余地,请求头中的相关字段如下:

  • cache-control 当前浏览器的缓存情况:
    • no-cache:一般为第一次请求、或强制刷新、或明确设置no-store的不缓存时,告知后台我这儿完全没有缓存,返回值正常为200
    • 不会发出请求:非页面html文件,设置了缓存时间,且此文件尚未过期,状态码200
    • max-age=0:当前的页面htlm文件,每次打开页面都会请求一次,状态值200或304
    • 没有此字段:非第一次,设置了过期时间,但是过期了
  • if-modified-since 非第一次请求,才会有:
    • 用于协商缓存,判断文件有没有更新的依据,内容是上次响应时返回的Last-Modified字段,意思是服务器此文件的最后更新时间
  • If-None-Match:非第一次请求,才会有:
    • 用于协商缓存,判断文件有没有更新的依据,内容是上次响应时返回的ETag字段,意思是服务器此文件的最后一个更新时,服务器随机生成的版本号
  • Pragma 只第一次请求出现,值为no-cache,效果和cache-control: "no-cache" 等同,用于兼容http1.0

2. 响应头 Response Headers

设置位置:

  • web服务器设置,比如 nginx Apache等(推荐)
  • 若为前后台未分离项目,可由后台代码中设置
  • 可由前端,在html页面中,使用标签设置

相关字段说明:

  • expires 到期时间
    • 已被cache-control取代,其值类似于:"Wed, 08 Jan 2020 08:25:55 GMT"
  • cache-control 缓存执行方案设置的常用值:
    • max-age=秒数:单位为秒的时间间隔,向服务器请求一次之后,再次想要请求时的间隔未超过此时间,则不会发出请求,直接使用本地缓存,状态码200;直到时间超过,才能发求,但如果服务器对比后,发现此文件未变化,则返回304,仍是使用缓存,若变化了,才会发送新文件,并返回200
    • s-maxage=秒数:功能同max-age=秒数,只对代理服务器生效,优先级高于max-age=秒数
    • private:只允许浏览器缓存
    • public:可以被代理服务器缓存
    • must-revalidate:表示浏览器中的文件被命中,必须要检查源服务器是否有更新,即使已经有缓存
    • proxy-revalidata:表示代理服务器每次被请求,必须要检查源服务器是否有更新,即使已经有缓存
    • no-cache:看似是不缓存,其实仍然有缓存,只不过每次都会向源服务器对比一下文件,仍会出现304
    • no-store:浏览器和代理服务器真实不缓存,每次都直接请求并获取文件
  • Date: 此文件在页面中被使用的时间
    • 最近一次向服务器请求时,服务器返回的时间,若最近几次刷新,都直接使用了浏览器缓存,没有发出请求,则值不变,其值类似"Tue, 08 Jan 2019 08:14:59 GMT其值类似
  • Last-Modified 服务器中,此文件的最后更新时间
    • 当浏览器再次发出请求此文件时,会把此值放在请求头If-Modified-Since字段中(见上面请求头说明),其值类似"Tue, 08 Jan 2019 06:45:12 GMT"
  • ETag 每次源服务器的文件更新,自动生成的文件的版本号,HTTP1.1才支持
    • 当浏览器再次发出请求此文件时,会把此值放在请求头If-None-Match字段中(见上面请求头说明),优先级高于Last-Modified,其值类似"5c3446f8-57b"

注:HTTP1.0于1996年提出,HTTP1.1于1999年提出,HTTP2.0于2015年提出,当前应用最广泛的为HTTP1.1。

注:当使用PUT方法,对服务器资源进行更新的时候,请求头可能还会出现If-Match这个字段,这个字段与If-None-Match在使用方式类似,但功能不同; 这个字段会把旧文件的Etag带给服务器,服务器在对比当前文件的Etag是否和If-None-Match(旧文件的Etag)相同,如果相同,说明此时服务器仍是旧文件,则可以覆盖更新;若不同,说明此文件已被更新过,不再进行预期的覆盖更新。

不同的缓存配置和生效时机

以下为响应头设置不同的cache-control,在非html文件、不同的请求方式时,请求的情况和请求头的cache-control的值,和网络和资源正常时,状态码的值。

请求方式 max-age=秒数 未设置 no-cache no-store
首次请求或Ctrl + F5 no-cache200,发出请求,得到全部正文。 no-cache200,发出请求,得到全部正文。 no-cache200,发出请求,得到全部正文。 no-cache200,发出请求,得到全部正文。
再次请求,或输入链接回车打开 若未过期,不发出请求200,直接使用浏览器缓存;若过期,则无此字段,走协商缓存,可能200304 不发出请求200,直接使用浏览器缓存 无此字段,走协商缓存,可能200304 无此字段200,发出请求,得到全部正文。
F5 刷新 同上 同上 同上 同上

html文件再第一次请求,和以上的资源情况相同,且无论首次的响应头中cache-control为何值,非第一次请求的请求头中的cache-control字段均为max-age=0,使用协商缓存。

html文件是整个页面的入口,只要html未发生变化,那说明引用的资源的名字,是没有发生变化的,资源的请求动向会符合上面的表格;如果发生了变了,那新变化的资源,都会进行首次请求(如果很早之前,这个资源被使用过,则同样走上面的表格)。

前端缓存的文件类别和缓存位置

前端既然能缓存,那肯定也是需要分一些类别的。

WebKit内核,将资源分为两个大类,一个是主资源,比如html文件和下载项;二是派生资源,比如页面中的图片、js、css等资源。

如果主资源访问失败,那会立刻进行报错,比如404(不存在该资源),403(资源拒绝此次访问)等等; 只要主资源可以访问完成,那么基础的页面就可以展示了,此时如果其他的派生资源,比如css样式文件,js脚本文件,图片文件等资源无法访问,也只会在控制台进行报错。

派生资源是可以缓存的,那么缓存位置也需要明了一下

当前前端缓存的文件,主要有两个位置:

  • from memory cache:缓存在内存中,当浏览器关闭,资源清除,也就是缓存被清除。
  • from disk cache:缓存在磁盘中,可以长久缓存,即使电脑重启也无妨,但只能缓存派生资源。 这个位置,是可以在前台的控制台的network页签中看到的,且也只有当用到该缓存的文件时,才会展示,如下图所示: httpCatchimg.png

Size一栏中,270B表示发出了请求,表示了该文件的大小; from memory cache就显而易见了,表示未发出请求,直接从内存中拿的现有的已缓存的资源; from disk cache同样表示未发出请求,只不过是从磁盘中直接拿的资源;

拓展

HTTP1.0和HTTP1.1的一些区别

HTTP1.0最早在网页中使用是在1996年,那个时候只是使用一些较为简单的网页上和网络请求上,而HTTP1.1则在1999年才开始广泛应用于现在的各大浏览器网络请求中,同时HTTP1.1也是使用最为广泛的HTTP协议。 主要区别主要体现在:

  • 缓存处理,在HTTP1.0中主要使用headerLast-ModifiedExpires来,来实现协商缓存,而HTTP1.1则引入了更多的缓存控制策略例如EtaIf-Unmodified-Since(用于断点续传),cache-control, If-None-Match等更多可供选择的缓存头来控制缓存策略。
  • 带宽优化及网络连接的使用,HTTP1.0中,存在一些浪费带宽的现象,例如客户端只是需要某个对象的一部分,而服务器却将整个对象送过来了,并且不支持断点续传功能,HTTP1.1则在请引入了range头域,它允许只请求资源的某个部分,即返回码是206(Partial Content),这样就方便了开发者自由的选择以便于充分利用带宽和连接。
  • 错误通知的管理,在HTTP1.1中新增了24个错误状态响应码,如409(Conflict)表示请求的资源与资源的当前状态发生冲突;410(Gone)表示服务器上的某个资源被永久性的删除。
  • Host头处理,在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址,因此,请求消息中的URL并没有传递主机名(hostname)。但随着虚拟主机技术的发展,在一台物理服务器上可以存个虚拟主机(Multi-homed Web Servers),并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域,且请求消息中如果没有Host头域会报告一个错误(400 BaRequest)。
  • 长连接,HTTP 1.1支持长连接(PersistentConnection)和请求的流水线(Pipelining)处理,在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟HTTP1.1中默认开启Connection: keep-alive,一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。

注:参考链接:https://www.cnblogs.com/heluan/p/8620312.html

HTTPS与HTTP的一些区别

HTTPS:是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。

  • HTTPS协议需要到CA申请证书,一般免费证书很少,需要交费。
  • HTTP协议运行在TCP之上,所有传输的内容都是明文,HTTPS运行在SSL/TLS之上,SSL/TLS运行在TCP之上,所有传输的内容都经过加密的。
  • HTTP和HTTPS使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
  • HTTPS可以有效的防止运营商劫持,解决了防劫持的一个大问题。

注:参考链接:HTTP与HTTPS的区别