javascript - AJAX - 附加数据时大响应锁定浏览器

Question

我正在开发一个应用程序，该应用程序从数据库中获取许多记录并将它们呈现到表中。这是通过 AJAX 调用完成的，并将它们附加到已有结果的末尾。

记录数在本例中是变量，可以是 10 或 20,000，具体取决于搜索条件返回的内容。

现在，首先要做的事情。我知道页面上有 20,000 条记录并不明智，但这是允许从此页面查看、修改或标记所有记录的要求。

对 PHP 页面的 AJAX 调用很好，而且似乎运行得很快。然而，瓶颈在于一旦通过 AJAX 接收到数据，就将其附加到 DOM。

在下面的代码中，您将看到创建表行并将其返回到 AJAX 调用的主函数。

/*
  Create Table Rows
*/
function createTableRows($dashboardID, $type){

  // Timer
  $start = microtime(true);

  // Dashboard
  $dashboardID = $_REQUEST['dashboardID'];
  $objDB = new DB;
  $objData = $objDB
    -> setStoredProc('RenderDashboard')
    -> setParam('dashboardID', $dashboardID)
    -> setParam('limit', $_REQUEST['limit'])
    -> setParam('offset', $_REQUEST['offset'])
    -> setParam('actor', '1234')
    -> execStoredProc()
    -> parseXML();

    // Fetch other data
    $markupData = fetchMarkup($dashboardID);
    $exportFields = fetchExportFields($dashboardID);
    $ignore = Array('identifierQID', 'identifierNTID');

    // Vars
    $outputArray = Array();
    $recordCount = 0;
    $i = 0;

    // Loop over our data
    foreach($objData->data as $r){

      $outputArray[$i++] = '<tr data-qid="'.$r->identifierQID.'" class="primaryValue ' . searchMarkup($markupData, $r->identifierQID) . '">';

        // Loop over our fields
        foreach($r as $key => $value){

          // Vars
          $fieldID = str_replace('_', '', $key);

          // Don't include our identifier columns
          if(!in_array($fieldID, $ignore)){
            $outputArray[$i++] = '<td data-tableexport-display="always" class="small' . ($exportFields ? (in_array($fieldID, $exportFields) ? ' hidden' : '') : '') . '">' . formatFieldData($fieldID, $value) . '</td>';
          }

        }

        // Notes always come last
        $outputArray[$i++] = '<td data-tableexport-display="always" class="notesTD allowContext hidden"></td>';

      $outputArray[$i++] = '</tr>';
      $recordCount++;

    }

    // Join our rows array and return it
    $end = microtime(true);
    $timer = number_format($end - $start, 2);
    return array(join("",$outputArray), $recordCount, $timer);
}

// This is what gets passed back to our AJAX call on the UI
echo createTableRows($dashboardID)[0];

这是处理收到的响应的 Javascript。

// Given data, create our table rows
function createRows(data) {

    // Update Progress Bar
    $('[name=progressDiv]').show();

    // Append the results to the DOM
    /* THIS IS WHAT IS KILLING THE SPEED!!!!*/
    $('[name=resultsTable]').append(data);

    // If our total number of records exceeds the threshold, we will be using the progress bar for the status
    if (totalRecords > maxThreshold) {
        $('[name=resultsProgress]').attr('aria-valuenow', currentPage / totalPages * 100)
            .css('width', currentPage / totalPages * 100 + '%')
            .text((currentPage < totalPages ? recordsPerPage * currentPage + ' of ' + totalRecords + ' records loaded' : 'Loaded ' + totalRecords + ' records!'));
    } else {
        // Loaded all records in one shot, update progress bar
        $('[name=resultsProgress]').attr('aria-valuenow', 100)
            .css('width', '100%')
            .text('Loaded ' + totalRecords + ' records!')
            .removeClass('active');
    }
    // Do we have more data to load?
    if (currentPage < totalPages && totalRecords > maxThreshold) {
      // Allow a little time for the progress to update before locking up
      setTimeout(function(){
        fetchMore();
      }, 100);

    }

    // After the table has been appended to the DOM, run clean up to enable any additional functionality
    cleanUp();
}

问题:

问题是 APPEND 锁定了浏览器并导致浏览器在追加完成之前无响应。我已经将其分解，因此它将批量获取数据，但这不是问题，它处理响应中的行。

问题:

有没有办法批量处理结果并附加结果而不锁定浏览器？它本身的响应只是一堆 TR，附加到我的表的 TBODY 中。

我最后的手段是对结果进行分页。如果我能解决这个瓶颈，我就可以说服他们对更大的数据集进行分页。

我想我正在寻找一种方法，要么以更好的格式返回结果以进行附加，要么分解响应并在另一个 AJAX 调用获取更多数据进行处理时将其批量附加。

想法？

Answer 1

您可以使用 Javascript 表格组件来处理大量 JSON 数据的显示。例如:https://clusterize.js.org/