JS 缓存|极客笔记

JS 缓存

在前端开发中，缓存是提高页面性能的一个重要方式。通过缓存，可以减少网络请求，加快页面加载速度，提升用户体验。在 JavaScript 中，我们可以通过一些方法来实现缓存，从而提高页面性能。本文将详细解释 JS 缓存的相关知识，包括浏览器缓存、本地存储和服务端缓存等内容。

浏览器缓存

浏览器缓存是指浏览器在用户访问网页时，将一些资源（如图片、样式表、脚本等）保存到本地，以便下次访问同一页面时能直接从本地加载资源，而不需要重新发送网络请求。浏览器缓存主要分为两种类型：强缓存和协商缓存。

强缓存

强缓存是指浏览器在请求资源时，直接从本地缓存中获取资源而不发送请求到服务器。浏览器根据响应头中的缓存规则来判断是否使用强缓存。常用的缓存规则包括Cache-Control和Expires。

Cache-Control是 HTTP/1.1 提供的头部参数，用来控制缓存策略。常见的取值有：
- public：表示响应可以被任何中间服务器（如代理服务器）缓存。
- private：表示响应只能被终端用户的浏览器缓存。
- max-age=<seconds>：表示资源在本地缓存中保存的最大时间，单位是秒。
- no-cache：表示不使用强缓存，需要进行协商缓存。
- no-store：表示不进行任何形式的缓存。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>强缓存示例</title>
</head>
<body>
    <img src="example.jpg" alt="示例图片">
</body>
</html>

在服务器端设置响应头：

Cache-Control: max-age=3600

上述代码中，浏览器在第一次加载页面时会请求example.jpg图片，并将其缓存到本地，之后再次访问页面时，会直接从本地缓存加载图片，不发送请求到服务器。

Expires是 HTTP/1.0 提供的头部参数，用来指定资源的过期时间。其值为表示资源过期的时间的 GMT 格式的字符串，如Wed, 21 Oct 2015 07:28:00 GMT。当浏览器请求资源时，会先检查资源的过期时间，如果当前时间小于过期时间，则表示资源在有效期内，可以使用强缓存加载资源。

协商缓存

协商缓存是指浏览器在强缓存失效时，向服务器发送请求，根据服务器返回的响应头信息来判断是否需要使用缓存的一种方式。协商缓存主要通过Last-Modified和ETag来实现。

Last-Modified是一种验证方式，服务器在发送资源时会在响应头中添加Last-Modified字段，表示资源最后一次修改的时间。当浏览器发送请求时，会在请求头中携带If-Modified-Since字段，值为上次请求返回的Last-Modified值。服务器接收到请求后，会比较资源的最后修改时间，如果没变，则返回 304 Not Modified，浏览器会直接使用缓存。
ETag是另一种验证方式，服务器在发送资源时会在响应头中添加ETag字段，表示资源的唯一标识符。浏览器发送请求时，在请求头中携带If-None-Match字段，值为上次请求返回的ETag值。服务器接收到请求后，通过比较资源的ETag值来判断资源是否发生变化，如果没变，则返回 304 Not Modified，浏览器会直接使用缓存。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>协商缓存示例</title>
</head>
<body>
    <script src="example.js"></script>
</body>
</html>

在服务器端设置响应头：

ETag: "686897696a7c876b7e"

上述代码中，浏览器加载example.js脚本文件时，服务器返回了一个ETag值。当再次请求该资源时，浏览器会携带上一次请求返回的ETag值，服务器通过比较两个ETag值来判断资源是否发生变化。

本地存储

除了浏览器缓存外，还有一种常用的缓存方式是本地存储。在 JavaScript 中，我们可以使用localStorage和sessionStorage来实现本地数据的存储。

localStorage

localStorage是 HTML5 提供的一种本地存储的方式，允许将数据保存在浏览器本地，即使页面被关闭后也不会丢失。localStorage中存储的数据会一直保存，直到手动删除或通过代码清除。

存储数据：可以使用localStorage.setItem(key, value)方法来存储数据，其中key为键名，value为键值。
获取数据：可以使用localStorage.getItem(key)方法来获取指定键名对应的键值。
删除数据：可以使用localStorage.removeItem(key)方法来删除指定键名对应的数据。

示例代码：

// 存储数据
localStorage.setItem('name', 'Alice');
// 获取数据
const name = localStorage.getItem('name');
console.log(name); // 输出：Alice
// 删除数据
localStorage.removeItem('name');

sessionStorage

sessionStorage与localStorage类似，也是 HTML5 提供的本地存储方式，但是保存的数据在窗口或标签页关闭后会自动删除。sessionStorage适用于一次性的临时数据存储场景。

sessionStorage的使用方式与localStorage基本一致，区别在于数据的生命周期。

示例代码：

// 存储数据
sessionStorage.setItem('age', '20');
// 获取数据
const age = sessionStorage.getItem('age');
console.log(age); // 输出：20
// 关闭窗口或标签页后数据将被清除

服务端缓存

除了在浏览器和本地进行缓存外，还可以在服务端缓存一些数据，以减少数据库查询等开销。常用的服务端缓存包括内存缓存、Redis 缓存和数据缓存等。

内存缓存

内存缓存是将数据存储在服务器的内存中，以提高数据读取速度。内存缓存速度快，适用于一些短时间内频繁访问的数据。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

function getUserById(id) {
  const cachedUser = cache.get(id);
  if (cachedUser) {
    return Promise.resolve(cachedUser);
  } else {
    const user = users.find(user => user.id === id);
    cache.set(id, user);
    return Promise.resolve(user);
  }
}

// 访问用户信息
getUserById(1).then(user => {
  console.log(user); // 输出：{ id: 1, name: 'Alice' }
});

Redis 缓存

Redis 是一种内存数据库，常用于缓存数据、会话管理、消息队列等。通过使用 Redis 缓存，可以加快数据访问速度，减少数据库压力，提高系统性能。

在 Node.js 中可以使用redis模块连接 Redis 数据库并进行数据操作：

const redis = require('redis');
const client = redis.createClient();

// 存储数据
client.set('username', 'Alice', (error, reply) => {
  console.log(reply); // 输出：OK
});

// 获取数据
client.get('username', (error, reply) => {
  console.log(reply); // 输出：Alice
});

数据缓存

数据缓存通常是指将数据库中的一些数据缓存到服务器内存或 Redis 中，以减少对数据库的频繁读取，提高数据读取的速度和性能。可以通过定时更新缓存或根据数据变化来刷新缓存。

const redis = require('redis');
const client = redis.createClient();

const dbData = {
  id: 1,
  name: 'Alice'
};

// 存储数据到缓存
client.set('userData', JSON.stringify(dbData), (error, reply) => {
  console.log(reply); // 输出：OK
});

// 获取数据
client.get('userData', (error, reply) => {
  const userData = JSON.parse(reply);
  console.log(userData); // 输出：{ id: 1, name: 'Alice' }
});

// 定时更新缓存
setInterval(() => {
  client.set('userData', JSON.stringify(dbData), (error, reply) => {
    console.log('Cache updated');
  });
}, 60000); // 每分钟更新一次缓存