Internet Explorer Performance Tips

Recently at work,  I  was asked to develop an HTML Grid  to be replaced  with current Grid we do use in our web application. The reason was, the grid  we use was simply insufficent in terms of usability ( has lack of features )  , visuality ( had some visual problems in same cases and at some IE versions )  and extendability . Source code of  the existing  grid component  was poorly documented, badly coded and hard to understand. So I've decided  not to maintain existing grid component , develop a new one instead.
Long story short  ; I've found the amazing Datatables which is a jquery plugin that provides awesome, extendable and easy to use  html grid. After finished  developing the required grid ( that has custom filters, customized css , customized sorting and paging ...etc)  started to test it. It was working great on Chrome. However, it was extremely slow on Internet Explorer.
In my test ,  1.500 records of json data was bound to the HTML grid. It was taking 3-4 seconds for Chrome to render, while Internet Explorer was rendering it in about 50-55 seconds.
It was unacceptable.I knew IE's rendering performance was shit, but still  I wasn't expecting this kind of slow rendering.Since , in our company we use Internet Explorer as browser for our application, i had to work on the grid and optimize it for IE.

After searching performance killer function calls by using profiler , we made some fixes and could manage to make our grid render 1.500 records in 9-10 seconds on IE. It was still bad performance comparing to Chrome , but it was kinda acceptable.


TL DR; Here are tips

• use  table-layout: fixed; : If you rendering table , use  : 

  
  table-layout: fixed;
  

• Avoid using  css class selector :    Class selector is an optimization killer for IE. Especially if the page is crowded in terms of DOM.  Better  select element by id , or  narrow down the element set.

For instance; 

$('.filter-row');// Bad performance 
$('#myTable .filter-row') ; //Better performance
$('#myTable #filterRow') ; // Much better performance

• Use pure javascript instead of jquery functions :  No doubt, jquery is great. Makes javascript much easier and readable. However, this comes with a performance cost. Each jquery call is extra CPU cost for us. It is nothing big , but if you need to call a jquery function like 1500 times ( as in my tests) ,things get slow. If your priority is performance  better use pure javascript functions.

You can see it by yourself by using  IE Profiler.  In my case, i had function calls such as ;  html()  , wrapInner , addClass  and removeClass. After converting them to pure javascript calls , i got huge performance boost.

I would be glad to hear advices, tips or questions from you as well. Waiting for comments...