IE 11 - 數據表DOM性能問題

我有500行的HTML表，下面這段JS的：IE 11 - 數據表DOM性能問題

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

我跑這三款瀏覽器的測試：

IE 11：
初始化蘋果：4.807,458ms
初始化蘋果：4.424,716ms
初始化蘋果：5.007,424ms
初始化蘋果：4.368,084ms
個INIT蘋果：4.354,414ms

鉻：
初始化蘋果：128.066ms
初始化蘋果：154.445ms
初始化蘋果：139.853ms
初始化蘋果：157.234ms
初始化蘋果：130.374 MS

火狐：
初始化蘋果：286.96ms
的init蘋果：255.26ms
初始化蘋果：268.33ms
初始化蘋果：242.93ms
初始化蘋果：249.12ms

我在想，爲什麼這麼慢，如果有一種方法可以加快步伐？

來源

2017-02-19 user1386375

因爲這裏沒有用處？ https://www.google.com/search？q =速度+提高+數據表 – mplungjan

我大多數時間看圖片 – user1386375

經過一些進一步的研究和瀏覽9gag我發現，IE的渲染引擎與Chrome和Firefox相比非常緩慢，當涉及到操縱DOM時。

加速它的唯一方法是將其更改爲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"}]

數據表：

$.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

Chrome： ca. 60ms

Firefox： ca. 140ms

來源

2017-02-23 21:03:10 user1386375

IE 11 - 數據表DOM性能問題

回答

相關問題