一、浏览器缓存

Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间。借助 HTTP 缓存,Web 站点变得更具有响应性。

(一)、缓存优点:

  • 减少不必要的数据传输,节省带宽
  • 减少服务器负担,提升网站性能
  • 加快客户端加载网页的速度,用户体验友好

(二)、缓存缺点:

  • 服务端资源更新后,客户端更新滞后

(三)、浏览器缓存主要有两类:

  1. 强制缓存
  2. 协商缓存

(四)、强缓存与协商缓存的区别 如图:

(五)、缓存机制原理:

浏览器第一次请求:

浏览器后续再进行请求时:

从上图可以知道浏览器在第一次请求发生后,再次请求时:

  • 浏览器在请求某一资源时,会先获取该资源缓存的header信息,判断是否命中强缓存(cache-control和expires信息),若命中直接从缓存中获取资源信息,包括缓存header信息;本次请求根本就不会与服务器进行通信;

二、强缓存

不会向服务器发送请求,直接从缓存中读取资源,请求返回状态码为 200.

强制缓存时,服务端会在 Response Headers 中的 cache-control 对缓存时间、缓存方式等进行定义,如下图:

或者: 

cache-control 字段

cache-control: max-age=xxxx,public

  • 客户端和代理服务器都可以缓存该资源;
  • 客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存, statu code: 200
  • 如果用户做了刷新操作,就向服务器发起http请求

cache-control: max-age=xxxx,private

  • 只允许客户端可以缓存该资源;代理服务器不允许缓存
  • 客户端在xxx秒内直接读取缓存, statu code: 200

cache-control: max-age=xxxx,immutable

  • 客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存, statu code:200
  • 即使用户做了刷新操作,也不向服务器发起http请求

cache-control: no-cache

  • 跳过设置强缓存,但是不妨碍设置协商缓存;一般如果你做了强缓存,只有在强缓存失效了才走协商缓存的,设置了no-cache就不会走强缓存了,每次请求都回询问服务端。

cache-control: no-store

  • 不缓存,这个会让客户端、服务器都不缓存,也就没有所谓的强缓存、协商缓存了。

补充:强制缓存在 header 中还有一个字段可以设置失效时间,即Expires,不过Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1,所以它的作用基本忽略。

三、协商缓存

向服务器发送请求,服务器会根据这个请求的 Request Headers 的一些参数(etag 和 last-modified)来判断是否命中协商缓存,如果命中,则返回 304 状态码, 并带上新的 Request Headers 通知浏览器从缓存中读取资源;

协商缓存主要表现在 Response Headers 中的 etag 和 last-modified:

etag

  • 即文件hash,每个文件唯一

last-modified

  • 文件的修改时间,精确到秒

注意:

Response Headers 中的 etag、last-modified 在客户端重新向服务端发起请求时,会在 Request Headers 中换个key名:if-none-matched 和 if-modified-since

如下:

  // Response Headers

etag: 65597c1615681857158408944e

last-modified: Wed, 11 Sep 2019 06:20:13 GMT

  // Request Headers 变为

if-none-matched: 65597c1615681857158408944e

if-modified-since: Wed, 11 Sep 2019 06:20:13 GMT

两种缓存的共同点:都从客户端缓存中读取资源;区别是强缓存不会向服务器发请求,协商缓存会发请求

四、操作行为对缓存的影响

 

 

HTTP强缓存和协商缓存的更多相关文章

  1. 说说web缓存-强缓存、协商缓存

    网上关于WEB缓存的文章很多,今天汇总一下. 为什么要用缓存 一般针对静态资源如CSS,JS,图片等使用缓存,原因如下: 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影 ...

  2. 浏览器相关,关于强缓存、协商缓存、CDN缓存。

    强缓存和协商缓存 在介绍缓存的时候,我们习惯将缓存分为强缓存和协商缓存两种.两者的主要区别是使用本地缓存的时候,是否需要向服务器验证本地缓存是否依旧有效. 顾名思义,协商缓存,就是需要和服务器进行协商 ...

  3. http缓存策略以及强缓存和协商缓存浅析

    http缓存策略以及强缓存和协商缓存浅析 本地缓存-强缓存 本地缓存,也就是我们常说的强缓存:是指当浏览器请求资源时,如果请求服务端的资源命中了浏览器本地的缓存资源,那么浏览器就不会发送真正请求给服务 ...

  4. HTTP 强制缓存和协商缓存

    Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间.借助 HTTP 缓存,Web 站点变得更具有响应性. 缓存优点: 减少不必要的数据传输,节省带宽 减少服务器负担,提升网站性能 加快 ...

  5. 区分http请求状态码来理解缓存(协商缓存和强制缓存)

    什么是http缓存呢,当我们使用chrome浏览器,按F12打开控制台,在网络请求中有时候看到状态码是200,有时候状态码是304,当我们去看这种请求的时候,我们会发现状态码为304的状态结果是:St ...

  6. 浏览器缓存_HTTP强缓存和协商缓存

    浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档. 所以根据上面的特点,浏览器缓存有下面的优点: 减少冗余的数据传 ...

  7. http强制缓存、协商缓存、指纹ETag详解

    目录 实操目录及步骤 缓存分类 强制缓存 对比缓存 指纹 Etag 摘要及加密算法 缓存总结 每个浏览器都有一个自己的缓存区,使用缓存区的数据有诸多好处,减少冗余的数据传输,节省网络传输.减少服务器负 ...

  8. http协商缓存VS强缓存

    之前一直对浏览器缓存只能描述一个大概,深层次的原理不能描述上来:终于在前端的两次面试过程中被问倒下,为了泄恨,查阅一些资料最终对其有了一个更深入的理解,废话不多说,赶紧来看看浏览器缓存的那些事吧,有不 ...

  9. 利用nginx设置浏览器协商缓存

    强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存 协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源 协商缓存运作原理 现在有一个这样的业务情景: ...

随机推荐

  1. [luogu5204]Train Tracking 2

    考虑一个位置的上界,即$bi=min(c_{i-k+1},c_{i-k+2},--,ci)$,那么每一个位置有两种方式:1.达到上界:2.未达到上界那么可以将权值相同的ci和bi提出来,由于权值不同的 ...

  2. Redis | 第一部分:数据结构与对象 中篇《Redis设计与实现》

    目录 前言 1. 跳跃表 1.1 跳跃表与其节点的定义 1.2 跳跃表的API 2. 整数集合 2.1 整数集合的实现 2.2 整数集合的类型升级 2.3 整数集合的API 3. 压缩列表 3.1 压 ...

  3. SpringCloud升级之路2020.0.x版-41. SpringCloudGateway 基本流程讲解(1)

    本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 接下来,将进入我们升级之路的又一大模块,即网关模块.网关模块我们废弃了已经进入维护状态的 ...

  4. PHP 日期详细介绍

    简介 你可以使用这些函数获取运行 PHP 的服务器的日期和时间, 也可以使用这些函数把日期和时间 格式化成不同格式的字符串. 日期和时间信息在 PHP 内部是以 64 位数字存储的, 它可以覆盖当前时 ...

  5. 让HTML5游戏来的更猛烈些吧!--青岛思途

    作为著名的网页游戏门户,Kongregate在业界也算是鼎鼎大名了.小编与它的初识应是在几年前,只记得当时其平台上的游戏基本都是需要Flash的支持,可前几天,Adobe宣布计划停止Flash的更新和 ...

  6. Linux远程软件

    Xhell6:Linux的终端模拟软件 1>安装并破解:解压.破解(运行两个.bat文件).启动(点击Xshell.exe文件) 2>连接远端Linux系统: 创建会话:点击连接,在常规框 ...

  7. 关于 n 个 [0,1] 的随机变量第 k 小的期望值

    今天做到一道题,感觉里面一个结论有点意思,就到网上扒了篇证明(bushi)下来了. 知乎回答习惯,先抛结论,再给证明(大雾 结论:对于 \(n\) 个取值范围为 \([0,1]\) 的随机变量 \(x ...

  8. Linux-设置终端界面的字体颜色和自定义常用快捷功能

    .bashrc是一个隐藏的文件,要打开并修改该文件需要: (0)命令:cd ~ (1)命令:ls -a 找到文件 .bashrc: (2) 命令 vim ~/.bashrc 进入到文件: (3) 直接 ...

  9. 模拟串口UART的实现

    我所祷告的,就是要你们的爱心,在知识和见识上,多而又多,使你们能分辨是非,做诚实无过的人,直到基督的日子.--腓立比书[1:9~10] 最近在调的MCU的型号为STM32F030,配置芯片相较之前的M ...

  10. C++类成员初始化列表的构造顺序

    看下面代码, 输出结果是多少呢? class A{ public: A(int k) : j(k), i(j) { } void show() { cout << this->i & ...