如何优化 jquery 中的 ajax 响应？

Question

我正在从数据库中获取大约 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 分钟。 有时浏览器页面崩溃。 有没有什么方法可以在不崩溃浏览器的情况下快速解决这个问题？

我不能使用分页。 或任何类似的事情我只需要一次渲染数据

Answer 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();