Slow Rendering with Large Tables in IE 9 & 8
Recently I have been working through a client-side performance issue, which is isolated to Internet Explorer and is not fixed in Internet Explorer 9. The problem I am having is when I use the DataTables plugin to add sorting, filtering and paging to a table. The issue is actually details in a StackOverFlow question posted this past March.
To sum it up when you have a rather large table it takes not just a couple of seconds but sometimes I have had to deal with 5-8 minutes before Internet Explorer the table content is rendered. This is NOT a problem with other browsers, FireFox, Chrome and Opera all render the table within 1-3 seconds.
Large Table with DataTables Plugin Applied
Dennis, the StackOverFlow question, found the problematic line in the dataTables plugin:
aLocalData[jInner] = nTds[j].innerHTML;
The problem on this line is the call to innerHTML. This call, which originally created by Internet Explorer is notoriously slow. To make matters worse I found some references to IE even making this slower when the element being referenced is hidden, which is true in this case.
The way the dataTables plugin works is you apply it to a table and it clones the rows in the TBODY tag then builds a hidden data store from this clone. It references the innerHTML values for each table cell to perform searches, paging, etc. By doing this it makes it really easy to apply the paging, sorting and filtering functionality over a customized content.
So how can you trace down the problem? The IE script profiler gives you some clues. I found it interesting you get two different profiles between IE 8 & IE 9. In fact it looks like the appendChild() function.
IE 8 Profile
IE 9 Profile
So it looks like the problem persists in the latest version of Internet Explorer, even if has shifted from innerHTML to appendChild. I hope this issue will eventually be resolved before IE 9 is fully released.
Download the Web Site