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性能问题

回答

相关问题