嘿，朋友！我是 Agnes。今天咱们不聊虚的，直接钻进那个让前端开发者和用户都头疼的“黑盒”——AJAX 请求。
你有没有遇到过这种情况：用户在页面上疯狂点击“加载更多”，结果页面卡得像PPT，接口请求像雪片一样飞出去，后端服务器承受不住直接宕机，最后用户愤怒地关掉了页面，留下一堆 500 错误日志供你深夜分析？
别慌，这不仅是你的问题，也是几乎所有大型Web应用的通病。但好消息是，这些问题是可以被系统化解决的。今天，我就把自己这些年踩过的坑、优化过的案例，揉碎了讲给你听。咱们要从“感知层”到“代码层”，彻底搞定请求优化。
一、 为什么我们需要优化 AJAX 请求？
在深入技巧之前，先建立一个共识：请求越多、越慢，用户体验越差。
根据 Google 的研究，页面加载时间每增加 1 秒，bounce rate（跳出率）可能上升 32%。而对于 AJAX 请求，用户等待超过 100 毫秒 就会感知到延迟，超过 1 秒 就会打断思维流。
优化 AJAX 不仅仅是为了让数字好看，更是为了：
- 节省用户流量：特别是在移动端。
- 降低服务器压力：减少无效请求，保护后端不被拖垮。
- 提升界面响应性：避免 UI 卡顿，让交互更丝滑。
二、 核心技巧一：请求去重与合并
1.1 请求去重（Request Deduping）
想象一下，组件 A 和组件 B 都依赖同一个接口 /api/user/profile 的数据。当页面初始化时，A 发了一个请求，B 也发了一个请求。如果没有任何处理，你同一秒内发出了两个完全相同的请求，这不仅是浪费，还可能导致数据竞争（比如一个请求返回旧数据，覆盖了新数据）。
解决方案：缓存 Promise
原理很简单：如果同一个请求正在发送中，就直接返回那个 Promise，而不是重新发起请求。
// 定义一个全局的请求缓存 Map
const requestCache = new Map();
function ajaxWithDeduping(url, options = {}) {
// 用 URL 作为 key，如果已经存在正在进行的请求，直接返回缓存的 Promise
if (requestCache.has(url)) {
console.log(`[去重] 请求已存在，复用 Promise: ${url}`);
return requestCache.get(url);
}
// 发起请求
const promise = fetch(url, options)
.then(res => res.json())
.then(data => {
// 请求成功后，从缓存中移除（或者保留，看你策略，通常移除以避免数据陈旧）
requestCache.delete(url);
return data;
})
.catch(err => {
// 请求失败时，也从缓存移除，允许重试
requestCache.delete(url);
throw err;
});
// 存入缓存
requestCache.set(url, promise);
return promise;
}
// 使用示例
const profileData1 = ajaxWithDeduping('/api/user/profile');
const profileData2 = ajaxWithDeduping('/api/user/profile');
// 此时 profileData1 === profileData2，且只发起了一次网络请求
专家提示：这种方法在 Vue/React 的组件嵌套结构中特别有效。比如一个表格组件和一个头像组件同时需要用户信息，去重能立竿见影地减少 50% 的冗余请求。
1.2 请求合并（Request Batching）
有时候，一个页面需要加载多个相关联的小接口，比如 /api/user/info、/api/user/orders、/api/user/settings。如果串行发送，延迟是累加的；如果并行发送，又增加了并发压力。
解决方案：批量接口或微任务合并
更高级的做法是后端提供一个批量接口，比如 POST /api/batch，前端将多个小请求打包成一个数组发送。
function batchRequest(requests) {
// requests = [
// { url: '/api/user/info', method: 'GET' },
// { url: '/api/user/orders', method: 'GET' }
// ]
return fetch('/api/batch', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requests)
})
.then(res => res.json())
.then(data => {
// 后端返回结构可能类似 { '0': {info...}, '1': {orders...} }
// 前端根据索引解包
return requests.map((req, index) => ({
url: req.url,
data: data[index]
}));
});
}
如果后端不支持批量接口，可以利用 Promise.all 并行发起请求，比串行快得多：
// 错误做法：串行，总时间 = t1 + t2 + t3
const info = await fetch('/api/user/info').then(r => r.json());
const orders = await fetch('/api/user/orders').then(r => r.json());
// 正确做法：并行，总时间 ≈ max(t1, t2, t3)
const [info, orders] = await Promise.all([
fetch('/api/user/info').then(r => r.json()),
fetch('/api/user/orders').then(r => r.json())
]);
三、 核心技巧二：防抖与节流（Debounce & Throttle）
这两个概念常被混淆，但它们解决的是不同的问题。
3.1 防抖（Debounce）：等一下再行动
场景：搜索框输入。用户每敲一个字都触发一次搜索请求？那简直是灾难。
原理：在事件被触发后，等待 n 毫秒，如果这期间没有再次触发，才执行函数；如果再次触发，则重新计时。
function debounce(fn, delay) {
let timer = null;
return function (...args) {
// 每次触发都清除上一个定时器，重新开始计时
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 使用示例
const searchInput = document.querySelector('#search');
searchInput.addEventListener('input', debounce((e) => {
console.log('发起搜索请求:', e.target.value);
fetch(`/api/search?q=${e.target.value}`);
}, 500)); // 用户停止输入 500ms 后才发起请求
生活比喻：防抖就像你在电梯门口。只要还有一个人跑来，电梯就再等几秒，直到最后一个人也进来，电梯才关门运行。
3.2 节流（Throttle）：固定频率行动
场景：窗口滚动触发加载、按钮高频点击。
原理：在指定时间间隔内，只执行一次函数。无论触发多少次，每隔 n 毫秒才执行一次。
function throttle(fn, interval) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
// 如果距离上次执行已经超过间隔时间，则执行
if (now - lastTime > interval) {
fn.apply(this, args);
lastTime = now; // 更新上次执行时间
}
};
}
// 使用示例：滚动加载更多
window.addEventListener('scroll', throttle(() => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
console.log('触发加载更多数据');
loadMoreData();
}
}, 300)); // 每 300ms 最多触发一次
生活比喻：节流就像你坐地铁刷卡，无论你怎么刷，闸机每 1 秒才开一次（假设系统限制），你只能每隔一段时间通过一次。
3.3 防抖 vs 节流：如何选择？
| 特性 | 防抖 (Debounce) | 节流 (Throttle) |
|---|---|---|
| 核心 | 延迟执行，最后一次为准 | 固定间隔执行，均匀分布 |
| 适用场景 | 搜索输入、表单验证、窗口 resize（计算位置） | 滚动加载、按钮防重复点击、拖拽 |
| 用户体验 | 更精准，避免中间过程无用请求 | 更稳定，保证一定频率的反馈 |
四、 核心技巧三：缓存策略
缓存是性能优化的“核武器”。把请求结果存起来，下次直接读内存，速度从毫秒级提升到微秒级。
4.1 多级缓存架构
一个成熟的 AJAX 缓存系统应该包含三级：
- 内存缓存：应用运行时存储，最快，刷新即失。适合短期、高频数据。
- Cookie/LocalStorage/SessionStorage：持久化存储，适合长期数据。
- Service Worker 缓存：离线缓存，适合静态资源和 API 响应（HTTP Cache 策略配合）。
4.2 实现一个简单的内存缓存管理器
class CacheManager {
constructor(ttl = 5 * 60 * 1000) { // 默认5分钟过期
this.cache = new Map();
this.ttl = ttl;
}
get(key) {
const item = this.cache.get(key);
if (!item) return null;
// 检查是否过期
if (Date.now() - item.timestamp > this.ttl) {
this.cache.delete(key);
return null;
}
return item.data;
}
set(key, data) {
this.cache.set(key, {
data,
timestamp: Date.now()
});
}
// 清除特定 key
invalidate(key) {
this.cache.delete(key);
}
// 清除全部
clear() {
this.cache.clear();
}
}
// 封装 fetch，自动读写缓存
const cacheManager = new CacheManager(60000); // 1分钟缓存
function smartFetch(url, options = {}) {
// 1. 先查缓存
const cachedData = cacheManager.get(url);
if (cachedData) {
console.log(`[缓存命中] ${url}`);
return Promise.resolve(cachedData);
}
// 2. 缓存未命中，发起请求
console.log(`[网络请求] ${url}`);
return fetch(url, options)
.then(res => res.json())
.then(data => {
// 3. 存入缓存
cacheManager.set(url, data);
return data;
});
}
4.3 HTTP 缓存头（后端配合）
前端缓存很重要，但更底层的是 HTTP 缓存。让后端返回正确的 Header：
Cache-Control: max-age=60：浏览器缓存 60 秒，无需发请求。ETag/If-None-Match：资源版本标识，如果未变化返回 304，不传数据体。Last-Modified/If-Modified-Since：基于时间戳的缓存验证。
专家建议：对于变化不频繁的配置数据（如站点配置、字典表），务必开启强缓存；对于用户个人信息，建议使用
no-cache并配合 ETag，确保数据新鲜度。
五、 真实案例解析
案例一：电商商品详情页加载慢
问题：页面打开后，主图、SKU 选择、评价、商品详情四个模块分别请求接口，总耗时 3 秒，用户流失率高。
优化前：
// 串行请求，每个都等上一个完成
const img = await fetch('/api/product/img?id=123');
const sku = await fetch('/api/product/sku?id=123');
const review = await fetch('/api/product/review?id=123');
const detail = await fetch('/api/product/detail?id=123');
优化后：
- 并行请求：使用
Promise.all同时发起四个请求。 - 骨架屏：在数据返回前，展示骨架屏，提升感知速度。
- 懒加载：评价列表分页加载，只加载前 10 条。
- 缓存：商品详情数据缓存 5 分钟，同一用户再次访问直接使用。
结果：首屏时间从 3 秒降至 0.8 秒，跳出率降低 40%。
案例二：后台管理系统表格无限滚动卡顿
问题：数据表格实现无限滚动，每次滚动到底部都立即触发请求，导致请求堆积，页面卡顿。
优化前：
window.onscroll = function() {
if (isBottom()) {
loadMore(); // 每次触发都加载
}
};
优化后：
- 节流：滚动事件使用 throttle 控制在 300ms 内最多触发一次。
- 请求去重：如果当前有请求正在发送，不发起新请求。
- 预加载：在距离底部还有 2 屏高度时，提前发起下一页请求。
let isLoading = false;
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime > delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
window.addEventListener('scroll', throttle(() => {
// 预加载：距离底部 200px 时触发
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
if (!isLoading) {
isLoading = true;
loadMore().then(() => {
isLoading = false;
});
}
}
}, 300));
结果：请求频率从每秒几十次降到 2-3 次，服务器压力骤减，页面流畅度大幅提升。
六、 常见问题解答（FAQ）
Q1: 防抖和节流在 React 中怎么实现？
在 React 中，建议使用 lodash/debounce 或 lodash/throttle，并注意清理定时器，避免内存泄漏。
import { useEffect, useRef } from 'react';
import debounce from 'lodash/debounce';
function SearchInput() {
const inputRef = useRef(null);
useEffect(() => {
const debouncedFetch = debounce((value) => {
fetch(`/api/search?q=${value}`).then(...);
}, 500);
const input = inputRef.current;
input.addEventListener('input', (e) => debouncedFetch(e.target.value));
// 组件卸载时清理
return () => {
debouncedFetch.cancel();
input.removeEventListener('input', ...);
};
}, []);
return <input ref={inputRef} placeholder="搜索..." />;
}
Q2: 缓存如何失效？特别是数据更新后。
缓存失效是 tricky 的问题。常见策略：
- 时间失效：设置 TTL，到期自动清除。
- 主动失效：数据更新时，调用
cacheManager.invalidate(key)。 - 版本控制：URL 带上版本号或时间戳，如
/api/user/1?v=123。 - 事件监听：使用 WebSocket 或 EventSource 监听数据变更，实时清除缓存。
Q3: 如何处理请求超时的情况？
始终设置超时时间，并提供降级方案。
function fetchWithTimeout(url, options, timeout = 5000) {
return Promise.race([
fetch(url, options),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('请求超时')), timeout)
)
]);
}
如果超时，可以返回缓存数据，或者显示“加载失败，请重试”的提示。
Q4: 这些优化对 SEO 有影响吗？
有影响！如果搜索引擎爬虫（如 Googlebot）抓取页面时，发现大量 AJAX 请求导致内容延迟加载，可能会影响索引。 建议：
- 对 SEO 重要的内容，使用 SSR（服务端渲染）或 SSG（静态生成）。
- 如果必须用 AJAX，确保首屏关键数据尽早加载。
- 使用
fetchpriority="high"属性提升关键请求的优先级。
Q5: 如何监控 AJAX 请求的性能？
- 浏览器 DevTools：Network 面板，查看请求耗时、大小、瀑布流。
- Performance API：
performance.getEntriesByType('resource')获取详细指标。 - 第三方工具：Lighthouse、WebPageTest。
- 埋点上报：将关键请求的耗时（从发起至响应完成）上报到监控平台，设置告警阈值。
七、 总结
优化 AJAX 请求不是一蹴而就的，它是一个系统工程，需要从请求策略（去重、合并）、用户交互（防抖、节流）、数据存储（缓存）三个维度入手。
记住几个关键点：
- 能缓存的尽量缓存，减少网络请求。
- 无关的请求并行发，相关的请求看情况合并。
- 高频事件加节流，搜索输入加防抖。
- 永远不要信任用户的手速，前端要做最后的把关。
希望这篇实战指南能帮你解决眼前的性能难题。如果你的项目中有特定的场景，欢迎继续交流，我们可以一起探讨更细致的解决方案。
祝你的页面快如闪电，用户爱到不行！