IE 11 - DataTables DOM 性能问题答案

【问题标题】：IE 11 - DataTables DOM performance issueIE 11 - DataTables DOM 性能问题
【发布时间】：2017-02-19 16:53:00
【问题描述】：

我有一个包含 500 行的 HTML 表格和以下 js：

<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
初始化苹果：4.354,414ms

铬：
初始化苹果：128.066ms
初始化苹果：154.445ms
初始化苹果：139.853ms
初始化苹果：157.234ms
初始化苹果：130.374ms

火狐：
初始化苹果：286.96ms
初始化苹果：255.26ms
初始化苹果：268.33ms
初始化苹果：242.93ms
初始化苹果：249.12ms

我想知道，为什么这么慢，是否有办法加快速度？

【问题讨论】：

我大部分时间都在看照片

标签： javascript jquery spring datatables

【解决方案1】：

在进一步研究和浏览 9gag 之后，我发现 IE 的渲染引擎在处理 DOM 时与 chrome 和 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"}]

数据表：

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

render 函数对执行各种标记魔法非常有用：

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

bDeferRender 选项让它快了 15%。

IE 11： 约180 毫秒

铬：约60毫秒

火狐： 约140毫秒

【讨论】：