Javascript 如何使用jQuery（大量）向DOM追加多个元素

我有一个表，它必须由来自API的异步响应动态填充。API发回一个JSON，稍后将其解释为表的一行，我让它完美地运行

问题是，JSON响应越大，处理响应所需的时间就越长（显然），因此当数组中的元素数超过2k-3k时，JS将行追加到表中开始处理JSON响应所需的时间超过20分钟

有没有办法优化这个

下面是我的解析过程的一个示例：

函数fillTable（）{
设tbody=$（'tbody'）；
for（设i=0；i<100；i++）{
设tr=$（''+（i+1）+'表行'+（i+1）+''+（Math.random（）*1000）+''）；
tr.appendTo（tbody）；
}
}
fillTable（）

#
描述
价值
我解决这个问题的方法是，在数组完成后，使用
apply
prototype函数，扩展
append
jQuery函数，而不是将每一行单独追加到表中，将每一行元素推到一个数组中

像这样：

function fillTable() {
    let tr = [];
    let tbody = $('tbody');
    for(let i = 0; i < 100; i++) {
        let e = $('<tr><td>' + (i + 1) + '</td><td>Table row ' + (i + 1) + '</td><td>' + (Math.random() * 1000) + '</td></tr>');
        // Removed for better performance
        //tr.appendTo(tbody);
        tr.push(e);
    }
    $.fn.append.apply(tbody, tr).html();
}

函数fillTable（）{
设tr=[]；
设tbody=$（'tbody'）；
for（设i=0；i<100；i++）{
设e=$（''+（i+1）+'表行'+（i+1）+''+（Math.random（）*1000）+''）；
//为获得更好的性能而删除
//tr.appendTo（tbody）；
tr.push（e）；
}
$.fn.append.apply（tbody，tr.html（）；
}

因此，将11k记录的20-40分钟处理时间减少到7秒左右。
您可以使用分页创建无限次加载和分步加载

函数填充表（第页）{
设tbody=$（'tbody'）；
for（设i=page；i

但是您需要控制滚动页面
有关优化的问题更多地涉及到从等式中删除jQuery并立即添加行（
tbody.insertAdjacentHTML（…）
，
tbody=document.createElement（“tbody”）；/*/tbody.appendChild（row）；table.appendChild（tbody）；
，…）我投票结束这个问题，因为这个问题提供了一个代码的工作示例，并提供了一种优化它的方法。考虑到最初的逻辑是有效的，并且有很多方法可以优化这个逻辑，从而促进自以为是的答案，这个问题对于StackOverflow来说是离题的，更适合于重构主题的相关站点。可能重复的@GeorgeJempty问题标记为可能重复的链接大约有10个新元素。针对该问题提出的答案无法解决2k-3k元素的性能问题。关于该答案的一些问题令人困惑
tr
开始时是一个数组，然后循环执行
tr.appendTo（tbody）
appendTo（）
是一个jQuery方法，而不是数组方法。所以这看起来像个虫子。另外，如果您只是将一个新的元素推送到一个数组中，那么推（e）

比用

tr=[…tr，…e]构造一个全新的数组要干净得多。最后，
tbody
是一个jQuery对象
tbody.append（tr）
将所有元素追加到tbody
$.fn.append.apply（tbody，tr）
操作过于复杂，下面的
html（）
调用未使用。如果您想获得更高的性能，您不会执行
$（html）
而只构建html。抱歉。通过注释appendTo（）块修复了此问题。逐个添加元素大大增加了HTML解析过程，这是我通过一次调用
$.fn.append.apply来修复的。
tr.push（e）
是否比
[…tr，…e]
性能更好？如果是这样的话，我不知道这一点，可能会在我的代码中对其进行更改。为什么构建一个全新的数组要比重用同一个数组、推送新元素表现得更好？我不能只构建HTML，因为它是对API的动态调用，API本身在网站的多个部分中被调用。相同的响应用于构建具有不同结构的其他表。