IntelliJ IDEA 微信公众号开发 数据结构 单例模式 properties LeetCode uitableview flash ssis architecture yii2 vue标签 网络营销视频 小程序demo源码 lora开发 input边框颜色 tomcat调优和jvm调优 mysql将时间戳转换成日期 python运行环境 python高级教程 python打开文件 python中的join函数 python怎么下载 数据结构java版 java替换字符 java语言介绍 java替换字符串 java终止线程 java线程死锁 java接口开发 java语言入门 linux密码 java游戏开发教程 易语言进度条 shutil 丁丁下载 字幕提取 c语言代码表白 生存猎人属性 深入解析windows操作系统
当前位置: 首页 > 学习教程  > 编程语言

前端面试:http缓存策略

2021/2/13 18:10:16 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

1)缓存的介绍 ① 缓存是什么? 保存资源副本并在下次请求时直接使用该副本的技术。当Web缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。 ② 为什么需要缓存 减少不必要的网络请求,使得页面加载更…

1)缓存的介绍

① 缓存是什么?
保存资源副本并在下次请求时直接使用该副本的技术。当Web缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。
② 为什么需要缓存
减少不必要的网络请求,使得页面加载更快;
网络请求是不稳定,加大了页面加载的不稳定性;
网络请求的加载相比于cpu加载 & 页面渲染都要慢.
③ 哪些资源可以被缓存?
静态资源 js css img ,
因为静态资源加上hash名打包后是不会修改的

2)http缓存策略(强制缓存+协商缓存) (常考点)

浏览器本身自带缓存机制

① 强制缓存:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

服务器觉得资源可以被缓存才会加Cache-Control
(1) Cache-Control
在Response Headers 中,由服务器添加,客户端不可设置;
控制强制缓存的逻辑,再次请求发现有本地缓存,不使用网络,直接返回资源
max-age : 资源在多少秒内有效
no-cache : 不使用强制缓存,由服务端决定do what
no-store : 不使用强制缓存,服务端也不缓存,直接由服务端返回新资源
private : 只允许最终用户缓存
pubilc : 用户和中间的代理都能缓存资源

size :disk cache 表示资源来自本地缓存

(2) expires
Response Headers ;表示资源的过期时间;已经被Cache-Control代替

② 协商缓存
它是服务端缓存策略: 即服务器判断客户端资源是否和服务端资源一样,一致则返回304(Not modified )使用本地缓存的资源 ,不一致则返回200和新资源 ;
过程: 浏览器初次请求,服务器返回资源和资源标识; 浏览器再次请求携带资源标识,服务器发现资源标识一样,返回304;

在这里插入图片描述

资源标识:
体积很小; 在Response Headers中, 有两种:
(1) Last-Modified : 资源的最后修改时间,
if-Modified-Since : 请求头中,==Last-Modified
(2) Etag : 资源的唯一标识(一个字符串,类似人类的指纹)
if-None-Match : 请求头中, ==Etag
前者比较时间;后者比较字符串;可以共存,但优先Etag,因为即使内容没有变,只要编辑了Last-modified就会更新,这样并不精准.

在这里插入图片描述

3)必须默写的出的图

!!! 先要理解,理解是最重要的

在这里插入图片描述

4)刷新操作方式,对缓存的影响

不同的刷新方式,不同的缓存策略:

正常操作 : 地址栏输入url ,跳转链接,前进后退等 ; 两种缓存都有效
手动刷新 : F5 ,点击刷新按钮,右击菜单刷新 ; 仅协商缓存有效
强制刷新 : ctrl +f5 cmd + r ; 都无效

菜鸟一只,有不对的地方欢迎指正 . ☺
若有哪里没写明白,欢迎询问,会尽早回答. ☺

上面的图都是上课时的截图,来自双越老师.


本文链接: http://www.dtmao.cc/news_show_700201.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?