携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

什么是缓存？

通俗讲，浏览器会将网络请求到的资源存储到本地不同的位置，下次请求时直接从存储的位置取用，不需要再次从网络中获取，缩短网页显示时间，减少带宽，降低网络负荷

浏览器第一次缓存资源流程图

浏览器与服务器通信的方式为应答模式

画的不清晰？，就来一个标准版的。

缓存机制

已备注原作者-取之有道

缓存类型

技术面

了解机制以后，未必了解在实际场景中的用法，很多技术面通过追问方式探底你对浏览器缓存的认知。

1.如果什么缓存策略都没设置，那么浏览器会怎么处理？

对于这种情况，浏览器会采用一个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间

2.缓存失效解决方案：

1、自己修改文件名或者在文件名后带上版本号、时间戳

2、使用Wbpack、Gulp、Grunt等构建工具，构建时根据文件名或文件内容自动计算hash值来给文件命名

3.强缓存和协商缓存区别？

强缓存：不会和服务器交互，不会发起请求

协商缓存：会和服务器交互，来判断资源有没有变化

4.使用缓存的好处？

1.减少请求次数，缓解服务器压力

2.提升性能，增强用户体验，使用本地资源肯定会比请求服务器更快

3.减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗。

5.缓存读取的原理

先从内存中查找对应的缓存，如果内存中能找到就读取对应的缓存，否则的话就从硬盘中查找对应的缓存，如果有就读取，否则的话，就重新网络请求。

6.cookie、localStorage、sessionStorage异同？

总结

面试题就简单罗列几个，还是结合原理理解题目。一次性搞明白缓存机制，后面终生受益。只是背几个面试题，很容易被追问出来底层基础。
闲着没事的朋友可以我，点个赞，评个论，收个藏，关个注。
 
手绘图，手打字，纯原创，摘自未发布的书籍：《高阶前端指北》，转载请获得本人同意。