Javascript 如何将大量数据加载到datatable而不影响性能

当我加载较少的数据（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加载数据

我的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++;
});

//初始化数据库
var table_new=$（'#db_new_table'）。数据表（{
“bSortClasses”：false，
“长度菜单”：[500100015002000]，
“页面长度”：500，
“延迟加载”：coutnt，
});
//将数据加载到数据表
var j=1；
$.each（（this.data），函数（i，key）{
var tr=''+i+''+key+''；
表_new.rows.add（$（tr））.draw（）；
j++；
});

3000行是浏览器需要处理的大量DOM元素。您可以尝试使用虚拟滚动来防止浏览器变慢或崩溃。虚拟滚动将只呈现您在屏幕中看到的DOM元素，并在滚动时替换数据，而不会添加更多DOM元素

您可以尝试使用此库进行虚拟滚动

---

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

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