IE 11 - проблема производительности DataTables DOM

Question

У меня есть HTML-таблицы с 500 строками и следующий фрагмент ЯШ:

<script type="text/javascript"> 
    $(document).ready(function() { 
     console.time('init apples'); 
     $('#myApples').DataTable(); 
     console.timeEnd('init apples'); 
    }); 
</script> 

Я провел тест на этих трех браузеров:

IE 11:
INIT яблоки: 4.807,458ms
INIT яблоки: 4.424,716ms
INIT яблоки: 5.007,424ms
INIT яблоки: 4.368,084ms
INIT яблоки: 4.354,414ms

Chrome:
INIT яблоки: 128.066ms
INIT яблоки: 154.445ms
INIT яблоки: 139.853ms
INIT яблоки: 157.234ms
INIT яблоки: 130.374 мс

Firefox:
INIT яблоки: 286.96ms
Init яблоки: 255.26ms
INIT яблоки: 268.33ms
INIT яблок: 242.93ms
INIT яблок: 249.12ms

Интересно, почему это так медленно, и если есть способ ускорить его?

Answer 1

после некоторых дальнейших исследований и просмотра 9gag я узнал, что движок рендеринга IE очень медленный, в отличие от хрома и firefox, когда дело доходит до манипулирования DOM.

Единственный способ ускорить его - это преобразовать его в управляемый ajax datatable.

для весны:

@RequestMapping(value = "/applesAsJson", produces = "application/json", method=RequestMethod.GET) 
@ResponseBody 
public JSONArray AppleController.allApplesAsJson() { 
    List<Apple> apples = Apple.findAllApples(); 
    return Apple.toJsonArray(apples); 
} 

JSON:

[{"id":"1", "name":"Granny", "color":"green"}, 
{"id":"2", "name":"Lenny", "color":"red"}] 

DataTable:

$.ajax({ 
    url : '/applesAsJson', 
    cache : false, 
    type : 'GET', 
    }).done(function(data) { 

    console.time('init apples'); 
    $('#myApples').DataTable({ 
     "aaData": data, 
     "columns": [ 
      { "data": "id" }, 
      { "data": "name" }, 
      { "data": "color" } 
     ], 
     "bProcessing": true, 
     "bDeferRender": true 
    }); 
    console.timeEnd('init apples'); 
} 

рендер функция очень полезна, чтобы сделать все виды магии разметки:

{ "data": null, "className": "details-control", 
     "render": function (data, type, full, meta) { 
      return '<img src="/apples/getImage/'+ full.id +'"></img>'; 
     } 
} 

Вариант bDeferRender сделал это на 15% быстрее.

IE 11: ca. 180 мс

Хром: ca. 60 мс

Факс: ca. 140ms