选择国家刷新大量表格行时加载spinner不显示如何解决

• 浏览器的JS执行线程和UI渲染线程互斥：你同步调用$('#loader img').show()后，浏览器还没来得及把加载动画渲染到页面，就被后续大量DOM操作的JS逻辑阻塞了，直到所有代码执行完成才会统一渲染页面，所以你看不到加载动画的展示过程。
• DOM操作效率太低：现有代码在循环中每次插入一行表格，会触发几千次DOM重排，是页面卡顿的核心原因。

核心修改点有两个：

1. 用setTimeout把重逻辑放到下一个事件循环执行，给浏览器预留时间先渲染加载动画
2. 先拼接完所有表格行的HTML字符串，再一次性插入DOM，仅触发1次重排，大幅提升渲染效率

优化后代码 #

function filterCountry(){
  // 先显示加载动画
  $('#loader img').show(); 
  // 加0延时，让浏览器先完成加载动画的渲染再执行后续逻辑
  setTimeout(() => {
    $('#part_list_body').remove();
    const newTbody = $('<tbody id="part_list_body">');
    // 直接插入拼接好的所有行
    newTbody.html(getCountryRowsHtml($xmldata));
    $('#part_list').append(newTbody);
    $('#part_list').trigger('update');
    // 渲染完成后隐藏加载动画
    $('#loader img').hide();
  }, 0)
}

// 原loadSelectCountry修改为返回拼接好的表格行HTML
function getCountryRowsHtml(xml){
  const selectedCountry = $('#ct_select').val();
  let rowsHtml = '';
  // 遍历匹配节点直接拼接行，不需要额外用数组存储
  $(xml).find(`ct:contains('${selectedCountry}')`).parent().each(function(){
    const country = $(this).find('ct').text();
    const company = $(this).find('co').text(); 
    const industry = $(this).find('ind').text();
    // 有其他字段直接在这里拼接对应的<td>即可
    rowsHtml += `<tr class="datarow"><td>${country}</td><td>${company}</td><td>${industry}</td></tr>`;
  })
  return rowsHtml;
}

如果4000行渲染还是有卡顿，可以引入表格虚拟滚动能力，仅渲染可视区域的行，不管总数据量多大都能保持流畅。

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