JQuery Datatable 对于图像资源来说太慢了答案

【问题标题】：JQuery Datatable is too slow with image resourcesJQuery Datatable 对于图像资源来说太慢了
【发布时间】：2020-09-13 06:57:08
【问题描述】：

插件使用的脚本：

  <script src="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

我有一个最多包含 19K 行记录的数据表。我没有使用服务器端处理或 AJAX，它只是 DOM。我尝试迁移到服务器端处理，但是重新实现所有功能非常耗时。这都是关于每条记录使用的图像资源，根据我的猜测，这使得数据表最慢。它在本地运行完美。本地与服务器的区别如下。

LOCAL HOSTING

LIVE ON SERVER

表格的实现方式，代码块如下。

          var tableone= $('#tableX').DataTable({
          "scroller": true,
          "deferRender": true,
          "responsive": true,
          "order": [[1, 'asc']],  
          "paging": true, 
          "pageLength": 150,          
          "bFilter": false,
          "searching": true,
          "rowCallback": function( row, data, index ) {
            if ( data[9] == "MATCH COLUMN" )
            {
              $('td', row).css('background-color', '#b5b5de');
            }
            else if ( data[9] != "MATCH COLUMN" )
            {
              $('td', row).css('background-color', 'white');
            }
          },
          "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null; 
            api.column(1, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                      '<tr class="group"><td class="delBack"colspan="14">'+'<strong> THIS SHOULD BE GROUPIFIED : '+group+'</strong></td></tr>'
                    );
                    last = group;
                }
            } );
          },
          "autoWidth": false,
          "aoColumnDefs": [{ "bSortable": false, "bSearchable": false, "aTargets": [2,4,5,6,7,8,9,10,11,12,13 ] } ],
          "aoColumns": [{ "sWidth": "5%" }, { "sWidth": "5%" },{ "sWidth": "2%" }, { "sWidth": "3%" },{ "sWidth": "2%" },{ "sWidth": "19%" },{ "sWidth": "10%" },{ "sWidth": "3%" },{ "sWidth": "3%" },{ "sWidth": "3%" },{ "sWidth": "15%" },{ "sWidth": "5%" },{ "sWidth": "15%" },{"sWidth":"15%"}]
          });

我知道 DOM、AJAX SOURCE 和 SSP。但它应该通过客户端而不是服务器来完成。如果这是导致负载过大的原因，可以通过一种有效的方式来检索图像或资源来提高其性能。任何建议表示赞赏。

编辑 - 图片上传

图像将作为字符串上传到数据库中，文件将上传到文件夹。当图像被检索到数据表时，它是这样完成的

$upload_dir = 'uploads/';
<tbody>
      <?php
      $sql  = "SELECT * FROM `product` WHERE `status`= 'New'";
      $result = mysqli_query($conn, $sql);   
      if(mysqli_num_rows($result)){
      while($row = mysqli_fetch_assoc($result)) {

<td><img src ="<?php echo $upload_dir.$image ?>" height="30" width="30" data-toggle="modal" data-target="#imagemodal<?php echo $row['id']?>"></td>
<?php
    }
?>

然后，当单击图像缩略图时，完整的图像将以模态显示。

编辑 - 删除图像后

LOCAL

LIVE

去掉图片资源后，还不错。但对于 19K 记录，仍然是 10 秒。是不是有点过分了？

【问题讨论】：

很抱歉，来自服务器的 45k 行数据将非常昂贵，而且在 DOM 上也是如此。您必须考虑分页
我们有 45k 个没有分页的表，而且速度不是很慢（这不是一个好主意，但它们也不是很慢）。我认为问题出在这里：retrieve images。您能否详细解释一下如何将图像从数据库发送到数据表以及如何以及在何处渲染它？
@IrvinDominin 是的，分页实现了每页 150 条记录。你可以在这里看到：paging": true, "pageLength": 150,
@Dani 可能我也这么认为。在本地，加载时间仅为 2-6 秒，而直播时间为 32 分钟。呃？我为每条记录上传的图像并将其保存在一个文件夹中。检索只是将单元格中的图像名称称为并缩小高度和宽度。
$row['image'] 是 url 还是 base 64 图片？如果你用<td> </td> 改变它会发生什么？ ???

标签： jquery ajax performance datatable datatables

【解决方案1】：

唯一对我有帮助的解决方案是通过适当的实现迁移到服务器端，而分页是强制性的，以使其更快。我重新开发了整个应用程序，并使用 AJAX 处理请求，从而减少了大量的页面加载。它具有实际图像大小。感谢所有试图解决此问题的人。

【讨论】：