JavaScript更新HTML表格tbody性能对比：哪种方法更优？

我尝试用JavaScript更新HTML表格的tbody内容，有两种实现方法。HTML表格结构如下：

<table>
 <thead>
  <tr>
    <th>Title</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

方法1：字符串插值 #

document.querySelector('table tbody').innerHTML= 
'<tr><td>some text</td></tr><tr><td>some text</td></tr>'

方法2：DOM API逐行插入 #

const table = document.querySelector("table");
const row = table.insertRow(0);
const cell1 = row.insertCell(0);
cell1.innerHTML = 'some text';

假设需要每秒更新表格的整个tbody，且表格包含100行，仅关注性能，请问哪种方法性能更优？原因是什么？

结论：方法1（字符串插值）性能更优 #

核心原因： #

• DOM操作次数的巨大差异：方法1仅需1次innerHTML赋值操作，浏览器会一次性解析字符串并完成整个tbody的节点创建与渲染；而要插入100行，方法2需要执行100次insertRow、100次insertCell，再加上100次单元格内容赋值，总计数百次DOM操作。DOM操作是浏览器性能开销极高的操作，每一次操作都可能触发重排（reflow）或重绘（repaint），操作次数越多，性能损耗越严重。
• 批量处理的优化优势：innerHTML赋值时，浏览器会将整个字符串作为整体处理，内部会批量创建节点并一次性插入DOM树，通常只会触发一次重排；而逐行调用DOM API的零散操作，会频繁触发重排，浏览器无法有效优化。
• 内存与解析效率：逐行创建DOM节点会生成大量中间对象，占用额外内存；而浏览器的HTML解析引擎处理批量HTML字符串的效率，远高于手动逐个创建DOM节点的方式。

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