为啥随着 innerHTML 变大，替换 innerHTML 会变慢？

Posted 2023-05-07

【中文标题】为啥随着 innerHTML 变大，替换 innerHTML 会变慢？

【英文标题】：Why does replacing innerHTML get slower as innerHTML get's larger?为什么随着 innerHTML 变大，替换 innerHTML 会变慢？

【发布时间】：2012-01-07 01:28:36

【问题描述】：

我有一个 不是 contentEditable 的 div。我捕获击键，将关联的 char 插入内存​​中的字符串，然后调用 render() 函数将 div 的 innerhtml 替换为当前字符串。

我的问题是，为什么随着 innerHTML 变大，这个循环会越来越慢？我所做的就是用一个直字符串覆盖 div 的 innerHTML。这不应该是恒定的时间吗？

dojo.byId('thisFrame').innerHTML = this.value.string;

我完全不明白这如何取决于字符串的大小。当字符串的长度超过大约 200 个字符时，它会变慢，并且从那里开始会急剧变慢。

【问题讨论】：

如果这就是所有代码，那么即使有 200 000 个字符，它也会是即时的.. 显示更多。

尝试写textContent而不是innerHTML属性...如果字符串不是HTML源代码，你不应该使用innerHTML...

【参考方案1】：

dojo.byId('thisFrame')

是一个 DOM 元素。设置 DOm 元素的innerHTML 属性不是恒定时间，因为它会导致不需要恒定时间的副作用。

具体来说，分配给 myHTMLElement.innerHTML 会导致浏览器使用其 HTML 解析器解析字符串并重写 DOM 块。

http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0

在设置时，[innerHTML] 用解析给定值产生的新节点替换节点的子节点。

解析 HTML 在 HTML 的数量上至少是线性的，替换 DOM 在移除的节点数和添加的节点数上至少是线性的。

【讨论】：

这是有道理的。我用来替换 innerHTML 的字符串如下所示：abc，每个新字符都是另一个跨度。所以我猜每次替换innerHTML都会导致另一个HTML解析。谢谢（你的）信息。关于如何更快地做到这一点的任何建议？

也许只是将新节点添加到 innerHTML 而不是全部替换它？

@user1022241，是的。只创建您需要的节点是个好主意。每次您有另一个 <span>x</span> 时，您都在创建两个节点：一个元素和一个文本节点。我曾经用 HTML 编写过一个非常慢的日历 UI（在 IE 6 上），因为它需要 O(nColumns * nRows) 元素，因为它需要 O(nColumns * nRows) 元素，但是通过使用定位的 DIV，我把它归结为 O(nEvents)，这要多得多易于管理。

如果我做一个 div.innerHTML = div.innerHTML.substr(0,10)+'x'+div.innerHTML.substr(10,20) ，是'这与替换整个innerHTML 是一样的吗？我对如何创建 only 新节点并将其添加到当前的 innerHTML 感到困惑。

@user1022241，如果你必须通过innerHTML创建节点，那么你总是可以创建一个空的DIV，设置它的innerHTML，然后将它的子元素附加到原始的。

【参考方案2】：

您使用 innerhtml 设置的 html 必须由浏览器解析，以便获取构成浏览器内部 div 表示的 DOM 元素。对于具有更多元素的更长字符串，这需要更多时间。