本文主要是介绍前端面试每日一题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
2022.6.6
缓存的相关知识
参考资料:https://www.sohu.com/a/308053037_115128 / HTTP权威指南
一个数据请求分为网络请求、后端处理、浏览器响应三个步骤。
缓存位置
- service worker
- memory cacahe
- disk cache
- push cache
强缓存(响应头部)
强缓存:不会向服务发送请求,直接从缓存中读取资源.200状态码,size from disk cache或memory cache,强缓存可以设置Expires和Cache-Control
- Expires
HTTP/1.0,使用绝对时间
缓存过期时间,用来指定资源到期时间和Last-modified结合使用
Expires: Fri, 05 Jul 2002, 05:00:00 GMT
- Cache-Control
HTTP/1.1使用相对时间
Cache-Control: max-age=69(s)
协商缓存
if-modified-since和last-modifie
- 浏览器第一次访问资源,服务器返回资源的同时,在response添加last-modified
- 浏览器下一次请求这个资源,浏览器检测到last-modified这个header,添加if-modified-since这个header,值是last-modified中的值。服务器收到资源请求会和last-modified进行比较,if-modified-since日期last-modified于相同。返回304和空的响应体。否则返回新的资源文件和200
问题:
1.以秒计时,在1秒内修改了内容不会被感知到
2.内容修改了但是修改的内容不重要
3.数据周期性的重写,数据相同
if-none-match和etag
1.浏览器第一次访问资源,服务器返回一个etag
2.浏览器第二次访问协调if-none-match:添加个tag和数据进行比较,相同就返回304和空的响应体,不同就返回200和新的响应体
强缓存优先于协商缓存进行,若强缓存生效则直接使用缓存,不生效则进行协商缓存,协商缓存由服务器决定是否使用缓存。
用户行为对浏览器缓存的影响
- 打开网页,地址栏输入地址:查找disk cache是否有匹配:有就使用,没有有发送网络请求
- f5,tab没有关闭,memory cache可用,优先使用,其次是disk cache
- ctrl+f5,浏览器不使用缓存,请求头部添加cache-control:no-cache,Pragma:no-cache(兼容)
这篇关于前端面试每日一题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!