IE 11 - Tables DOM Leistungsproblem

Question

ich eine HTML-Tabelle mit 500 Zeilen und das folgende Stück von js haben:

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

ich einen Test auf diesen drei Browser lief:

IE 11:
init Äpfel: 4.807,458ms
init Äpfel: 4.424,716ms
init Äpfel: 5.007,424ms
init Äpfel: 4.368,084ms
init Äpfel: 4.354,414ms

Chrome:
init Äpfel: 128.066ms
init Äpfel: 154.445ms
init Äpfel: 139.853ms
init Äpfel: 157.234ms
init Äpfel: 130,374 ms

Firefox:
init Äpfel: 286.96ms
init Äpfel: 255.26ms
init Äpfel: 268.33ms
init Äpfel: 242.93ms
init Äpfel: 249.12ms

Ich frage mich, warum ist es so langsam, und wenn es eine Möglichkeit, es zu beschleunigen?

Answer 1

nach einigen weiteren Recherchen und Browsing 9gag fand ich heraus, dass die Render-Engine von IE ist sehr langsam im Gegensatz zu Chrome und Firefox, wenn es darum geht, das DOM zu manipulieren.

Der einzige Weg, um es zu beschleunigen, war, es in eine Ajax-gesteuerte Datentabelle zu ändern.

für den Frühling:

@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"}] 

Datentabelle:

$.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'); 
} 

die Render-Funktion sehr nützlich war, alle Arten von Markup-Magie zu tun:

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

bDeferRender Option machte es 15% schneller.

IE 11: ca. 180 ms

Chrome: ca. 60ms

Firefox: ca. 140ms