优化JavaScript网络请求需减少请求数量、合并资源，并结合强缓存、协商缓存与客户端缓存策略，利用浏览器缓存、内存存储及Service Worker实现多层级缓存，提升性能。
在现代Web开发中，JavaScript网络请求的性能直接影响用户体验。频繁、低效的请求不仅增加服务器压力，还会导致页面加载缓慢。优化网络请求并合理使用缓存机制，是提升应用响应速度的关键手段。
减少请求数量与合并资源
每次HTTP请求都包含建立连接、传输数据和断开连接的过程，存在一定的延迟。减少不必要的请求能显著提升性能。
- 将多个小文件合并成一个JS或CSS文件，减少请求数。
- 使用雪碧图（CSS Sprite）合并小图标，降低图片请求数量。
- 利用Webpack等构建工具进行代码分割与按需加载，避免一次性加载全部资源。
合理使用浏览器缓存
浏览器缓存能有效避免重复下载相同资源，节省带宽并加快页面响应。
- 强缓存：通过Cache-Control和Expires头控制资源是否从本地读取。例如设置max-age=3600表示资源在1小时内无需重新请求。
- 协商缓存：当强缓存失效后，浏览器发送请求携带If-None-Match或If-Modified-Since，服务端判断资源是否变更，若未变则返回304，减少数据传输。
客户端缓存策略实现
除了依赖HTTP缓存，JavaScript还可主动管理数据缓存，适用于API接口数据。
立即学习“Java免费学习笔记（深入）”；
- 使用localStorage或sessionStorage存储不敏感且变动较少的数据，如用户配置、城市列表。
- 结合Map或对象在内存中缓存近期请求结果，设置过期时间防止数据陈旧。例如：
const cache = new Map();
function fetchData(url, ttl = 5 * 60 * 1000) {
const now = Date.now();
if (cache.has(url)) {
const item = cache.get(url);
if (now - item.timestamp
return Promise.resolve(item.data);
}
}
return fetch(url)
.then(res => res.json())
.then(data => {
cache.set(url, { data, timestamp: now });
return data;
});
}
使用Service Worker实现离线缓存
Service Worker 可拦截网络请求，实现高级缓存逻辑，支持PWA应用离线运行。
- 注册Service Worker后，可在fetch事件中判断资源是否存在缓存，优先返回缓存内容。
- 采用Cache API存储静态资源或API响应，配合Stale-While-Revalidate策略，先返回旧数据再后台更新。
基本上就这些。关键在于根据场景选择合适的缓存层级：HTTP缓存适合静态资源，内存缓存适合临时数据，Service Worker适合复杂离线需求。合理搭配，才能让网络请求又快又稳。不复杂但容易忽略。
