10分钟彻底搞懂Http的强制缓存和协商缓存(小结)

浏览器缓存

浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。

所以根据上面的特点，浏览器缓存有下面的优点：

  • 减少冗余的数据传输
  • 减少服务器负担
  • 加快客户端加载网页的速度

浏览器缓存是Web性能优化的重要方式。那么浏览器缓存的过程究竟是怎么样的呢？

在浏览器第一次发起请求时，本地无缓存，向web服务器发送请求，服务器起端响应请求，浏览器端缓存。过程如下：

在第一次请求时，服务器会将页面最后修改时间通过Last-Modified标识由服务器发送给客户端，客户端记录修改时间；服务器还会生成一个Etag，并发送给客户端。

浏览器后续再次进行请求时：

浏览器缓存主要分为强强缓存（也称本地缓存）和协商缓存（也称弱缓存）。根据上图，浏览器在第一次请求发生后，再次发送请求时：

  • 浏览器请求某一资源时，会先获取该资源缓存的header信息，然后根据header中的Cache-Control和Expires来判断是否过期。若没过期则直接从缓存中获取资源信息，包括缓存的header的信息，所以此次请求不会与服务器进行通信。这里判断是否过期，则是强缓存相关。后面会讲Cache-Control和Expires相关。
  • 如果显示已过期，浏览器会向服务器端发送请求，这个请求会携带第一次请求返回的有关缓存的header字段信息，比如客户端会通过If-None-Match头将先前服务器端发送过来的Etag发送给服务器，服务会对比这个客户端发过来的Etag是否与服务器的相同，若相同，就将If-None-Match的值设为false，返回状态304，客户端继续使用本地缓存，不解析服务器端发回来的数据，若不相同就将If-None-Match的值设为true，返回状态为200，客户端重新机械服务器端返回的数据；客户端还会通过If-Modified-Since头将先前服务器端发过来的最后修改时间戳发送给服务器，服务器端通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回最新的内容，如果是最新的，则返回304，客户端继续使用本地缓存。

一 强制缓存

强制缓存整体流程比较简单，就是在第一次访问服务器取到数据之后，在过期时间之内不会再去重复请求。实现这个流程的核心就是如何知道当前时间是否超过了过期时间。

强制缓存的过期时间通过第一次访问服务器时返回的响应头获取。在 http 1.0 和 http 1.1 版本中通过不同的响应头字段实现。

http 1.0

在 http 1.0 版本中，强制缓存通过 Expires 响应头来实现。 expires 表示未来资源会过期的时间。也就是说，当发起请求的时间超过了 expires 设定的时间，即表示资源缓存时间到期，会发送请求到服务器重新获取资源。而如果发起请求的时间在 expires 限定的时间之内，浏览器会直接读取本地缓存数据库中的信息（from memory or from disk），两种方式根据浏览器的策略随机获取。

http 1.1

在 http 1.1 版本中，强制缓存通过 Cache-Control 响应头来实现。Cache-Control 拥有多个值：

  • private：客户端可以缓存
  • public：客户端和代理服务器均可缓存；
  • max-age=xxx：缓存的资源将在 xxx 秒后过期；
  • no-cache：需要使用协商缓存来验证是否过期；
  • no-store：不可缓存

最常用的字段就是 max-age=xxx ，表示缓存的资源将在 xxx 秒后过期。一般来说，为了兼容，两个版本的强制缓存都会被实现。

总结

强制缓存只有首次请求才会跟服务器通信，读取缓存资源时不会发出任何请求，资源的 Status 状态码为 200，资源的 Size 为 from memory 或者 from disk ，http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。

二 协商缓存

协商缓存与强制缓存的不同之处在于，协商缓存每次读取数据时都需要跟服务器通信，并且会增加缓存标识。在第一次请求服务器时，服务器会返回资源，并且返回一个资源的缓存标识，一起存到浏览器的缓存数据库。当第二次请求资源时，浏览器会首先将缓存标识发送给服务器，服务器拿到标识后判断标识是否匹配，如果不匹配，表示资源有更新，服务器会将新数据和新的缓存标识一起返回到浏览器；如果缓存标识匹配，表示资源没有更新，并且返回 304 状态码，浏览器就读取本地缓存服务器中的数据。

在 http 协议的 1.0 和 1.1 版本中也有不同的实现方式。

http 1.0

在 http 1.0 版本中，第一次请求资源时服务器通过 Last-Modified 来设置响应头的缓存标识，并且把资源最后修改的时间作为值填入，然后将资源返回给浏览器。在第二次请求时，浏览器会首先带上 If-Modified-Since 请求头去访问服务器，服务器会将 If-Modified-Since 中携带的时间与资源修改的时间匹配，如果时间不一致，服务器会返回新的资源，并且将 Last-Modified 值更新，作为响应头返回给浏览器。如果时间一致，表示资源没有更新，服务器返回 304 状态码，浏览器拿到响应状态码后从本地缓存数据库中读取缓存资源。

这种方式有一个弊端，就是当服务器中的资源增加了一个字符，后来又把这个字符删掉，本身资源文件并没有发生变化，但修改时间发生了变化。当下次请求过来时，服务器也会把这个本来没有变化的资源重新返回给浏览器。

http 1.1

在 http 1.1 版本中，服务器通过 Etag 来设置响应头缓存标识。Etag 的值由服务端生成。在第一次请求时，服务器会将资源和 Etag 一并返回给浏览器，浏览器将两者缓存到本地缓存数据库。在第二次请求时，浏览器会将 Etag 信息放到 If-None-Match 请求头去访问服务器，服务器收到请求后，会将服务器中的文件标识与浏览器发来的标识进行对比，如果不相同，服务器返回更新的资源和新的 Etag ，如果相同，服务器返回 304 状态码，浏览器读取缓存。

总结

协商缓存每次请求都会与服务器交互，第一次是拿数据和标识的过程，第二次开始，就是浏览器询问服务器资源是否有更新的过程。每次请求都会传输数据，如果命中缓存，则资源的 Status 状态码为 304 而不是 200 。同样的，一般来讲为了兼容，两个版本的协商缓存都会被实现，http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅析HTTP消息头网页缓存控制以及header常用指令介绍

    网页的缓存是由HTTP消息头中的"Cache-control"来控制的,常见的取值有private.no-cache.max-age.must-revalidate等,默认为private.其作用根据不同的重新浏览方式分为以下几种情况:(1) 打开新窗口值为private.no-cache.must-revalidate,那么打开新窗口访问时都会重新访问服务器.而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如:Cache-control: max-age=5

  • HTTP缓存头Last-Modified和ETag介绍

    第一次请求 请求: 复制代码 代码如下: GET /pic/201408/102.jpg HTTP/1.1 Host: www.jb51.net Connection: keep-alive Cache-Control: no-cache Accept: image/webp,*/*;q=0.8 Pragma: no-cache User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chro

  • 利用xmlhttp和adodb.stream加缓存技术下载远程Web文件

    <%'----------远程获取内容,并将内容存在本地电脑上,包括任何文件!----------'---------------利用xmlhttp和adodb.stream-----------------'On Error Resume Next'-------------------------------定义输出格式-----------------------------path=request("path")if path ="" thenpath

  • 浅析XMLHttpRequest的缓存问题

    在使用XMLHttpRequest中有没有遇到过,第一次使用是好的,刷新一下就不行了,清空一下缓存再刷新又好了. 这是在使用XMLHttpRequest中常遇到的一个问题,在有的时候XMLHttpRequest请求的结果会缓存在同一个URL中,如果你请求之后的响应不同,就会产生一些莫名其妙的问题,当然也包括文章一开始那个呵呵. 解决方法:知道了原理就简单了,也就是每次请求的URL不同,让它每次都去服务器端请求,而不是使用缓存.下面有两种自己常用的方法: 第一种方法是加时间戳var url = B

  • Msxml2.XMLHTTP Msxml2.ServerXMLHTTP与缓存

    在大部分情况下,Msxml2.XMLHTTP 能够很好地完成工作,因为它是有缓存的.比如,我们用 Msxml2.XMLHTTP 发送 HTTP POST 请求模拟登陆了某个网站,它会把登陆时的 Cookie 和 Session 缓存下来,当我们想获取网站的数据时直接 HTTP GET 就行了,不需要人工发送 Cookie 和 Session. 但是,在有些时候,缓存会给我们造成麻烦.比如我们要写一个 VBS 脚本暴力破解某个网站的账号,假设我们已经破解了一个账号,继续破解时,由于缓存的关系,网站

  • xmlhttp缓存清除的2种解决方法

    方法一:加If-Modified-Since头xmlhttp多次调用时它却总是显示缓存页面, 尝试在 php 或 asp 中加入相应的http头明确不要缓存, 也没什么效果!! 现在终于找到一个办法啦,就是在 xmlhttp.open 之后发送一个If-Modified-Since头即可, 代码如下xmlhttp.setRequestHeader('If-Modified-Since', '0');xmlHttp.onreadystatechange = stateChanged;       

  • 10分钟彻底搞懂Http的强制缓存和协商缓存(小结)

    浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档. 所以根据上面的特点,浏览器缓存有下面的优点: 减少冗余的数据传输 减少服务器负担 加快客户端加载网页的速度 浏览器缓存是Web性能优化的重要方式.那么浏览器缓存的过程究竟是怎么样的呢? 在浏览器第一次发起请求时,本地无缓存,向web服务器发送请求,服务器起端响应请求,浏览器端缓存.过程如下: 在第一次请求时,服务器会将页面最后修改时间通过Last-Modifi

  • 10分钟彻底搞懂微信小程序单页面应用路由

    10分钟彻底搞懂微信小程序单页面应用路由

    单页面应用特征 「假设:」 在一个 web 页面中,有1个按钮,点击可跳转到站内其他页面. 「多页面应用:」 点击按钮,会从新加载一个html资源,刷新整个页面: 「单页面应用:」 点击按钮,没有新的html请求,只发生局部刷新,能营造出一种接近原生的体验,如丝般顺滑. SPA 单页面应用为什么可以几乎无刷新呢?因为它的SP--single-page.在第一次进入应用时,即返回了唯一的html页面和它的公共静态资源,后续的所谓"跳转",都不再从服务端拿html文件,只是DOM的替换操作

  • 3分钟快速搞懂Java的桥接方法示例

    什么是桥接方法? Java中的桥接方法(Bridge Method)是一种为了实现某些Java语言特性而由编译器自动生成的方法. 我们可以通过Method类的isBridge方法来判断一个方法是否是桥接方法. 在字节码文件中,桥接方法会被标记为ACC_BRIDGE和ACC_SYNTHETIC,其中ACC_BRIDGE用于表示该方法是由编译器产生的桥接方法,ACC_SYNTHETIC用于表示该方法是由编译器自动生成. 什么时候生成桥接方法? 为了实现哪些Java语言特性会生成桥接方法?最常见的两种

  • 一文带你搞懂JS中六种For循环的使用

    目录 一.各个 for 介绍 1.for 2.for ... in 3.for ... of 4.for await...of 5.forEach 6.map 二.多个 for 之间区别 1.使用场景差异 2.功能差异 3.性能差异 三.for 的使用 for 循环在平时开发中使用频率最高的,前后端数据交互时,常见的数据类型就是数组和对象,处理对象和数组时经常使用到 for 遍历,因此下班前花费几分钟彻底搞懂这 5 种 for 循环.它们分别为: for for ... in for ... o

  • 五分钟带你搞懂python 迭代器与生成器

    前言 大家周末好,今天给大家带来的是Python当中生成器和迭代器的使用. 我当初第一次学到迭代器和生成器的时候,并没有太在意,只是觉得这是一种新的获取数据的方法.对于获取数据的方法而言,我们会一种就足够了.但是在我后来Python的使用以及TensorFlow等学习使用当中,我发现很多地方都用到了迭代器和生成器,或者是直接使用,或者是借鉴了思路.今天就让我们仔细来看看,它们到底是怎么回事. 迭代器 我们先从迭代器开始入手,迭代器并不是Python独有的概念,在C++和Java当中都有itera

  • 一分钟搞懂Redis的慢查询日志操作

    一分钟搞懂Redis的慢查询日志操作

    目录 什么是慢查询? 什么是慢查询日志? 如何获取慢查询日志? 如何获取慢查询日志的长度? 如何清理慢查询日志? 怎么配置慢查询的参数? slowlog-log-slower-than slowlog-max-len 如何进行配置 总结 什么是慢查询? 慢查询,顾名思义就是比较慢的查询,但是究竟是哪里慢呢?首先,我们了解一下Redis命令执行的整个过程: 发送命令 命令排队 命令执行 返回结果 在慢查询的定义中,统计比较慢的时间段指的是命令执行这个步骤.没有慢查询,并不表示客户端没有超时问题,有

  • 五分钟搞懂Vuex实用知识(小结)

    这段时间一直在用vue写项目,vuex在项目中也会依葫芦画瓢使用,但是总有一种朦朦胧胧的感觉.于是决定彻底搞懂它. 看了一下午的官方文档,以及资料,才发现vuex so easy! 作为一个圈子中的人,决定输出一下文档,如果你仔细看完这篇文章,保证你对vuex熟练掌握. 我把自己的代码上传到了github,大家有需要的可以拉下来:github 先说一下vuex到底是什么? vuex 是一个专门为vue.js应用程序开发的状态管理模式. 这个状态我们可以理解为在data中的属性,需要共享给其他组件

  • 10分钟搞定让你困惑的 Jenkins 环境变量过程详解

    10分钟搞定让你困惑的 Jenkins 环境变量过程详解

    前言 Jenkins, DevOps 技术栈的核心之一,CI/CD 离不开编写 Pipeline 脚本,上手 Jenkins ,简单查一下文档,你就应该不会被 agent,stages,step 这类关键词弄懵,也能很快构建出 pipeline 的骨架 但是当向骨架中填充内容的时候,尤其如何利用环境变量(系统内置 | 自定义),多数人都会变得比较混乱,浪费很多时间,本文就帮助大家快速通关环境变量 准备 如果你想一边阅读本文,一边实践,但是没有 Jenkins 服务可用,又想快速尝试,可以应用 D

  • 10分钟搞定Java并发队列

    10分钟搞定Java并发队列

    前言 如果按照用途与特性进行粗略的划分,JUC 包中包含的工具大体可以分为 6 类: 执行者与线程池 并发队列 同步工具 并发集合 锁 原子变量 在并发系列中,主要讲解了 执行者与线程池,同步工具,锁 , 在分析源码时,或多或少的提及到了「队列」,队列在 JUC 中也是多种多样存在,所以本文就以「远看」视角,帮助大家快速了解与区分这些看似「杂乱」的队列 并发队列 Java 并发队列按照实现方式来进行划分可以分为 2 种: 阻塞队列 非阻塞队列 如果你已经看完并发系列锁的实现,你已经能够知道他们实

  • 10分钟学会写Jquery插件实例教程

    有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法.分享给大家供大家参考之用.具体方法如下:   具体而言,其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍.   现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正

随机推荐