如何快速通过Ajax为1000条记录设值？性能优化方案咨询

兄弟，1000个单独的Ajax请求直接循环发？这可不慢才怪！每个HTTP请求都要握手、传头部，1000次加起来的开销简直是灾难。咱们来一步步把性能拉满，先从最立竿见影的方案开始：

直接把1000次请求合并成1次，这是减少HTTP开销最有效的办法。前端收集所有记录ID，一次性发给后端，后端批量查询后返回对应的数据，最后前端统一更新DOM。

前端修改代码： #

// 先收集所有记录的ID
const recordIds = $(".Record").map(function() {
    return $(this).attr("id");
}).get();

// 发送批量请求（用POST避免URL长度限制）
$.ajax({
    url: '@Url.Action("GetBatchData", "Employees")',
    data: { ids: recordIds },
    cache: false,
    type: "POST",
    traditional: true, // 确保数组参数能正确传递到后端
    success: function(data) {
        // data建议返回键值对格式：{ "id1": "对应值1", "id2": "对应值2" }
        $(".Record").each(function() {
            const $this = $(this);
            const id = $this.attr("id");
            if (data[id]) {
                $this.text(data[id]);
            }
        });
    }
});

后端示例（C# MVC）： #

public ActionResult GetBatchData(List<string> ids)
{
    // 批量查询数据库，用IN语句替代循环单查
    var result = db.Employees
                  .Where(e => ids.Contains(e.Id))
                  .ToDictionary(e => e.Id, e => e.TargetField); // TargetField替换成你需要的字段
    
    return Json(result, JsonRequestBehavior.AllowGet);
}

如果暂时改不了后端接口，就得控制同时发送的请求数量——浏览器同一域名一般最多支持6个并发请求，1000个一起发会导致大量请求排队，反而更慢。我们可以分批次发送，比如一次发10个，完成一批再发下一批。

示例代码： #

const records = $(".Record").toArray();
const batchSize = 10; // 每次并发10个请求
let currentIndex = 0;

function processNextBatch() {
    if (currentIndex >= records.length) return;
    
    // 截取当前批次的记录
    const batch = records.slice(currentIndex, currentIndex + batchSize);
    currentIndex += batchSize;
    
    // 用Promise.all等待当前批次所有请求完成
    const batchPromises = batch.map(record => {
        const $record = $(record);
        const id = $record.attr("id");
        return $.ajax({
            url: '@Url.Action("GetData", "Employees")',
            data: { id: id },
            cache: false,
            type: "GET"
        }).then(data => {
            $record.text(data);
        });
    });
    
    // 当前批次完成后，处理下一批
    Promise.all(batchPromises).then(processNextBatch);
}

// 启动批次处理
processNextBatch();

• 前端缓存：如果存在重复ID或数据不会频繁更新，缓存请求结果避免重复请求：

  const dataCache = {};
  
  function GetData(value, element) {
      if (dataCache[value]) {
          element.text(dataCache[value]);
          return;
      }
      $.ajax({
          url: '@Url.Action("GetData", "Employees")',
          data: { id: value },
          cache: false,
          type: "GET",
          success: function(data) {
              dataCache[value] = data;
              element.text(data);
          }
      });
  }
  

• DOM操作优化：DOM操作是耗时操作，尽量减少次数——先收集所有请求结果，再一次性更新DOM，而不是每个请求成功后就更新。
• 后端查询优化：如果用批量请求，一定要给ID字段加索引，用IN语句批量查询，避免循环单查的N+1问题，这能大幅缩短后端处理时间。

内容的提问来源于stack exchange，提问作者Ashir K.