InnerHTML size limit

Question

I want to use AJAX to load an html file into a <div> , then I will need to run jsMath. All that I have done so far with innerHTML was a paragraph or two, maybe a table and / or image. Nothing special.

What potential problems can occur when I install innerHTML in an external 25k file with all kinds of complex css formatting? (thanks jsMath) I can't think of any other way to do this, but you need to know if there are any restrictions.

Thanks in advance.

- Dave

Answer 1

There is nothing stopping you from doing this technically. The biggest problem will be the page load time. Do not forget to indicate some indication that the data is loading or it will look as if nothing is happening.

Answer 2

In the application in which I am currently working, I did not have any problems in the browser settings innerHTML to line 30k or more. (I don't know what the limit is)

Answer 3

I don't know any size limits for a particular browser, but if you assign a string longer than 65536, Chrome breaks it into many elem.childNodes , so you may need to elem.childNodes over these nodes and merge them.

Run the Chrome Dev Tools utility described below. It builds a string of 160 k, but theDivElement.childNodes[0] gets bound to 65536 characters.

 var longString = '1234567890'; for (var i = 0; i < 14; ++i) { longString = longString + longString; } console.log('The length of our long string: ' + longString.length); var elem = document.createElement('div'); elem.innerHTML = longString; var innerHtmlValue = elem.childNodes[0].nodeValue; console.log('The length as innerHTML-childNodes[0]: ' + innerHtmlValue.length); console.log('Num child nodes: ' + elem.childNodes.length); 

Result: (version for Chrome 39.0.2171.95 (64-bit), Linux Mint 17)

 The length of our long string: 163840 The length as innerHTML-childNodes[0]: 65536 Num child nodes: 3 

But in Firefox innerHTML content is not broken into many nodes: (FF version 34.0, Linux Mint 17)

 "The length of our long string: 163840" "The length as innerHTML-childNodes[0]: 163840" "Num child nodes: 1" 

So, you need to consider that different browsers handle childNodes differently and possibly childNodes over all the child nodes and merge. (I noticed this because I tried using innerHTML for unescape> 100k HTML encoded string.)

In fact, in Firefox I can create innerHTML-childNodes[0] length 167 772 160 by going to i < 24 above. But somewhere above this length, there is an InternalError: allocation size overflow error.

Answer 4

The only limitations that relate to this type are simply throughput and processor related. You must make sure that you do not have the minimum timeout set for your ajax request. You should also check on some slower computers to see if there is a memory problem. Some older browsers can be pretty implacable for large objects in memory.

Answer 5

You probably want to look at this with a tool like dynatrace ajax or speed tracer to understand how setting innerHTML to a really huge value affects performance. You can compare it with another approach, for example, put new content in an iframe or paginate pages.

Answer 6

your limit will most likely be the download limit set on your web server. usually a few MB. Several web frameworks allow you to increase this size, but you can’t just do it because it will mean an increase in buffer size, which is not very good.