遍历3800条记录IE浏览器加载过慢，求前端渲染优化方案

嘿，我完全懂你现在的困扰——3800条数据往<select>里塞的时候，循环里频繁操作DOM肯定会让页面卡得不行，毕竟DOM操作是前端性能的头号敌人之一。你之前试过的几种循环方式，本质上都犯了同一个错误：每次循环都直接操作DOM，这会让浏览器反复触发重排（reflow）和重绘（repaint），次数多了自然就慢得离谱，尤其是html()方法每次还会清空现有内容再添加，效率更低。

下面给你几个能大幅提升渲染速度的方案，按效率从高到低排序：

1. 字符串拼接+一次性插入（最推荐） #

先把所有<option>的HTML字符串在内存里拼接好，最后一次性插入DOM，只触发一次重排：

// 先缓存select元素，避免每次循环都查询DOM
const $select = $(".append");
let optionsHtml = '';

for (let i = 0; i < listOfrecords.length; i++) {
  // 用模板字符串更简洁，也避免字符串拼接的语法错误
  optionsHtml += `<option>${listOfrecords[i].name}</option>`;
}

// 一次性插入所有选项
$select.html(optionsHtml);

如果担心字符串拼接在老浏览器的性能问题，可以用数组join来替代：

const $select = $(".append");
const optionsArray = [];

for (let i = 0; i < listOfrecords.length; i++) {
  optionsArray.push(`<option>${listOfrecords[i].name}</option>`);
}

$select.html(optionsArray.join(''));

2. 使用DocumentFragment（内存中构建DOM） #

DocumentFragment是一个“虚拟”的DOM容器，在内存里构建好所有选项后，再一次性插入真实DOM，全程不会触发中间的重排：

const $select = $(".append");
const fragment = document.createDocumentFragment();

for (let i = 0; i < listOfrecords.length; i++) {
  const option = document.createElement('option');
  option.textContent = listOfrecords[i].name;
  fragment.appendChild(option);
}

// 把碎片插入真实DOM
$select[0].appendChild(fragment);

3. jQuery批量添加选项 #

如果习惯用jQuery，可以把所有选项转成jQuery对象数组，然后一次性append：

const $select = $(".append");
const options = listOfrecords.map(record => {
  return $('<option>').text(record.name);
});

$select.append(options);

额外优化点 #

• 缓存DOM元素：像上面代码里那样，先把$(".append")缓存到变量里，避免每次循环都去查询DOM，这也是隐性的性能开销。
• 避免用html()循环覆盖：你之前试过的html()方法每次都会清空现有内容，循环里用它相当于每次都删除旧元素再添加新元素，完全没必要，改用append或者一次性设置html才对。

按这些方法改完后，3800条数据的渲染速度应该会有质的提升，毕竟把几百次甚至几千次DOM操作压缩成了1次。

内容的提问来源于stack exchange，提问作者vallepu veerendra kumar