AJAX请求优化技巧 - 提升网页性能与用户体验

减少不必要的请求次数

很多人在做搜索框自动补全功能时，用户每敲一个字就发一次请求。这种做法看似实时，其实会给服务器带来很大压力。更好的方式是加入防抖（debounce）机制，等用户停止输入300毫秒后再发起请求。这样既能保证体验，又能大幅减少请求数量。

let timer;
inputElement.addEventListener('input', function() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    fetch('/api/suggest?q=' + this.value);
  }, 300);
});

合并多个小请求

页面上同时加载头像、通知数、未读消息三条数据，原本需要三次AJAX调用。完全可以改成一次请求，后端统一返回整合后的用户状态信息。这样不仅减少TCP连接开销，还能避免因某个请求慢而卡住整体渲染。

合理使用缓存策略

有些数据变化不频繁，比如城市列表、商品分类。第一次获取后可以存在内存里，下次直接读取。也可以利用HTTP缓存头，让浏览器自动处理304协商缓存，避免重复下载相同内容。

fetch('/api/cities', {
  headers: {
    'Cache-Control': 'max-age=3600'
  }
})

控制并发数量

批量上传图片时，如果一次性发出几十个请求，很容易导致浏览器阻塞或服务器限流。可以通过队列控制并发数，比如最多同时执行4个上传任务，完成一个再进一个，既稳定又高效。

压缩传输数据

返回的数据尽量精简字段，不用的字段别一股脑全传过来。前端只拿需要的值，后端配合做字段筛选。再加上Gzip压缩，响应体积能缩小七八成。特别是移动端网络环境差的时候，这点优化特别明显。

设置合理的超时时间

默认不设超时的话，网络卡顿时请求会一直挂着，页面就像卡死了一样。给每个重要请求加上timeout，比如8秒没回来就提示“网络不稳，请重试”，用户体验会好很多。

const controller = new AbortController();
setTimeout(() => controller.abort(), 8000);

fetch('/api/data', {
  signal: controller.signal
}).catch(err => {
  if (err.name === 'AbortError') {
    console.log('请求超时');
  }
});

优先关键请求

打开订单页时，订单详情最重要，优惠券列表、推荐商品这些可以稍后加载。把核心接口放在前面，非关键资源延迟请求，用户感知到的速度会快不少。这跟做饭一样，先炒主菜，凉菜慢慢上也没关系。