MVC+Knockout.js日历Ajax请求过慢，Fetch改造无效求优化方案

先解决你用Fetch重构后pending的问题，再给你几个核心优化方向：

一、Fix Fetch请求Pending的问题 #

jQuery的Ajax默认会带上cookie和X-Requested-With头，而Fetch默认不做这些，这大概率是请求pending的原因。试试标准的Fetch写法：

function loadCalendar(year, month) {
  fetch(`/ajax/GetCalendarHTML?year=${year}&month=${month}`, {
    method: 'GET',
    credentials: 'include', // 对应jQuery的withCredentials，带cookie
    headers: {
      'X-Requested-With': 'XMLHttpRequest', // 告诉后端是Ajax请求，MVC接口可能依赖这个
      'Accept': 'text/html'
    }
  })
  .then(response => {
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    return response.text(); // 返回HTML用text()，不要用json()
  })
  .then(html => {
    // 这里写渲染逻辑，比如插入到目标容器
    document.getElementById('calendar-container').innerHTML = html;
  })
  .catch(error => {
    console.error('加载日历出错:', error);
  });
}

这样应该能解决pending的问题，先确保请求能正常返回，再做性能优化。

二、核心优化：减少请求次数（重点） #

每个月单独请求是性能瓶颈的核心，不管用jQuery还是Fetch，多次HTTP握手、传输的开销占了大部分延迟，优先从这里入手：

1. 后端改造：批量获取多月份HTML #

修改GetCalendarHTML接口，支持传入多个年月参数，一次性返回多个月的HTML片段，把N次请求变成1次。

• 前端请求示例：

// 比如加载当前月前后2个月
const targetMonths = ['2024-06', '2024-07', '2024-08'];
fetch(`/ajax/GetCalendarHTML?yearsMonths=${encodeURIComponent(targetMonths.join(','))}`, {
  credentials: 'include',
  headers: { 'X-Requested-With': 'XMLHttpRequest' }
})
.then(res => res.json())
.then(data => {
  // data结构：{ '2024-06': '<div>...</div>', '2024-07': '<div>...</div>' }
  Object.entries(data).forEach(([ym, html]) => {
    // 渲染对应月份的容器
    document.getElementById(`calendar-${ym}`).innerHTML = html;
  });
})
.catch(err => console.error(err));

• 后端C# MVC示例（修改接口逻辑）：

public ActionResult GetCalendarHTML(string yearsMonths)
{
    var result = new Dictionary<string, string>();
    foreach (var ym in yearsMonths.Split(','))
    {
        var parts = ym.Split('-');
        int year = int.Parse(parts[0]);
        int month = int.Parse(parts[1]);
        // 复用原有的生成日历HTML的逻辑
        string html = GenerateCalendar(year, month);
        result.Add(ym, html);
    }
    return Json(result, JsonRequestBehavior.AllowGet);
}

2. 前端本地生成日历（彻底摆脱HTML请求） #

既然用了Knockout.js，把日历渲染逻辑移到前端，后端只返回数据（比如日期状态、事件列表），数据量比HTML小得多，性能提升最明显：

• 后端提供数据接口（比如/ajax/GetCalendarData），返回JSON：

{
  "year": 2024,
  "month": 6,
  "days": [
    { "date": "2024-06-01", "isWeekend": true, "events": [] },
    { "date": "2024-06-02", "isWeekend": false, "events": [{ "title": "团队会议" }] }
  ]
}

• 前端用Knockout模板渲染：

<div class="calendar" data-bind="with: currentCalendar">
  <h4 data-bind="text: `${year}年${month}月`"></h4>
  <div class="weekdays">
    <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
  </div>
  <div class="days" data-bind="foreach: days">
    <div class="day" data-bind="css: { weekend: isWeekend, has-event: events.length > 0 }">
      <span data-bind="text: date.split('-')[2]"></span>
      <div class="events" data-bind="foreach: events">
        <span data-bind="text: title"></span>
      </div>
    </div>
  </div>
</div>

• ViewModel逻辑：

function CalendarVM() {
  const self = this;
  self.currentCalendar = ko.observable(null);

  self.loadCalendar = (year, month) => {
    fetch(`/ajax/GetCalendarData?year=${year}&month=${month}`, {
      credentials: 'include',
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(res => res.json())
    .then(data => self.currentCalendar(data))
    .catch(err => console.error('加载数据失败:', err));
  };

  // 初始化加载当前月
  const now = new Date();
  self.loadCalendar(now.getFullYear(), now.getMonth() + 1);
}

ko.applyBindings(new CalendarVM());

这种方式不仅请求快，还能灵活修改样式，后续维护也更方便。

3. 加缓存减少重复请求 #

不管用哪种方案，都可以加缓存：

• 前端缓存：用内存或localStorage缓存已加载的月份，切换时先读缓存：

const calendarCache = new Map();

function loadCalendar(year, month) {
  const key = `${year}-${month}`;
  if (calendarCache.has(key)) {
    self.currentCalendar(calendarCache.get(key));
    return;
  }
  // 没缓存才发起请求，请求成功后存入缓存
  fetch(`/ajax/GetCalendarData?year=${year}&month=${month}`)
  .then(res => res.json())
  .then(data => {
    calendarCache.set(key, data);
    self.currentCalendar(data);
  });
}

• 后端缓存：给接口加输出缓存，比如MVC的[OutputCache]特性，缓存相同年月的请求结果，减少后端重复计算：

[OutputCache(Duration = 3600, VaryByParam = "year;month")]
public ActionResult GetCalendarData(int year, int month)
{
    // 生成数据逻辑
}

三、排查后端性能瓶颈 #

如果优化后还是慢，检查后端：

• 用浏览器Network面板看请求耗时：是TTFB（后端处理时间）长，还是下载时间长；
• 检查GenerateCalendar函数有没有冗余逻辑，比如重复查询数据库、循环拼接字符串；
• 查看数据库查询是否走索引，比如查询日历事件的SQL有没有优化空间；
• 检查服务器负载，CPU、内存是否过高。

内容的提问来源于stack exchange，提问作者Learning