IE11- DataTables DOM性能问题
IE11- DataTables DOM性能问题
提问于 2017-02-19 16:53:00
我有一个包含500行和以下js的HTML表：
<script type="text/javascript">
$(document).ready(function() {
console.time('init apples');
$('#myApples').DataTable();
console.timeEnd('init apples');
});
</script>我在这三种浏览器上运行了一个测试：
IE 11:
苹果:4.807,458毫秒
init苹果:4.424,716毫秒
苹果:5.007,424毫秒
苹果:4.368,084毫秒
init苹果:4.354,414毫秒
Chrome:
苹果: 128.066ms
苹果:154.445毫秒
init苹果:139.853毫秒
苹果:157.234毫秒
init苹果: 130.374ms
火狐：
苹果: 286.96ms
init苹果: 255.26ms
苹果: 268.33ms
init苹果: 242.93ms
苹果:249.12毫秒
我想知道，为什么它这么慢，如果有办法加快速度呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-23 21:03:10
在进一步研究和浏览9gag之后，我发现IE的渲染引擎与chrome和firefox相比非常慢，当涉及到操作DOM时。
加快速度的唯一方法是将其更改为ajax驱动的datatable。
春季：
@RequestMapping(value = "/applesAsJson", produces = "application/json", method=RequestMethod.GET)
@ResponseBody
public JSONArray AppleController.allApplesAsJson() {
List<Apple> apples = Apple.findAllApples();
return Apple.toJsonArray(apples);
}杰森：
[{"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:约180 ms
Chrome:约60 ca
火狐：约140 ca
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42330036
复制相关文章
相似问题
腾讯云开发者
