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/

Answer 2

可以将其推送到浏览器队列：

function createRows(data){
JSON.parse(data);
for(elem in data){
(function(){
 var el=elem;
 setTimeout(function(){
  document.body.innerHTML+="<tr>"+el+"</tr>";
 },0);
 })();
}
}

要求data为json数组，可能只返回字符串数组，可以处理：

["<td>User 1</td>","<td>User 1</td>","<td>User 1</td>"]

方案二：完全在服务器端生成：

<progress value="0" max="100" id="prog">
<iframe id="data" iframe src="yourdata">
</iframe>

$("#data").on("load",function(){
  $("#prog").val(100);
 });