【发布时间】：2021-01-28 08:25:23
【问题描述】：
我正在从数据库中获取大约 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 分钟。有时浏览器页面崩溃。有什么方法可以在不崩溃浏览器的情况下快速解决这个问题？
我不能使用分页。或任何类似的事情我只需要一次呈现数据
【问题讨论】：
-
你真的应该考虑使用分页。获取传递一个查询参数，例如：
?p=1&r=50含义：page: 1, results: 50你最终会得到一个更小的查询和一个非常快速的页面渲染。如何实现分页系统——这取决于你。也许您使用的后端框架已经有一些开箱即用的工具？或者，您也可以使用延迟加载来代替分页 - 根据developer.mozilla.org/en-US/docs/Web/API/…，您可以从数据库中动态获取行 -
您可以将繁重的负载传递给Web Worker，尽管 pagination 在这种情况下确实会有所帮助。另一种选择是发送多个较小的请求，直到完成。就像获得 500 行 10 次或 100 行 50 次一样。那么再次发送大量请求也有其弊端
-
如果，由于任何邪恶的原因，您不能正确地执行此操作（即分页...），那么这里有一些选项： 1) 一次性渲染所有 HTML。添加
var html = "";并将$('#consignment_table > tbody').append(更改为html+=，然后在for之后添加$('#consignment_table > tbody').append(html)。 2) 渲染 html 服务器端，它应该（通常）比在相对较慢的客户端/平板电脑上更快 3) 使用数据表的 ajax 方法直接加载数据，而不是从 html 转换（这不是最快的）（和数据表的ajax 加载还允许分页/过滤/等） -
您的浏览器必须多次存储相同的数据：1) ajax 数据加载 2) 转换为 html 3) 读入数据表对象 4) 将数据表对象转换为 html。浏览器不是为 OLAP/大型数据集设计的，所以它崩溃也就不足为奇了。人们无法一次看到 5000 条记录，因此以这种方式显示它毫无意义。为所有数据提供 csv/xlsx 导出。生成以可用方式提供数据的报告/图表。找到他们真正需要的东西。 （提示：“一次在屏幕上查看 5000 条记录”不是最终用途）
标签： javascript jquery ajax xmlhttprequest