使用JS/jQuery插入DOM元素时偶发卡顿的原因排查

首先，咱们来拆解你遇到的问题：偶尔出现的渲染延迟，尤其是连续点击几次后明显变慢，之后又恢复正常。结合你的代码，主要有几个可能的原因，咱们一个个说：

1. DOM节点累积导致重排成本飙升 #

你用的是$('#map').append(code)，每次点击都会在容器里新增一个表格，而不是替换掉旧的。第一次点击是1个表格（200个<td>），第三次点击后容器里就有3个表格（600个<td>）——DOM节点数量翻倍增长，浏览器每次插入后都要触发重排（Reflow）和重绘（Repaint），节点越多，这个过程的耗时就越长，自然会出现卡顿。

哪怕你换成.html()，每次都会销毁旧的DOM树再重建新的，连续操作时浏览器的垃圾回收（GC）可能会在某个节点触发，这也会导致短暂的延迟（GC运行时会阻塞主线程）。

2. 字符串拼接的隐性性能损耗 #

你当前用code += ...的方式拼接HTML字符串，由于JavaScript里字符串是不可变的，每次+=都会创建一个新的字符串对象，循环次数多了（哪怕你这里是10*20=200次），也会累积一些内存开销，虽然单次不明显，但连续触发时可能成为压垮骆驼的最后一根稻草。

3. 浏览器渲染队列的不确定性 #

浏览器会把DOM操作攒到一起批量执行，但连续快速点击时，事件触发的频率可能超过浏览器的处理节奏，导致渲染队列堆积，偶尔出现延迟。

对应的解决办法 #

方法一：避免DOM节点累积（最关键） #

如果每次点击的目标是替换容器内容而不是叠加，那每次插入前先清空容器，或者直接用.html()覆盖：

$('#setBtn').click(function(){ 
  var code = getHTMLcode(); 
  $('#map').html(code); // 直接覆盖，而不是append
});

这样每次容器里只有一个表格，DOM节点数量稳定，重排成本不会随着点击次数上升。

方法二：优化字符串拼接方式 #

把字符串拼接换成数组push+join的方式，避免多次创建新字符串：

function getHTMLcode() {
  var codeParts = ['<table id="main_table">'];
  for(var i=0; i<10; i++) {
    codeParts.push('<tr>');
    for(var j=0; j<20; j++) {
      codeParts.push('<td></td>');
    }
    codeParts.push('</tr>');
  }
  codeParts.push('</table>');
  return codeParts.join('');
}

这种方式在循环次数多的时候，性能提升会很明显。

方法三：添加防抖，避免短时间内多次触发 #

如果用户可能连续快速点击，给点击事件加个防抖，确保短时间内只执行一次DOM操作：

let debounceTimer;
$('#setBtn').click(function(){ 
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    var code = getHTMLcode(); 
    $('#map').html(code);
  }, 300); // 300ms内重复点击会重置定时器
});

这样可以避免浏览器在短时间内处理多次DOM操作，减少渲染压力。

方法四：检查表格的CSS样式 #

如果表格有复杂的样式（比如border-collapse、hover效果、大量的CSS选择器），也会加重重绘的负担。可以尝试临时简化样式，看看卡顿是否缓解，再针对性优化CSS（比如减少不必要的嵌套选择器，用contain: layout paint让浏览器知道这个表格的渲染不会影响外部元素）。

总结下来，最可能的核心原因是DOM节点累积导致的重排成本上升，加上偶尔的垃圾回收触发，才会出现时快时慢的情况。先试试清空容器再插入的方式，应该能解决大部分问题。

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