Element.innerHTML 运行成本太高，需要替代方案答案

【问题标题】：Element.innerHTML is too expensive to run, need alternativesElement.innerHTML 运行成本太高，需要替代方案
【发布时间】：2020-06-16 14:46:12
【问题描述】：

最近我在分析我的 JS 代码时遇到了一个问题，发现代码中有一个非常小的函数，需要 3-10 毫秒。经过调查，我发现函数Element.innerHTML是这个函数内部调用1-2次时几乎占用了所有CPU时间的函数。

例如：element1.innerHTML = "<span>text</span>"。

我正在寻找减少 CPU 时间的替代方法。

【问题讨论】：

【解决方案1】：

如果您可以忽略使用 Element.innerHTML，请这样做。它非常昂贵。相反，使用document.createElement 和Element.appendChild 代替它。

我将此代码element1.innerHTML = "<span>text</span>" 转换为此代码：

var element2 = doc.createElement('span');
element2.innerText = "text";
element1.appendChild(element2);

当我在这两个地方进行此更改时，我将每个 innerHTML 使用的 CPU 从 1.5 毫秒降至 0.01 毫秒，在大多数情况下甚至为 0 毫秒。

然后我需要在旧代码中存在的不同位置添加 NO_BREAK 符号（“ ”），但我得到的所有建议都是使用 innerHTML 作为这个符号，这将增加我想要的 CPU 时间防止。

解决方法是：

element.appendChild(document.createTextNode('\u00A0'))

没有innerHTML 也会产生同样的效果。即使使用Element.insertAdjacentHTML 也是解析HTML 并且会占用更多CPU 时间，所以我也尝试忽略它的使用。

希望对你有帮助。

【讨论】：