javascript - 为什么随着 innerHTML 变大，替换 innerHTML 会变慢？

Question

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

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

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

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

Answer 1

dojo.byId('thisFrame')

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

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

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

On setting, [innerHTML] replaces the node's children with new nodes that result from parsing the given value.

解析 HTML 至少与 HTML 的数量成线性关系，而替换 DOM 至少与删除的节点数和添加的节点数成线性关系。