Javascript jquery foreach循环需要很长时间才能附加html

我用jqueryforeach循环追加了大约5000条记录，但有时需要很长时间，使浏览器崩溃

        $.each(data, function(index, consignment) {
            
           
           if(consignment.delivery_runs !== null){
              var delivery_run_name = consignment.delivery_runs.name;
           }else{
               var delivery_run_name = '';
           }
           if(consignment.delivery_addresses != null){
               var delivery_name = consignment.delivery_addresses.company_name;
               var delivery_suburb = consignment.delivery_addresses.suburb;
               var delivery_postcode = consignment.delivery_addresses.postcode;
           }else{
            var delivery_name = '';
               var delivery_suburb = '';
               var delivery_postcode = '';
           }
           if(consignment.customers != null){
               var customer_name = consignment.customers.name;

           }else{
               var customer_name = '';
           }
           
        $('#consignment_table > tbody').append(`<tr class="consignment-row"><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.id}">
                <span></span>
                </label></td><td>${consignment.id}</td><td>${$.trim(customer_name)}</td><td>${consignment.customer_reference}</td><td>${$.trim(delivery_name)}</td><td>${$.trim(delivery_suburb)}</td><td>${$.trim(delivery_postcode)}</td><td>${consignment.carton}</td><td>${consignment.pallet}</td><td>${consignment.space}</td><td>${consignment.weight}</td><td>${$.trim(run_sheet_name)}</td><td>${run_sheet_id}</td><td>${consignment.status}</td><td>${$.trim(delivery_run_name)}</td><td>${$.trim(getFormattedDate(consignment.delivery_date))}</td><td>${$.trim(getFormattedDate(consignment.required_delivery_date))}</td><td>${driver}</td><td>${vehicle}</td><td>${consignment.consignment_type}</td><td>${$.trim(consignment.product_types.name)}</td><td><a href="/consignments/show/${consignment.id}">View</a></td></tr>`);
    });

$。每个（数据、功能（索引、寄售）{
如果（寄售交付运行！==null）{
var delivery_run_name=寄售.交货_runs.name；
}否则{
var交付\运行\名称=“”；
}
if（寄售.交货地址！=空）{
var交货\名称=寄售。交货\地址。公司\名称；
var delivery\u郊区=寄售.交货地点\u郊区；
var交货\邮政编码=寄售.交货\地址.邮政编码；
}否则{
var交付名称=“”；
var交付_=“”；
var交付_邮政编码=“”；
}
如果（寄售.客户！=空）{
var customer_name=寄售.customers.name；
}否则{
var客户名称=“”；
}
$（“#寄售_表>tbody”）。追加(`
${寄售.id}${$.trim（客户名称）}${寄售.客户参考}${$.trim（交付名称）}${$.trim（交付市郊）}${$.trim（交付邮政编码）}${寄售.纸箱}${寄售.托盘}${寄售.空间}${寄售.重量}${$.trim（运行单{id}}${寄售.状态}$${.trim（交付运行名称）{（寄售.交货日期）}${$.trim（getFormattedDate（寄售.所需交货日期））}${driver}${vehicle}${寄售.寄售类型}${$.trim（寄售.产品类型.名称）}`）；
});

---

如何改进此代码。

执行for循环，而不是foreach外观。for每个循环由于更新而优化程度较低。

使用data.map构建一个大HTML，并将其附加一次

像这样

$('#consignment_table > tbody').append(Object.values(data).map(consignment => 
{
    let result = '';
    //
    // build up the return string here using whatever logic you need
    //
    return result;
}));

您可以在指定的位置放置任何逻辑来构建单个字符串

这是你的密码

$('#consignment_table > tbody').append(data.map(
    consignment => {
        let delivery_run_name = '';
        let delivery_name = '';
        let delivery_suburb = '';
        let delivery_postcode = '';
        let customer_name = '';

        if (consignment.delivery_runs !== null) {
            delivery_run_name = consignment.delivery_runs.name;
        }
        if (consignment.delivery_addresses != null) {
            delivery_name = consignment.delivery_addresses.company_name;
            delivery_suburb = consignment.delivery_addresses.suburb;
            delivery_postcode = consignment.delivery_addresses.postcode;
        }
        if (consignment.customers != null) {
            customer_name = consignment.customers.name;
        }

        return `<tr class="consignment-row"><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.id}">
            <span></span>
            </label></td><td>${consignment.id}</td><td>${$.trim(customer_name)}</td><td>${consignment.customer_reference}</td><td>${$.trim(delivery_name)}</td><td>${$.trim(delivery_suburb)}</td><td>${$.trim(delivery_postcode)}</td><td>${consignment.carton}</td><td>${consignment.pallet}</td><td>${consignment.space}</td><td>${consignment.weight}</td><td>${$.trim(run_sheet_name)}</td><td>${run_sheet_id}</td><td>${consignment.status}</td><td>${$.trim(delivery_run_name)}</td><td>${$.trim(getFormattedDate(consignment.delivery_date))}</td><td>${$.trim(getFormattedDate(consignment.required_delivery_date))}</td><td>${driver}</td><td>${vehicle}</td><td>${consignment.consignment_type}</td><td>${$.trim(consignment.product_types.name)}</td><td><a href="/consignments/show/${consignment.id}">View</a></td></tr>`;        
    }
));

---

i、 e.本机DOM方法

OP甚至没有使用foreach循环…OP使用的是

$。每个

-比

慢100倍。foreach

实际上我在循环``if（寄售.交付地址！=null）中使用的是if-else条件{var delivery_name=寄售.寄售_地址.公司_name；var delivery_郊区=寄售.寄售_地址.郊区；var delivery_邮政编码=寄售.寄售_地址.邮政编码；}其他{var delivery_name=''；var delivery_郊区=''；var delivery_postcode=''；}```现在我如何在map中使用它？相同？如果你不发布你想要帮助的代码，那么答案就没有帮助了我不需要查看更新的代码-答案现在是通用的-你可以把逻辑放在你自己里面：p-即在你的代码中，你有

$（'#寄售(u table>tbody'）。追加（`big string`）

…在此代码中，您将

返回“大字符串”

它不工作，因为它在响应数据中有关系它不提取关系数据您的问题代码在哪里这样做？数据是数组还是对象？我已经更新了case

数据是对象而不是数组（应该适用于这两种情况）
document.querySelector('#consignment_table > tbody').append(data.map(... same code as .map above ...).join(''))