前端常用缓存技术深度剖析

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

一、引言

在前端开发中，缓存技术对于提升应用性能、减少网络请求、优化用户体验具有至关重要的作用。随着互联网应用的复杂性和规模不断增加，合理使用缓存成为前端开发人员必须掌握的技能。本文将详细分析前端常用的缓存技术。

二、浏览器缓存

（一）内存缓存

1. 原理与机制
   内存缓存是将资源临时存储在浏览器的内存中。当浏览器请求资源时，会首先检查内存中是否存在该资源的缓存。如果存在且缓存未过期，就直接从内存中获取。这种缓存方式利用了内存的快速读写特性，能够实现极快的资源获取速度。
2. 适用场景与优势
   适用于频繁访问且体积较小的资源，如 JavaScript 代码片段、CSS 样式表的部分内容等。其优势在于读取速度快，可在短时间内为页面渲染提供所需资源，提升页面加载的初始速度。例如，在单页应用（SPA）的多次页面切换中，如果相关脚本和样式已经在内存缓存中，就能迅速渲染新页面。
3. 局限性
   内存缓存的空间有限，且其生命周期与浏览器会话相关。当浏览器关闭时，内存中的缓存资源会被清空，无法长期保存资源。

（二）磁盘缓存

1. 原理与机制
   磁盘缓存将资源存储在用户计算机的磁盘上。浏览器在请求资源时，会先检查磁盘缓存。磁盘缓存通过文件系统来存储资源，其存储容量相对较大。与内存缓存类似，磁盘缓存也依据缓存控制头信息（如 Cache - Control、Expires 等）来判断资源是否有效。
2. 适用场景与优势
   对于各种类型的资源，尤其是体积较大的图像、音频、视频以及一些不常变化的大型脚本库等，磁盘缓存非常适用。它能够在浏览器多次启动过程中持续发挥作用，减少重复网络请求。例如，网站的 logo 图片、常用的 JavaScript 框架文件等可以长期存储在磁盘缓存中，提高后续访问的速度。
3. 缓存更新问题
   磁盘缓存可能存在缓存更新不及时的问题。如果服务器上的资源已经更新，但磁盘缓存中的旧版本未过期，浏览器可能仍然使用旧资源。这需要合理的缓存控制策略来解决，如通过版本号更新或服务器端推送缓存更新通知等方式。

（三）浏览器缓存控制策略

1. 基于时间的控制（Expires 和 Cache - Control）
   • Expires：这是 HTTP 1.0 中用于指定缓存过期时间的头信息。服务器在响应资源请求时，会在响应头中设置 Expires 值，格式为一个具体的日期和时间（如 Expires: Thu, 01 Jan 2025 12:00:00 GMT）。浏览器根据本地时间与 Expires 指定的时间对比来判断缓存是否有效。然而，这种方式存在一定缺陷，因为如果用户修改了本地时间，可能会导致缓存判断错误。
   • Cache - Control：在 HTTP 1.1 中广泛使用，它提供了更灵活的缓存控制指令。常见的指令包括“public”（表示资源可被任何中间缓存和用户浏览器缓存）、“private”（资源只能被用户浏览器缓存）、“max - age”（指定缓存的最长有效时间，以秒为单位，如 Cache - Control: public, max - age = 3600，表示资源可被公共缓存且 1 小时内有效）等。Cache - Control 的优先级高于 Expires。
2. 基于验证的控制（Last - Modified 和 ETag）
   • Last - Modified：服务器在响应资源时，会在响应头中包含该资源最后一次修改的时间。当浏览器再次请求该资源时，会在请求头中带上 If - Modified - Since 头信息，其值为上次缓存的 Last - Modified 时间。服务器收到请求后，若资源在该时间之后未修改，则返回 304（Not Modified）状态码，浏览器继续使用缓存资源；若资源已修改，则返回新资源和更新后的 Last - Modified 值。
   • ETag（Entity Tag）：这是服务器为资源生成的一个唯一标识符。当浏览器再次请求资源时，会在请求头中带上 If - None - Match 头信息，其值为上次缓存的 ETag。服务器根据 ETag 判断资源是否变化，若未变化，返回 304 状态码，浏览器继续使用缓存；若变化，则返回新资源和新的 ETag。ETag 比 Last - Modified 更精确，因为它可以检测到资源内容在文件修改时间未变情况下的变化。

三、本地存储（Local Storage 和 Session Storage）

（一）Local Storage

1. 原理与特点
   Local Storage 是一种以键值对形式将数据持久存储在用户浏览器中的机制。它允许前端应用在用户本地存储大量数据（一般每个域名下可存储 5MB 左右），数据不会随着浏览器会话结束而丢失，除非用户手动清除或通过代码删除。
2. 适用场景
   常用于存储用户的个性化设置、登录凭证（在安全措施到位的情况下）、应用的状态信息等。例如，一个新闻阅读应用可以使用 Local Storage 存储用户选择的新闻类别偏好、字体大小设置等，下次用户打开应用时能自动恢复这些设置。
3. 与浏览器缓存的区别
   与浏览器缓存不同，Local Storage 中的数据不会自动参与到 HTTP 请求和响应的缓存机制中。它主要是为前端应用提供一种持久化数据存储的方式，由前端代码主动进行读写操作。

（二）Session Storage

1. 原理与特点
   Session Storage 同样是以键值对形式存储数据，但它的生命周期与浏览器会话相关。当用户关闭浏览器窗口或标签页时，Session Storage 中的数据会被自动清除。它的存储容量一般也在 5MB 左右。
2. 适用场景
   适用于存储当前会话相关的数据，如购物车中的临时商品信息（在未登录的情况下）、多步骤表单填写过程中的中间数据等。例如，在一个在线购物流程中，用户在添加商品到购物车但未完成购买的过程中，购物车数据可以临时存储在 Session Storage 中。

四、应用缓存（Application Cache）

（一）原理与机制

应用缓存是一种允许网页在离线状态下仍然可以访问的缓存技术。通过在网页的 HTML 文件中使用 manifest 文件来指定需要缓存的资源列表。当用户首次访问页面时，浏览器会根据 manifest 文件下载并缓存指定的资源。此后，即使用户处于离线状态，浏览器也可以从缓存中加载页面和相关资源。

（二）适用场景与优势

对于一些需要在离线环境下使用的 Web 应用，如文档编辑应用、地图应用等，应用缓存非常有用。它可以提高应用的可用性和用户体验，使用户在网络连接不稳定或离线时仍能继续使用部分功能。例如，用户在飞机上可以继续查看之前在在线地图应用中缓存的地图信息。

（三）局限性与问题

应用缓存的更新机制相对复杂。如果 manifest 文件更新，浏览器可能需要重新下载整个缓存资源，这可能会导致较长的加载时间。而且，如果缓存管理不当，可能会出现用户一直使用旧版本应用的问题，需要开发者谨慎处理缓存更新策略。

五、CDN 缓存

（一）原理与机制

内容分发网络（CDN）缓存是在 CDN 服务器上存储用户经常访问的静态资源。CDN 服务器分布在全球各地，当用户请求资源时，会从距离用户最近的 CDN 服务器获取资源。这些 CDN 服务器会缓存经常被请求的资源，从而减少了对源服务器的请求压力，加快了资源的获取速度。

（二）适用场景与优势

适用于各种类型的静态资源，如图片、CSS 文件、JavaScript 文件等。对于流量较大的网站或应用，CDN 缓存可以显著提高资源的分发速度，改善全球范围内用户的访问体验。例如，一个国际知名的电商网站可以利用 CDN 缓存来确保不同地区的用户都能快速加载商品图片和页面样式。

（三）缓存更新与同步问题

CDN 缓存的更新需要一定的时间来在各个 CDN 节点之间同步。当源服务器上的资源更新时，需要采取适当的策略（如缓存清除指令、版本控制等）来确保 CDN 缓存也能及时更新，以避免用户获取到旧版本的资源。

六、总结

前端常用的缓存技术在提升性能、优化用户体验方面各有其独特的作用。浏览器缓存通过在用户本地存储资源减少网络请求；本地存储为前端应用提供持久化或会话相关的数据存储；应用缓存支持离线应用；CDN 缓存则在全球范围内加速资源分发。开发人员需要深入理解这些缓存技术的原理、适用场景和局限性，根据应用的特点合理选择和组合使用缓存技术，并制定有效的缓存更新策略，以充分发挥缓存的优势，同时避免因缓存问题导致的用户体验下降或数据不一致等问题。在不断发展的前端技术环境中，缓存技术的合理应用将持续是优化前端应用的关键环节之一。