Почему замена innerHTML становится медленнее, чем innerHTML становится больше?

Question

У меня есть div, который не contentEditable. Я фиксирую нажатия клавиш, вставляю связанный символ в строку в памяти и затем вызываю функцию render (), которая заменяет innerHTML элемента div текущей строкой.

У меня вопрос: почему этот цикл становится все медленнее и медленнее, чем больше innerHTML? Все, что я делаю, это перезаписываю innerHTML элемента div прямой строкой. Разве это не должно быть постоянным временем?

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

Я не понимаю, как это вообще зависит от размера строки. Он замедляется, когда длина строки превышает 200 символов, и резко замедляется с этого момента.

Answer 1

dojo.byId('thisFrame')

является элементом DOM.Установка свойства innerHTML элемента DOm не является постоянным временем, потому что это вызывает побочный эффект, который не требует постоянного времени.

В частности, назначение myHTMLElement.innerHTML заставляет браузер анализировать строку с его HTMLсинтаксический анализ и перезапись фрагмента DOM.

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

При установке [innerHTML] заменяет дочерние узлы новыми узлами, полученными в результате анализа данного значения.

Синтаксический анализ HTML является по меньшей мере линейным по объему HTML, а замена DOM является по меньшей мере линейной как по количеству удаленных узлов, так и по количеству добавленных узлов.

Answer 2

HTML-код, заданный вами с помощью innerhtml, должен быть проанализирован браузером, чтобы получить элементы DOM, которые составляют внутреннее представление браузеров div. Это займет больше времени для более длинной строки с большим количеством элементов.