jQuery DataTables causing slow script errors in Internet Explorer

One of my pages gets a "Stop running this script? A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer might become unresponsive."

Running the page through Speed Tracer in Chrome shows this:

DOMContentLoaded looks like it might be the problem. Drilling down into reveals that there are hundreds of DOM insertions and HTML parses:

here is a lot of javascript on this page, but I suspect it might be the jQuery DataTables plugin. Removing the plugin confirms my suspicion:

One thing that could be causing the DOM insertions is the DataTable’s fnRender function. The majority of the columns call this function to render the value as a percent and to highlight it in red if it is negative:

If the value is positive, it just appends a percent, but if it is negative, it’s adding a span tag with the new style:

I’m going to remove the special case for the negatives and just see if it speeds things up:

That helped a little bit:

Drilling down shows it removed all the DOM insertions, but there are still hundreds of Parse HTML’s:

If I remove the render function completely:

That cut the time in half:

I think I will add the percent sign server side and add the negative style to the td element server side as well.

Trying a couple other things, I found that the highlight and select functions were adding about half of this time:

Maybe these can be optimized?

Instead of using dataTable.fnGetNodes(), I select the table id directly. Also, for the click event, I changed to use .live(‘click’, …) instead. This brought the time down to around ~50ms. That seems good enough for now.