Home/ Questions/Q 6869617
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T03:34:49+00:00

I have a div that is not contentEditable. I capture keystrokes, insert the associated

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    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.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.

    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.

    • 0