Bootstrap Accordion首次加载卡顿问题及性能优化咨询

我明白你现在遇到的痛点：首次展开Accordion时，因为要一次性追加大量DOM元素，直接导致页面冻结无响应。这种情况本质上是频繁DOM操作引发的浏览器重排/重绘阻塞了主线程，再加上一次性处理过多数据，雪上加霜。下面结合你的代码，给你几个落地性强的优化方案：

核心问题拆解 #

你的当前实现有两个关键性能瓶颈：

• 循环里每次都调用$(body).find('.card-body').append(card)，每一次append都会触发浏览器重排，次数多了直接卡住UI
• 用字符串累加(card += ...)构建HTML，虽然比直接操作DOM好，但大量拼接在老浏览器里效率不高，而且一次性插入巨量DOM节点也会造成卡顿

优化方案与代码改造 #

1. 批量构建HTML，一次性插入DOM #

把所有卡片的HTML片段先统一收集，最后只做一次DOM插入操作，把重排次数从N次降到1次。

2. 用数组存储HTML片段（替代字符串累加） #

字符串是不可变类型，每次+=都会创建新的字符串，数组push+join的方式在处理大量内容时效率更高。

3. 添加加载状态，提升用户感知 #

在AJAX请求期间给用户显示加载提示，避免用户以为页面卡死，体验更友好。

改造后的完整代码 #

function getBody(body, key) {
  // 先获取目标容器，避免重复DOM查询
  const $cardBody = $(body).find('.card-body');
  // 显示加载状态
  $cardBody.html('<div class="text-center">加载中...</div>');

  $.ajax({
    type: "POST",
    url: "casse.aspx/getBody",
    data: JSON.stringify({ key: key }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
      const data = $.parseJSON(r.d);
      // 用数组存储每个卡片的HTML片段
      const cardList = [];

      $.each(data, function (i, item) {
        // 解构赋值简化变量获取，代码更清爽
        const { piva, desmag, via, loc, servb2b, idtrabb2b, matricola, azzer, mac, vp, vb, dr, vu, cpu, giart: rt, avviort: datart } = item;
        
        // 用ES6模板字符串替代转义字符，HTML结构一目了然
        const cardHtml = `
          <div class="row ml-2 mr-2">
            <div class="col">
              <div class="row"><span class="badge badge-primary">Cliente</span></div>
              <div class="row"><small class="text-muted">P.Iva</small></div>
              <div class="row"><p class="info">${piva}</p></div>
              <div class="row"><small class="text-muted">Info Negozio</small></div>
              <div class="row"><p class="info">${desmag}</p></div>
              <div class="row"><small class="text-muted">Via</small></div>
              <div class="row"><p class="info">${via}</p></div>
              <div class="row"><small class="text-muted">Localita</small></div>
              <div class="row"><p class="info">${loc}</p></div>
            </div>
            <div class="col">
              <div class="row"><span class="badge badge-primary">Software</span></div>
              <div class="row"><small class="text-muted">VisualPos</small></div>
              <div class="row"><a href="#" class="badge badge-warning">${vp}</a></div>
              <div class="row"><small class="text-muted">VisualB2B</small></div>
              <div class="row"><a href="#" class="badge badge-warning">${vb}</a></div>
              <div class="row"><small class="text-muted">Driver</small></div>
              <div class="row"><a href="#" class="badge badge-warning">${dr}</a></div>
              <div class="row"><small class="text-muted">VisualUpdate</small></div>
              <div class="row"><p class="info">${vu}</p></div>
            </div>
            <div class="col">
              <div class="row"><span class="badge badge-primary">Fiscale</span></div>
              <div class="row"><small class="text-muted">Matricola</small></div>
              <div class="row"><p class="info">${matricola}</p></div>
              <div class="row"><small class="text-muted">Azzeramento Fiscale</small></div>
              <div class="row"><p class="info">${azzer}</p></div>
              <div class="row"><small class="text-muted">RT</small></div>
              <div class="row"><p class="info">${rt}</p></div>
              <div class="row"><small class="text-muted">Data Avvio RT</small></div>
              <div class="row"><p class="info">${datart}</p></div>
            </div>
            <div class="col">
              <div class="row"><span class="badge badge-primary">Fatturazione Elettronica</span></div>
              <div class="row"><small class="text-muted">Servizio B2B</small></div>
              <div class="row"><p class="info">${servb2b}</p></div>
              <div class="row"><small class="text-muted">Trasmittente B2B</small></div>
              <div class="row"><p class="info">${idtrabb2b}</p></div>
            </div>
            <div class="col">
              <div class="row"><span class="badge badge-primary">Hardware</span></div>
              <div class="row"><small class="text-muted">CPU</small></div>
              <div class="row"><p class="info">${cpu}</p></div>
              <div class="row"><small class="text-muted">MAC</small></div>
              <div class="row"><p class="info">${mac}</p></div>
            </div>
          </div>
        `;
        cardList.push(cardHtml);
      });

      // 一次性插入所有内容，仅触发一次DOM重排
      $cardBody.empty().append(cardList.join(''));
    },
    error: function (error) {
      OnFailure(error);
      // 加载失败提示
      $cardBody.empty().html('<div class="text-center text-danger">加载失败，请重试</div>');
    }
  });
}

// Accordion展开事件保留逻辑，建议添加节流防止重复请求（可选）
$('.accordion').on('show.bs.collapse', function (e) {
  const targetId = $(e.target).attr('id');
  const $item = $(`#${targetId}`);
  const $cardBody = $item.find('.card-body');
  
  if ($cardBody.is(':empty')) {
    getBody($item, targetId);
  }
});

4. 进阶优化建议（数据量极大时用） #

如果返回的数据超过几百条，可以再做以下优化：

• 分批渲染：把数据切成若干小块，用setTimeout分批插入DOM，给浏览器留出空闲时间处理UI
• 虚拟滚动：只渲染当前可见区域的内容，滚动时再加载其他部分，彻底解决大量DOM的性能问题（需要额外的实现成本）
• 添加节流：给Accordion的展开事件加节流，避免用户频繁点击触发重复AJAX请求

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