Question

我有一个表，该表必须由API的异步响应动态填充。该API会发回一个JSON，该JSON随后会解释为该表的一行，并且我可以完美运行它。

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

有什么方法可以对此进行优化？

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

function fillTable() {
    let tbody = $('tbody');
    for(let i = 0; i < 100; i++) {
        let tr = $('<tr><td>' + (i + 1) + '</td><td>Table row ' + (i + 1) + '</td><td>' + (Math.random() * 1000) + '</td></tr>');
        tr.appendTo(tbody);
    }
}
fillTable();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Description</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

很显然，该代码片段无法反映处理JSON所需的时间，但您可以理解。

Answer 1

我要解决的问题是，不是将每一行分别添加到表中，而是将每一行元素推到一个数组中，并在完成数组后，使用apply原型函数，扩展{{ 1}} jQuery函数，以便一次应用整个数组。

赞：

append

因此，将11k记录的20-40分钟处理减少到大约7s。

Answer 2

您可以使用分页逐步创建无限加载和逐步加载。

function fillTable(page) {
    let tbody = $('tbody');
    for(let i = page; i < page + 50; i++) {
        let tr = $('<tr><td>' + (i + 1) + '</td><td>Table row ' + (i + 1) + '</td><td>' + (Math.random() * 1000) + '</td></tr>');
        tr.appendTo(tbody);
    }
}
fillTable(5);

但是您需要控制滚动页面

如何使用jQuery

2 个答案: