jQuery таблицы данных отображаются слишком медленно - 10000 строк (на стороне клиента)

Question

Я хотел бы повысить производительность страницы веб-сайта, на котором отображается список журналов (~ 10000) с использованием данных, но он загружает все строки данных / большие объемы данных одновременно. Я знаю, что серверная сторона может решить эту проблему, но у меня недостаточно времени для рефакторинга. Надеюсь найти способ отложить загрузку страницы на стороне клиента или бесконечную прокрутку.

var tableOption = {
  "bPaginate": true,
  'retrieve': true,
  'paging': true,
  "info": false,
  "order": [],
  "deferRender": true
};
var table = $('#table').DataTable(tableOption);
$(document).ready(function() {
  getFullRecord();
});

function getFullRecord() {
  var timezone = document.getElementById("timezone").value;
  var website = document.getElementById("website").value;
  var url = document.getElementById("url").value;
  var ip = document.getElementById("ip").value;
  var status = document.getElementById("status").value;

  $.ajax({
    type: "POST",
    url: project + "/recordData",
    contentType: "application/x-www-form-urlencoded",
    dataType: "json",
    data: {
      "dateStart": dateStart,
      "dateEnd": dateEnd,
      "timezone": timezone,
      "website": website,
      "url": url,
      "ip": ip,
      "status": status
    },
    success: function(data) {
      var dataArray = JSON.parse(data.result);
      var execTime = JSON.parse(data.execTime);
      var resHTML = '';
      $.each(dataArray, function(i, item) {
        resHTML += htmlInfo["resHTML"];
      });
      $('#recordTable').html(trHTML);
      table = $('#table').DataTable(tableOption);
    },
    error: function(data) {}
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>


<table id="table" class="table table-striped table-bordered table-hover table-sm ">
  <thead class="thead-dark">
    <tr>
      <th id="timestamp" class="columnWidth" scope="col">Timestamp</th>
      <th class="columnWidth" scope="col">Status / Message</th>
      <th class="columnWidthXs" scope="col">Method</th>
      <th class="columnWidthXs" scope="col">Website</th>
      <th class="columnWidth" scope="col">URL</th>
      <th class="columnWidthSmall" scope="col">IP</th>
      <th class="columnWidthSmall" scope="col">cert</th>
      <th class="columnWidthMax" scope="col">Request </th>
      <th class="columnWidthMax" scope="col">Response </th>
      <th class="columnWidthMax scope=" col ">Host / Instance </th>
						</tr>
					</thead>
					<tbody id="recordTable ">
					</tbody>
				</table>