javascript - 在浏览器上处理大型 json 数组以创建表

Question

我目前正在开发一个库存管理 Web 应用程序，我通过使用异步 fetch 在 HTML 表上加载大量数据。

async function getNewSummary() {
    try {
        let groups = await fetch(
            "http://localhost:3000/dashboard/summary/groups", {
                method: "GET"
            }
        );
        let groupData = await groups.json();
        console.log(json);
        var table = document.getElementById("grouptable");
        for (data in groupData)
            table.innerHTML = `<tr>
    <td>${groupData[data].groups}</td>
    <td>${groupData[data].permission}</td>
    </tr>`;
    } catch (e) {
        console.log(e);
    }
}

我的 Express API 返回一个大型 JSON 数组，我循环遍历该数组并从中创建表行。我希望浏览器在这样做时停止工作。我还有其他方法可以完成它吗？ 我需要创建表，然后将其用作 DataTable。

Answer 1

只是好奇，但我尝试使用您的代码作为示例加载一个相当大的数据集(28795 个 JSON 对象)，并且加载速度非常快。我调整了 DOM 操作以使用 innerHTML 之外的其他内容，但除此之外它几乎是相同的。这是我提出的要求:

ma​​in.js

async function getNewSummary() {
    try {
        const groups = await fetch("https://raw.githubusercontent.com/prust/wikipedia-movie-data/master/movies.json");
        const groupData = await groups.json();
        console.log('Num documents: ', groupData.length);
        console.log('Example document: ', groupData[0]);
        const table = document.getElementById("grouptable");
        for (data in groupData) {
            let tr = document.createElement('tr');
            let td = document.createElement('td');
            td.textContent = groupData[data].title;
            tr.appendChild(td);
            table.appendChild(tr);
        }
    } catch (e) {
        console.log(e);
    }
}

getNewSummary();

这是它工作的 gif，创建所有 28,795 个表行只需要大约 2 秒。问题可能是您将数据添加到 DOM 的方式而不是数据集的大小吗？或者你的数据集更大吗？我从来没有处理过大量数据，所以我可能会偏离基地，但如果可以的话我想尝试提供帮助。

这是另一个版本，我单击一个按钮将背景更改为红色，并在加载时添加一些 p 标签。它肯定会挂起，但只持续一秒钟: