提升性能：Web 和移动设备的基本缓存策略

首页 > 编程 > 提升性能：Web 和移动设备的基本缓存策略

提升性能：Web 和移动设备的基本缓存策略

发布于2024-07-30

介绍

缓存是一个游戏规则改变者，可以提高网络和移动应用程序的速度和响应能力。在本博客中，我们将探索前端应用程序的基本缓存策略，解决大数据处理问题，并深入研究后向/前向 (B/F) 缓存的复杂性。

前端应用程序的关键缓存策略

浏览器缓存

浏览器缓存利用浏览器在本地存储 Web 资源副本的能力，减少加载时间和服务器请求。以下是一些关键方面：

Cache-Control：此 HTTP 标头规定缓存策略。例如，Cache-Control: max-age=3600 告诉浏览器将资源缓存 3600 秒。
Expires：此标头指定缓存资源的确切到期日期/时间。它经常与 Cache-Control 一起使用。
ETag：ETag 标头为资源版本提供唯一标识符。当资源发生变化时，其 ETag 也会发生变化，从而实现高效的缓存验证。

Cache-Control: public, max-age=86400
Expires: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "33a64df5"

服务人员

Service Workers 是在后台运行的脚本，提供高级缓存功能。它们可以拦截网络请求并提供缓存的响应，甚至允许离线访问。

缓存优先：如果可用，则从缓存提供服务；如果没有，则从网络获取。
Network First：先从网络获取；如果网络不可用，则从缓存中提供服务。
Stale-While-Revalidate：从缓存提供服务，并在后台同时获取和更新缓存。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

本地存储和 IndexedDB

本地存储和 IndexedDB 是基于浏览器的存储解决方案，用于在客户端持久保存数据。

本地存储：非常适合将少量数据存储为键值对。它是同步的，存储限制约为 5MB。
IndexedDB：适合存储大量结构化数据。它支持事务和复杂查询，非常适合处理更大量、更复杂的数据。

例子

本地存储

localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');

索引数据库

let request = indexedDB.open('database', 1);
request.onupgradeneeded = event => {
  let db = event.target.result;
  db.createObjectStore('store', { keyPath: 'id' });
};

浏览器本身有一些缓存技术，这里是其中之一。