jQuery datatables optimization in IE, 96.7% of time spent in offsetWidth

Question

I have a fairly large table rendered using datatables.net 1.9.4 and jQuery. I'm pulling the data asynchronously, and then setting aaData and aoColumns in the datatable initialization.

While it displays almost instantly in Chrome, in IE9, it takes 6 minutes to display.

IE's profiler says that 96.7% of time is spent in the offsetWidth function. Where is offsetWidth and when is it called? I can't find a function by that name.

Here are my initialization options:

aaData: data.Values,
aoColumns: data.Headers,
bProcessing: true,
bDeferRender: true,
bDestroy: true,
bFilter: false,
bPaginate: false,
bSort: false,
sScrollY: fnCalcDataTableHeight(690),
sScrollX: "100%",
bScrollCollapse: true,
bInfo: false,

I also have sole aoColumnDefs.

Thank you.

Answer 1

offsetWidth is the read only value of layout width of the element, which includes element's width, horizontal padding, horizontal borders and scrollbar (if present). JQuery's outerwidth() gives the same thing.

Everytime you add/remove some element to/from DOM, the render tree has to be adjusted. When you add a new element a reflow and a repaint will happen to calculate the new layout of document with your new element and to repaint it on the browser with your new styles if any.

Modern browsers try to do some optimization by queuing these changes and flushing them at once in an attempt to minimize these expensive operations. But when your script is asking for a some values like offsetWidth, these optimizations cannot be applied because as it's the value of layout, all layout changes pending in queue have to be flushed and then the final value is returned for offsetWidth to be accurate. So we should try to minimize its use. Here's an interesting read on this topic. Chrome still tries do some optimizations even in the worst case but not IE.

Coming to your question, datatables plugin might be using it internally. Instead of try and changing the plugin, you can take some other approach.

Use DocumentFragment, generate all your table rows by your self, append them to the table and then apply datatables widget on it. If your rows and columns are too complex, try using a template engine. Take your pick from here

Last time I had this problem, we had a complex table and limited the number of rows to 500 and used pagination. If your table is simple, you threshold can be big but not bigger considering IE :)