Slow HTML table initialization in IE8

hkdennis2k

I am using JQuery with the DataTable plugin, and now I have a big performance issue with the innerHTML around jquery.dataTables.js:2220.

Please check my question on stackoverflow
http://stackoverflow.com/questions/2406192/how-to-speed-up-the-reading-of-innerhtml-in-ie8

I use the build-in profiles in IE8 with inline function to locate the problem.

[code]
if ( nTds[j].nodeName == "TD" )
{
(function PROFILER_HINT(){
aLocalData[jInner] = nTds[j].innerHTML; // around jquery.dataTables.js:2220
})();
jInner++;
}
[/code]

I use the above inline function hint to measure the speed of each line.
If you try with a large table, the profiler should show you the function "PROFILER_HINT" is too slow to complete.
Please find my possible optimization patch from the SO question.

I am not sure what the aData is used for, but could it be possible rewritten that the datatable will lazy load it from the content??

PS.
As for my purpose,I used databale for the following features
- one click sorting
- fixed header
- highlighting

We don't use paging, update table via JS, in all our cases.
And we disable the "search / filter" in most of our use case.

allan

Hi hkdennis2k,

aData is used by DataTables to sort and filter data on the client-side. What happens is that it will read in all of the values in the aoData array (which is an array of objects, and each object has an aData array for the data contained in each cell). Because of what this data is needed for (the table must be able to be sorted and filtered at initialisation), it is not possible to populate this array after the fact. It might be possible to optimise it for your specific situation where you are using filtering, and sorting will only be needed on one column initially, but it wouldn't be a generic solution I don't think.

It's very disappointing that IE8 is as slow as _that_ for only 900 rows. Are you doing this in a hidden element or something like that? I've had IE8 initialise a DataTables with 4000 rows within 10 seconds - so 900 rows shouldn't be too much of a problem for it.

Perhaps you could provide a link?

Allan

hkdennis2k

It is a AJAX returned HTML string, and added into a document.createDocumentFragment().
Then I apply the datatable to the table.
Finally I move the table to the real page content.

PS.
It is even more slower (20%, I guess) if I insert table to real content without document fragment.


Sorry, I cannot provide a link.
It is a closed development for internal use within organization.

allan

Yup - makes sense to do it outside of the document flow - nicely speed things up. I think the only thing I can suggest at the moment is to use Javascript profiling tools for IE (the dev tools have them now, and there are others available) to see if you can narrow it down a bit.

Allan

hkdennis2k

My update:

I've patched the datatable to lazy capture data from rows.

http://datatables.net/forums/comments.php?DiscussionID=1878&page=1#Item_2

hkdennis2k

I guess, it is possible that innerHTML will be slower when the tag is inside document.createDocumentFragment()??