为啥 removeChild 比 innerHTML = ' ' 快？

Posted 2023-05-07

【中文标题】为啥 removeChild 比 innerHTML = \' \' 快？

【英文标题】：Why removeChild faster than innerHTML = ' '?为什么 removeChild 比 innerHTML = ' ' 快？

【发布时间】：2020-10-19 04:25:29

【问题描述】：

我有两个函数从this answer 到另一个问题：

1.

const destroy = container => 
  document.getElementById(container).innerhtml = '';
;

const destroyFast = container => 
  const el = document.getElementById(container);
  while (el.firstChild) el.removeChild(el.firstChild);
;

为什么第二个函数比第一个函数快？

【问题讨论】：

您是否有某种实验结果表明第二个更快？

@Sнаđошƒаӽ 不，我只是看着答案问

【参考方案1】：

根据经验，innerHtml 很慢，因为浏览器需要重新解析 html（即使它被设置为 ''）。但是removeChild 直接修改了 DOM，不需要任何解析。因此removeChild 更快。