浏览器缓存机制本文主要介绍前端热点中的浏览器缓存机制，简要区分了一下浏览器存储和浏览器缓存的区别，然后简要介绍来了一下强

缓存机制也是面试中经常被问到的一个问题，它主要考究着面试者对于性能优化等知识点的掌握与应用。在讲浏览器缓存机制之前，先区分一下浏览器缓存机制和浏览器存储，因为我发现有不少人在面试过程中对缓存和存储区分不太清楚。

浏览器存储机制： 通常是指浏览器提供的一些本地存储数据的机制。例如：Cookie、LocalStorage、SessonStorage和IndexedDB 等，各个存储方式的不同点也是前端面试中的一大热点。

浏览器缓存机制： 浏览器缓存的另一个说法是HTTP缓存，是指浏览器在内存或者本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从内存或者本地磁盘加载文档。

强缓存是浏览器的一种机制，通过该机制，浏览器在请求特定资源时，如果命中了强缓存，将直接使用本地缓存的副本而不是向服务器发起请求。从而避免浏览器发送不必要的网络请求，以提高页面加载速度，减轻服务器负担。

弱缓存也称为协商缓存，是指在强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的机制。

使用 Cache-Control: max-age 指令：服务器告诉浏览器资源在一段时间内是有效的，例如，Cache-Control: max-age=3600 表示资源在缓存中有效一小时。
使用 Expires 头：虽然已经被 Cache-Control 取代，但一些服务器仍然可能使用 Expires 来指定资源的过期时间。

未过期状态： 如果浏览器再次请求相同资源，并且强缓存规则生效（即当前时间在资源有效期内），浏览器直接从缓存中获取资源，不向服务器发起请求。
过期状态： 如果资源已过期，浏览器会向服务器发起请求，但服务器在响应中可能返回 304 Not Modified 状态，表示资源未发生变化，仍可使用缓存。

If-Modified-Since 和 Last-Modified： 浏览器通过发送 If-Modified-Since 头将资源的最后修改时间发送给服务器。
If-None-Match 和 ETag： 浏览器通过发送 If-None-Match 头将资源的 ETag 值发送给服务器。

服务器验证： 服务器收到请求后，根据协商缓存头部信息判断资源是否发生变化。
- Last-Modified 比较： 如果资源的最后修改时间大于或等于 If-Modified-Since 中的时间，说明资源未发生变化，服务器返回 304 Not Modified，浏览器使用本地缓存。
- ETag 比较： 如果资源的 ETag 与 If-None-Match 中的值匹配，说明资源未发生变化，服务器返回 304 Not Modified，浏览器使用本地缓存。
新资源响应： 如果服务器判断资源已经发生了变化，会返回新的资源内容，同时更新缓存和相关的协商缓存头。

这样，通过强缓存和协商缓存的组合使用，浏览器可以更加灵活地控制缓存，提高性能，减轻服务器负担。不过，开发者需要注意合理设置缓存策略，确保用户能够获取到最新的内容。

浏览器中的缓存位置通常分为两种主要类型：内存缓存和磁盘缓存。这两种缓存位置分别用于存储不同类型的资源，并在不同的使用场景中发挥作用。

内存缓存是浏览器中的一种临时存储机制，用于保存一些常用的资源，以便更快地获取。由于内存有限，内存缓存通常用于存储较小且频繁访问的资源。内存缓存的特点是读取速度非常快，但由于内存有限，其容量相对较小。内存缓存包括以下内容：

磁盘缓存用于存储较大和不太频繁访问的资源，它的容量相对较大，但读取速度相对较慢。磁盘缓存的特点是容量较大，但由于读取速度相对较慢，因此主要用于存储那些不需要频繁读取的资源。磁盘缓存包括以下内容：