AJAX返回17861行数据致页面崩溃，求浏览器大行数处理方案

直接一次性渲染上万条数据会长时间阻塞浏览器主线程，导致页面崩溃，给你几个落地的解决办法：

1. 分批渲染，拆分任务不阻塞主线程 #

把17k条数据拆成小批次（比如每批100条），用requestIdleCallback或者setTimeout分批处理，让浏览器有时间处理其他任务，避免卡死。

示例代码：

// 提前编译Handlebars模板（别在循环里重复编译）
const template = Handlebars.compile(document.getElementById('your-template-id').innerHTML);
const tableBody = document.querySelector('#your-table-body');
const batchSize = 100;
let currentIndex = 0;

function renderBatch() {
  const endIndex = Math.min(currentIndex + batchSize, result.length);
  const batch = result.slice(currentIndex, endIndex);
  
  // 先把当前批次的HTML拼接好，再一次性插入DOM，减少操作次数
  let html = '';
  batch.forEach(elem => {
    const obj = { /* 把elem转成模板需要的格式 */ };
    html += template(obj);
  });
  tableBody.insertAdjacentHTML('beforeend', html);
  
  currentIndex = endIndex;
  if (currentIndex < result.length) {
    // 让浏览器空闲时再渲染下一批，也可以用setTimeout(renderBatch, 0)
    requestIdleCallback(renderBatch);
  }
}

// 启动分批渲染
renderBatch();

2. 虚拟滚动，只渲染视口内的内容 #

如果数据量极大，虚拟滚动是更高效的方式——只渲染用户当前能看到的行，滚动时动态替换内容，不用渲染全部17k条。

核心思路：

• 先算出表格视口高度、每行固定高度
• 根据滚动位置，确定需要渲染的起始/结束索引
• 只渲染这个范围内的行，用空白div填充上下区域，保证滚动条位置正常

示例简化版：

const template = Handlebars.compile(document.getElementById('your-template-id').innerHTML);
const table = document.querySelector('#your-table');
const tableBody = table.querySelector('tbody');
const rowHeight = 40; // 假设每行固定40px
const viewportHeight = table.clientHeight;
// 多渲染2行，避免滚动时出现空白
const visibleRowCount = Math.ceil(viewportHeight / rowHeight) + 2;

// 设置tbody总高度，让滚动条正常显示
tableBody.style.height = `${result.length * rowHeight}px`;

function renderVisibleRows() {
  const scrollTop = table.scrollTop;
  const startIndex = Math.floor(scrollTop / rowHeight);
  const endIndex = Math.min(startIndex + visibleRowCount, result.length);
  
  tableBody.innerHTML = '';
  
  // 填充顶部空白区域
  const topPadding = document.createElement('div');
  topPadding.style.height = `${startIndex * rowHeight}px`;
  tableBody.appendChild(topPadding);
  
  // 渲染可见行
  const visibleRows = result.slice(startIndex, endIndex);
  visibleRows.forEach(elem => {
    const obj = { /* 转换数据格式 */ };
    const row = document.createElement('tr');
    row.innerHTML = template(obj);
    tableBody.appendChild(row);
  });
  
  // 填充底部空白区域
  const bottomPadding = document.createElement('div');
  bottomPadding.style.height = `${(result.length - endIndex) * rowHeight}px`;
  tableBody.appendChild(bottomPadding);
}

// 监听滚动事件，动态渲染
table.addEventListener('scroll', renderVisibleRows);
// 初始渲染
renderVisibleRows();

3. 优化Handlebars渲染效率 #

• 提前编译模板：不要在循环里重复编译，提前编译一次复用即可
• 简化模板结构：减少DOM嵌套层级，去掉不必要的标签，降低渲染后的节点数量
• 减少DOM操作：别每次循环都往DOM里插元素，先把当前批次的HTML拼成字符串，或者用文档片段一次性插入

4. 提前处理数据 #

如果你的obj转换逻辑复杂，可以先把整个result数组转换成模板需要的格式，再进行渲染，避免循环里重复做转换：

// 提前转换所有数据
const processedData = result.map(elem => {
  return { /* 这里写转换逻辑 */ };
});
// 再用processedData去分批渲染

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