Slow HTML table initialization in IE8
Slow HTML table initialization in IE8
hkdennis2k
Posts: 11Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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
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
I've patched the datatable to lazy capture data from rows.
http://datatables.net/forums/comments.php?DiscussionID=1878&page=1#Item_2