单页应用（SPA）是一种现代化的 Web 应用程序，它使用 JavaScript 和 AJAX 技术，通过异步加载数据和 HTML 片段，使得页面不需要重新加载就能够实现动态更新。然而，由于 SPA 应用具有大量的异步请求和动态更新，会导致页面加载速度变慢和服务器负载增大。因此，为了提高网站的性能和用户体验，前端缓存技术成为了不可或缺的一部分。
前端缓存的优势
前端缓存是指在浏览器中缓存静态资源，如 HTML、CSS、JavaScript、图片等文件，以便下次访问时可以直接从本地缓存中获取，而不需要再次从服务器下载。这种方式可以大大减少服务器的负载，提高网站的访问速度和用户体验。此外，前端缓存还可以：
- 减少网络带宽的使用，降低服务器成本；
- 提高页面的响应速度和加载速度；
- 改善用户体验，减少等待时间和页面闪烁；
- 提高 SEO 搜索引擎的排名和流量。
前端缓存的实现方式
前端缓存可以通过多种方式实现，例如：
1. 浏览器缓存
浏览器缓存是最常见的一种前端缓存方式。当用户第一次访问页面时，浏览器会将页面的静态资源缓存在本地，下次访问时直接从缓存中读取。浏览器缓存有两种方式：
- 强缓存：浏览器会根据 HTTP 响应头中的 Expires（过期时间）和 Cache-Control（缓存控制）字段，判断资源是否过期。如果未过期，则直接从缓存中读取，否则重新请求服务器。
- 协商缓存：当强缓存失效时，浏览器会向服务器发送一个请求，询问资源是否有更新。服务器会返回一个 ETag（标识符）和 Last-Modified（最后修改时间）字段，浏览器会将这些字段保存在缓存中。下次访问时，浏览器会将 ETag 和 Last-Modified 发送给服务器，服务器会比较这些字段和服务器上的资源是否一致，如果一致，则返回 304 状态码，表示资源未更新，浏览器可以直接从缓存中读取。
2. Service Worker 缓存
Service Worker 是一种浏览器的 API，可以在后台运行，独立于网页。它可以拦截网络请求并缓存响应，从而实现离线访问和更快的加载速度。Service Worker 缓存有两种方式：
- 预缓存：在 Service Worker 安装成功后，可以通过编写代码将一些静态资源缓存到本地。这些资源可以是 HTML、CSS、JavaScript、图片等，下次访问时直接从缓存中读取。
- 动态缓存：当 Service Worker 拦截到网络请求时，可以判断该请求是否需要缓存。如果需要缓存，则可以将响应缓存到本地，下次访问时直接从缓存中读取。
3. Web Storage 缓存
Web Storage 是一种浏览器的 API，可以在客户端存储键值对类型的数据。它有两种方式：
- localStorage：可以永久保存数据，即使关闭浏览器也不会删除数据。
- sessionStorage：只能在当前会话中保存数据，当关闭浏览器后数据会被删除。
通过 Web Storage 缓存，可以将一些静态数据保存在客户端，下次访问时直接从本地读取，从而减少对服务器的请求。
前端缓存的实践
下面通过一个示例来演示如何实现前端缓存。
1. 强缓存实现
在 HTTP 响应头中添加 Expires 和 Cache-Control 字段，用于控制缓存时间和缓存策略。例如：
Expires: Wed, 21 Oct 2021 07:28:00 GMT Cache-Control: max-age=3600
这表示资源将在 2021 年 10 月 21 日 07:28:00 过期，或者在 1 个小时后过期。当资源未过期时，浏览器将直接从缓存中读取。
2. 协商缓存实现
在 HTTP 响应头中添加 ETag 和 Last-Modified 字段，用于标识资源的唯一性和最后修改时间。例如：
ETag: "abc123" Last-Modified: Wed, 20 Oct 2021 07:28:00 GMT
当浏览器需要重新请求资源时，会向服务器发送一个 If-None-Match 和 If-Modified-Since 字段，用于比较 ETag 和 Last-Modified 是否一致。例如：
If-None-Match: "abc123" If-Modified-Since: Wed, 20 Oct 2021 07:28:00 GMT
如果一致，则返回 304 状态码，表示资源未更新，浏览器可以直接从缓存中读取。
3. Service Worker 缓存实现
在 Service Worker 中，可以使用 Cache API 缓存静态资源。例如：
-- -------------------- ---- -------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------------------- -- -
----- ----- - -----------------
---------------------------------- -- -
------------------------ -------
---
------ ---------
---
--
--
---这段代码将拦截所有的网络请求，并先从缓存中查找是否有匹配的资源。如果有，则直接返回缓存中的资源；否则，再从网络中获取资源，并将其存储到缓存中。
4. Web Storage 缓存实现
在 Web Storage 中，可以使用 localStorage 或 sessionStorage 缓存数据。例如：
localStorage.setItem('username', 'John');
const username = localStorage.getItem('username');
localStorage.removeItem('username');这段代码将在 localStorage 中存储一个键值对，然后从 localStorage 中获取该键值对，最后删除该键值对。
总结
前端缓存是提高网站性能和用户体验的重要方式。通过浏览器缓存、Service Worker 缓存和 Web Storage 缓存等方式，可以将静态资源和数据缓存到本地，减少对服务器的请求和网络带宽的使用，提高页面的响应速度和加载速度。在实际项目中，需要根据具体情况选择合适的缓存方式，并注意缓存的过期时间和缓存策略，以便达到最佳的缓存效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657d42c0d2f5e1655d810801