为什么替换innerHTML变得更慢,因为innerHTML变大了?

时间:2011-11-26 20:35:41

标签: javascript innerhtml

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

我的问题是,为什么这个循环变得越来越慢,因为innerHTML变大了?我所做的就是用直字符串覆盖div的innerHTML。这不应该是恒定的时间吗?

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

我根本不了解这取决于字符串的大小。当字符串的长度超过200个字符时,它会变慢,并且从那里开始大幅减速。

2 个答案:

答案 0 :(得分:6)

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至少是线性的。

答案 1 :(得分:3)

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