#javascript #jquery #ajax #xmlhttprequest
#javascript #jquery #ajax #xmlhttprequest
Вопрос:
Я извлекаю около 5000 строк данных из базы данных, а также данные 5 реляционных таблиц. Что вызывает проблему. Я вижу на вкладке сети размер ресурса запроса 9.1 mb . после этого я добавляю данные в таблицу следующим образом
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data) {
if (data.status == "success") {
var consignment = data.consignment;
for (var i = 0; i <= consignment.length; i ) {
if (typeof consignment[i] !== "undefined") {
if (consignment[i].run_sheets != null) {
var run_sheet_name = consignment[i].run_sheets.name;
var run_sheet_id = consignment[i].run_sheets.id;
if (consignment[i].run_sheets.drivers != null) {
var driver = consignment[i].run_sheets.drivers.name;
} else {
var driver = '';
}
if (consignment[i].run_sheets.vehicles != null) {
var vehicle = consignment[i].run_sheets.vehicles.name;
} else {
var vehicle = '';
}
} else {
var run_sheet_name = '';
var run_sheet_id = '';
var driver = '';
var vehicle = '';
}
if (consignment[i].delivery_runs !== null) {
var delivery_run_name = consignment[i].delivery_runs.name;
} else {
var delivery_run_name = '';
}
if (consignment[i].delivery_addresses != null) {
var delivery_name = consignment[i].delivery_addresses.company_name;
var delivery_suburb = consignment[i].delivery_addresses.suburb;
var delivery_postcode = consignment[i].delivery_addresses.postcode;
} else {
var delivery_name = '';
var delivery_suburb = '';
var delivery_postcode = '';
}
if (consignment[i].customers != null) {
var customer_name = consignment[i].customers.name;
} else {
var customer_name = '';
}
if (consignment[i].product_types != null || consignment[i].product_types != undefined) {
var product_type = consignment[i].product_types.name;
} else {
var product_type = null;
}
$('#consignment_table > tbody').append(
`<tr class="consignment-row" id="${consignment[i].id}"><td><label class="kt-checkbox kt-checkbox--single kt-checkbox--solid">
<input type="checkbox" class="kt-checkable check_con" name="check_consignment" data-id="${consignment.id}" value="${consignment[i].id}">
<span></span>
</label></td><td>${consignment[i].id}</td><td>${$.trim(customer_name)}</td><td>${consignment[i].customer_reference}</td><td>${$.trim(delivery_name)}</td><td>${$.trim(delivery_suburb)}</td><td>${$.trim(delivery_postcode)}</td><td class="carton">${consignment[i].carton}</td><td>${consignment[i].pallet}</td><td>${consignment[i].space}</td><td>${consignment[i].weight}</td><td>${$.trim(run_sheet_name)}</td><td>${run_sheet_id}</td><td>${getStatusName(consignment[i].status)}</td><td>${$.trim(delivery_run_name)}</td><td>${$.trim(getFormattedDate(consignment[i].delivery_date))}</td><td>${$.trim(getFormattedDate(consignment[i].required_delivery_date))}</td><td>${driver}</td><td>${vehicle}</td><td>${consignment[i].consignment_type}</td><td>${$.trim(product_type)}</td><td><a href="/consignments/show/${consignment[i].id}"><i class="fa fa-eye"></i></a></td></tr>`
);
}
}
} else {
toastr.error(data.message);
}
$('#consignment_table').DataTable({
"deferRender": true,
responsive: true,
"order": [],
"bSort": true,
scrollY: '50vh',
scrollX: true,
scrollCollapse: true,
"paging": false,
dom: '<"top"i>f<"top"rt><"clear">',
aLengthMenu: [
[-1],
["All"]
],
iDisplayLength: 5000
}).draw();
$('.loader').hide();
}
});
Рендеринг занимает много времени, от 2 до 3 минут. и несколько раз страница браузера вылетает. Есть ли какой-либо способ, которым я могу решить эту проблему, ускорить рендеринг без сбоев браузера?
Я не могу использовать разбивку на страницы. или что-то в этом роде, мне просто нужно сразу отображать данные
Комментарии:
1. Вам действительно следует подумать об использовании разбивки на страницы. Выборка, передающая параметр запроса, например:
?p=1amp;r=50значение:page: 1, results: 50в итоге вы получите запрос меньшего размера и чрезвычайно быстрый рендеринг страницы. Как реализовать систему разбивки на страницы — решать вам. возможно, в используемой вами серверной платформе уже есть какой-то инструмент для использования из коробки? Или вместо разбивки на страницы вы также можете использовать отложенную загрузку — это зависит от developer.mozilla.org/en-US/docs/Web/API /… вы динамически извлекаете строки из базы данных2. Вы могли бы передать большую нагрузку веб-работнику , хотя разбивка на страницы действительно помогла бы в этом сценарии. Другой вариант — отправлять несколько меньших запросов, пока он не будет завершен. Что-то вроде получения 500 строк 10 раз или 100 строк 50 раз. Опять же, отправка большого количества запросов также имеет свои недостатки
3. Если по какой-либо гнусной причине вы не можете сделать это правильно (т.Е. Разбивка на страницы …), То вот несколько вариантов: 1) визуализируйте весь ваш HTML за один раз. Добавьте a
var html = "";и измените$('#consignment_table > tbody').append(наhtml =then послеforдобавления$('#consignment_table > tbody').append(html). 2) визуализируйте html на стороне сервера, который должен (как правило) быть быстрее, чем на относительно медленном клиенте / планшете 3) используйте методы ajax datatable для прямой загрузки данных, а не для преобразования из html (что не является самым быстрым) (а загрузка ajax datatable также позволяет разбивать на страницы / фильтровать / etc)4. Ваш браузер должен сохранять одни и те же данные несколько раз: 1) загрузка данных ajax 2) преобразование в html 3) чтение в объекты datatables 4) преобразование объектов datatables в html. Браузеры просто не предназначены для OLAP / больших наборов данных, поэтому неудивительно, что он выходит из строя. Люди не могут с пользой видеть 5000 записей одновременно, поэтому бессмысленно показывать их таким образом. Предоставьте экспорт csv / xlsx для всех данных. Создавайте отчеты / графики, которые предоставляют данные в удобном для использования виде. Найдите то, что им действительно нужно. (подсказка: «просмотр 5000 записей на экране одновременно» не является конечным использованием )
Ответ №1:
На самом деле, эта проблема возникла не только из-за больших данных, основной проблемой было свойство ответа таблицы данных.
когда я прокомментировал отзывчивое свойство, теперь оно работает отлично
Теперь время сокращается с 2min до 15sec
$('#consignment_table').DataTable({
// responsive: true,
scrollY: '50vh',
scrollX: true,
scrollCollapse: false,
"paging": false,
dom: '<"top"i>f<"top"rt><"clear">',
aLengthMenu: [
[-1],
["All"]
],
iDisplayLength: 5000
}).draw();