浏览器缓存——强缓存、协商缓存
目录
浏览器缓存:强缓存、协商缓存
#强缓存
#协商缓存
#补充
#拓展
浏览器缓存:强缓存、协商缓存
区别:强缓存不向服务器发送请求,协商缓存会发送请求至服务器
相同点:若命中,都直接从浏览器缓存加载资源,不从服务器加载
由响应头来控制缓存:
强缓存:Expires、Cache-Control
协商缓存(响应头+请求头):【Last-Modified + If-Modified-Since】、【ETag + If-None-Match】
#强缓存
1. Expires
内容:GMT格式字符串,存储的是一个绝对时间
过程:
第一次请求资源 ---》返回的响应携带Expires响应头 ---》浏览器将响应内容缓存
再次请求资源 ---》浏览器缓存中查找,若有则取出Expires时间与当前时间比较
---》在Expires之前则命中,读取资源
---》否则未命中,从服务器再次加载资源时,Expires被更新
风险:若用户手动修改浏览器时间,则会造成错误
2. Cache-Control
内容:绝对时间,以秒为单位。HTTP1.1版本提出
过程:
第一次请求资源 ---》返回的响应携带Cache-Control响应头 ---》浏览器将响应内容缓存
再次请求资源 ---》浏览器缓存中查找,若有则取出Cache-Control计算有效期,与当前时间比较
---》在有效期之前则命中,读取资源
---》否则未命中,从服务器再次加载资源时,缓存Cache-Control
配置项:
max-age:最大有效时间
must-revalidate:若超时,必须发送请求验证
no-cache:不使用强缓存(面试有考)
no-store:不使用缓存(面试有考)
public / private:代理是否可缓存
#协商缓存
1. Last-Modified + If-Modified-Since
内容:Last-Modified 存储的是资源文件最后一次更新的时间
过程:
第一次请求资源 ---》返回的响应携带Last-Modified响应头 ---》浏览器将响应内容缓存
再次请求资源 ---》将上次请求回的Last-Modified中内容,放入If-Modified-Since请求头中
---》向服务器发送请求
---》服务端判断时间,判断时间可知资源是否变化
---》未变化则返回304状态码,响应头中没有Last-Modified
---》变化则返回200状态码+资源文件+最新的Last-Modified以供浏览器更新
问题点:
* 资源修改但是内容没有实质性变化,例如文件周期性重写。仍然会将文件返回给浏览器
* 无法辨别一秒内多次修改的情况,不精确
2. ETag + If-None-Match
内容:ETag 存储的是服务器根据文件内容生成的唯一标识,用字符串表示。HTTP1.1版本提出
过程:
第一次请求资源 ---》返回的响应携带ETag响应头 ---》浏览器将响应内容缓存
再次请求资源 ---》将上次请求回的ETag中内容,放入If-None-Match请求头中
---》向服务器发送请求
---》服务端再次根据文件内容生成ETag,与收到的If-None-Match比较可知文件是否有变化
---》未变化则返回304状态码+新生成的ETag(浏览器更新),不返回资源
---》变化则返回200状态码+资源文件+最新的ETag以供浏览器更新
#补充
Q:刷新操作对缓存的影响?
A:正常操作(输入地址URL、跳转连接、前进后退等等):强缓存与协商缓存均有效
手动刷新(f5、点击菜单刷新、右键刷新):强缓存失效,协商缓存有效
强制刷新(ctrl + f5):强缓存、协商缓存均失效
#拓展
面试问题:前端存储有哪些?
(cookie、sessionStorage、localStorage、浏览器缓存、indexDB...)
浏览器缓存——强缓存、协商缓存相关推荐
- HTTP缓存优先级问题;主要有两种缓存:强缓存和对比缓存(也叫协商缓存)
HTTP缓存,主要有两种缓存:强缓存和对比缓存(也叫协商缓存) 强缓存: 只要请求了一次,在有效时间内,不会再请求服务器(请求都不会发起),直接从浏览器本地缓存中获取资源.主要字段有(expires: ...
- 浏览器缓存机制(强缓存和协商缓存)总结
文章目录 前言 缓存过程的分析 强缓存 Expires Cache-Control 协商缓存 Last-Modified和If-Modified-Since ETag和If-None-Match 两者 ...
- 浏览器缓存:memory cache、disk cache、强缓存协商缓存等概念
文章目录 分类 memory cache disk cache Service Worker Push Cache 缓存过程 强缓存 1.Expires 2.Cache-Control Expires ...
- 浏览器缓存(强缓存和协商缓存)
什么是浏览器缓存(强缓存和协商缓存) 浏览器缓存 是浏览器将用户请求过的静态资源(html.css.js),存储到电脑本地磁盘中,当浏览器再次访问时,就可以直接从本地加载了,不需要再去服务端请求了. ...
- 说说web缓存-强缓存、协商缓存
网上关于WEB缓存的文章很多,今天汇总一下. 为什么要用缓存 一般针对静态资源如CSS,JS,图片等使用缓存,原因如下: 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影 ...
- http协商缓存VS强缓存
之前一直对浏览器缓存只能描述一个大概,深层次的原理不能描述上来:终于在前端的两次面试过程中被问倒下,为了泄恨,查阅一些资料最终对其有了一个更深入的理解,废话不多说,赶紧来看看浏览器缓存的那些事吧,有不 ...
- 你知道304吗?图解强缓存和协商缓存
http协议-常见状态码,请求方法,http头部,http缓存 一.http状态码 1.引例阐述 2.状态码分类 3.常见状态码 4.关于协议和规范 二.http 方法 1.传统的methods 2. ...
- HTTP协商缓存与HTTP强缓存
1.浏览器缓存 缓存这东西,第一次必须获取到资源后,然后根据返回的信息来告诉如何缓存资源,可能采用的是强缓存,也可能告诉客户端浏览器是协商缓存,这都需要根据响应的header内容来决定的.下面用两幅图 ...
- 前端协商缓存强缓存如何使用_http协商缓存与强缓存
概述 良好的缓存策略可以降低资源的重复加载,提高网页的整体加载速度.通常浏览器的缓存策略分为两种:强缓存和协商缓存. 基本原理浏览器在加载资源的时候,会先根据这个资源的一些http header判断他 ...
最新文章
- php 管理服务器内存,解决PHP-FPM进程导致的服务器内存占用
- 企业网络推广浅析网站优化哪些设置会影响蜘蛛的爬取?
- libvirt(virsh命令介绍)
- Codeforces 264B Good Sequences ★ (分解素因子+DP)
- 小米小爱蓝牙音箱_小米小爱蓝牙音箱——值否?
- paper每日谈——动机
- TLS1.1升级到TLS1.2(微信小程序要求TLS1.2以上)
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)...
- CCIE试验备考之交换security
- [转]Android--多线程之Handler
- Dubbo透传traceId/logid的一种思路
- 操作系统 第二部分 进程管理(二)
- jBridge避开云服务器让AI算力落地的桥联框架技术
- 主机游戏神作和排行榜
- linux使用清华镜像安装numpy,NumPy 安装
- Mac OSX安装MongoDB
- 应用VB语言程序生成十个随机数
- ROS routeros mikrotik路由器CVE-2018-14847漏洞
- ie浏览器怎么打开html,win10ie浏览器不能打开html设置怎么办
- [转]OpenSynergy的COQOS Hypervisor SDK-实现仪表和车载信息娱乐系统共享显示