前端面试每日一题

本文主要是介绍前端面试每日一题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

1. Expires
   HTTP/1.0,使用绝对时间
   缓存过期时间,用来指定资源到期时间和Last-modified结合使用
   Expires: Fri, 05 Jul 2002, 05:00:00 GMT
2. Cache-Control
   HTTP/1.1使用相对时间
   Cache-Control: max-age=69(s)

协商缓存

if-modified-since和last-modifie

1. 浏览器第一次访问资源,服务器返回资源的同时,在response添加last-modified
2. 浏览器下一次请求这个资源,浏览器检测到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(兼容)

这篇关于前端面试每日一题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！