浏览器自带的缓存：HTTP 缓存最常用
打开一个网页，第二次加载明显更快，这大概率是 HTTP 缓存起了作用。它分两种：强缓存和协商缓存。
强缓存靠响应头里的 Cache-Control 或 Expires 控制。比如服务器返回 Cache-Control: max-age=3600，意味着接下来一小时内，浏览器都不用发请求，直接用本地副本。
过了有效期，浏览器就会发起请求，但带上 If-Modified-Since 或 If-None-Match，服务器判断资源没变，就返回 304，告诉浏览器继续用缓存。这就是协商缓存，省流量又保证更新。
LocalStorage 和 SessionStorage：存点小数据很方便
想记住用户上次选的皮肤主题，或者表单填了一半的内容，用 LocalStorage 正合适。它能存 5MB 左右的数据，关闭浏览器也不丢。
SessionStorage 类似，但只在当前会话有效，关了标签页就清空。适合临时保存一些敏感操作的状态，比如支付流程中的步骤标记。
localStorage.setItem('theme', 'dark');
const savedTheme = localStorage.getItem('theme');IndexedDB：本地数据库，适合大数据
如果要缓存大量结构化数据，比如离线文章、用户历史记录，IndexedDB 更靠谱。它支持异步操作，不卡界面，还能存二进制文件。
想象一个笔记应用，用户写的内容先存在 IndexedDB，网络恢复后再同步到服务器，体验顺滑很多。
const request = indexedDB.open('NotesDB', 1);
request.onsuccess = function(event) {
const db = event.target.result;
const tx = db.transaction('notes', 'readonly');
const store = tx.objectStore('notes');
const getReq = store.get(1);
getReq.onsuccess = () => console.log(getReq.result);
};Service Worker：让网页能离线运行
它是独立于页面的脚本，能拦截网络请求。配合 Cache API，可以实现自定义缓存策略。比如把关键资源提前存好，哪怕断网也能访问首页。
PWA 应用常用这套组合。安装后，第二天打开像原生 App 一样快，就是因为 Service Worker 在后台默默管理着缓存。
navigator.serviceWorker.register('/sw.js');
// 在 sw.js 中
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});内存缓存：临时提速的小技巧
有时候函数计算耗时，比如处理一大段文本分析，可以把结果存在变量里。下次传同样参数，直接返回结果，省时间。
这种叫内存缓存，生命周期最短，刷新就没了，但实现简单，适合工具函数优化。
const memoize = (fn) => {
const cache = new Map();
return (arg) => {
if (cache.has(arg)) return cache.get(arg);
const result = fn(arg);
cache.set(arg, result);
return result;
};
};CDN 缓存：离用户更近一点
虽然不算“前端”代码控制的，但 CDN 是前端性能的关键一环。静态资源放到离用户最近的节点，首次加载也更快。
比如一张产品图，放在北京的服务器，广东用户访问慢。用了 CDN，这张图可能已经缓存在广州的节点，打开自然快。配合合理的缓存头设置，效果更明显。