如何在不影响性能的情况下将大量数据加载到数据表中答案

【问题标题】：How can I load the large amount of data to datatable without affecting performance如何在不影响性能的情况下将大量数据加载到数据表中
【发布时间】：2019-01-29 16:14:28
【问题描述】：

当我加载较少的数据（300 行）时，此脚本运行良好。但是当我尝试加载更多数据（3000 行）时，它会花费更多时间，并且浏览器会显示一些脚本减慢错误。请帮我解决这个问题

HTML表格如下图

<table class="table table-bordered" id="db_new_table">
     <thead>
        <tr>
          <th> Key </th>
           <th> Value </th>
        </tr>
     </thead>
     <tbody>
         //to here loading data from js     
     </tbody>
</table>

我的 JS 脚本如下所示

//Intializing database
    var table_new = $('#db_new_table').DataTable({            
      "bSortClasses": false,           
      "lengthMenu": [ 500, 1000, 1500, 2000 ],
      "pageLength": 500,
      "deferLoading": coutnt,            
    });


//Loading data to datatable   
var j=1;        
$.each((this.data), function(i, key){  
  var tr = '<tr class="table_row" data-id='+j+'> <td>'+ i +'</td> <td>'+ key +'</td> </tr>'; 

  table_new.rows.add($(tr)).draw();            
  j++;
});

【问题讨论】：

你应该使用ajax，而不是一次调用加载3k，只加载应该可见的数据。
服务器端处理是一个选项吗？如果是这样，您可以在这里找到一个示例：datatables.net/examples/server_side/simple.html。进行简单的分页并仅操作 10/25/50 行的 dom 也可以提高性能，因为 dom 操作在这里是最慢的。
根据您的描述，听起来好像所有 3000 行都立即插入到 DOM 中，这对性能有一些影响。您可以做的是尝试获取 300 行并将其显示在可见区域中，如果用户已到达最后一行条目（滚动到列表的末尾），您将触发第二次调用以获取额外的 300 行。。等等。您还可以尝试重用现有元素，而不是向 DOM 添加新元素。
你能分享我关于你提到的@RamizWachtler 的任何参考
我不确定是否有一些相关/可靠的 jQuery/JS 资源（刚刚检查了“jquery/javascriptlazyload list”，我已经简要检查了 DataTables 论坛（也建议使用服务器端处理正如@peter 已经指出的那样）。困难的方法是实现您的自定义解决方案，这是使用服务端处理的简单方法。

标签： javascript jquery html performance datatables

【解决方案1】：

3000 行是相当多的 DOM 元素供浏览器处理。您可以尝试使用虚拟滚动来防止浏览器变慢或崩溃。虚拟滚动只会渲染您在屏幕上看到的 DOM 元素并在您滚动时替换数据，不会添加更多 DOM 元素。

你可以试试这个库进行虚拟滚动 https://clusterize.js.org/

如果您的请求花费太多时间，您可能会遇到超时问题。在这种情况下，您可以考虑使用分页或无限滚动

【讨论】：