IE 11 - DataTableのDOMのパフォーマンスの問題

Question

私は500行とjsファイルの以下の部分を持つHTMLテーブルを持っている：

IE 11：

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

私は、これらの3つのブラウザでテストを実行しました
initのリンゴ：4.807,458ms
initのリンゴ：5.007,424ms
initのリンゴ：4.368,084ms
initのりんごを4.424,716ms個のINITリンゴ：4.354,414ms

クローム：
initのリンゴ：128.066ms
initのリンゴ：154.445ms
initのリンゴ：139.853ms
initのリンゴ：
initのリンゴを157.234ms：130.374 MS

のFirefox：
initのリンゴ：286.96ms
のinitリンゴ：255.26ms
initのリンゴ：
initのリンゴを268.33ms：
initのリンゴを242.93ms：249.12ms

私は、なぜそれがとても遅いです、不思議とあれば、それをスピードアップする方法はありますか？

Answer 1

DOMの操作に関しては、IEのレンダリングエンジンがクロームとFirefoxとは対照的に非常に遅いことが判明しました。

これを高速化する唯一の方法は、それをajax駆動のデータテーブルに変更することでした。

春に：

@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 ms

クロム： ca. 60ms

Firefox： ca. 140ms