I have a div that is not contentEditable. I capture keystrokes, insert the associated char into a string in memory, and then call a render() function that replaces the innerHTML of the div with the current string.

My question is, why does this loop get slower and slower as the innerHTML get's larger? All I'm doing is overwriting the innerHTML of the div with a straight string. Shouldn't this be constant time?

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

I don't understand how this is dependent on the size of the string at all. It slows down when the string's length gets over about 200 characters, and slows down drastically from there on out.

I have a div that is not contentEditable. I capture keystrokes, insert the associated char into a string in memory, and then call a render() function that replaces the innerHTML of the div with the current string.

My question is, why does this loop get slower and slower as the innerHTML get's larger? All I'm doing is overwriting the innerHTML of the div with a straight string. Shouldn't this be constant time?

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

I don't understand how this is dependent on the size of the string at all. It slows down when the string's length gets over about 200 characters, and slows down drastically from there on out.

• javascript
• innerhtml

Share Follow asked Nov 26, 2011 at 20:35 user1022241user1022241 2

• 1 If that was all the code then it would be instant even with 200 000 characters.. show more. – Esailija Commented Nov 26, 2011 at 20:38
• 3 Try writing the textContent instead of the innerHTML property... If the string is not HTML source code, you shouldn't be using innerHTML... – Šime Vidas Commented Nov 26, 2011 at 20:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

dojo.byId('thisFrame')

is a DOM element. Setting the innerHTML property of a DOm element is not constant time because it causes a side effect which does not take constant time.

Specifically, assigning to myHTMLElement.innerHTML causes the browser to parse the string with its HTML parser and rewrite a chunk of the DOM.

http://www.w3/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.

Parsing HTML is at least linear in the amount of HTML, and replacing the DOM is at least linear in both the number of nodes removed and the number of nodes added.

The html you set using innerhtml must be parsed by the browser in order to get the DOM elements that make up the browsers internal representation of the div. This takes more time for a longer string with a greater number of elements.