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

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

异步函数getNewSummary（）{ 试一试{ 让组=等待获取( "http://localhost:3000/dashboard/summary/groups", { 方法：“获取” } ); 让groupData=wait groups.json（）； log（json）； var table=document.getElementById（“grouptable”）； 对于（groupData中的数据） table.innerHTML=` ${groupData[data].groups} ${groupData[data].permission} `; }捕获（e）{ 控制台日志（e）； } } 我的

Express

API返回一个大的JSON数组，我在其中循环并从中创建表行。我希望浏览器在这样做时停止工作。我还有别的办法吗？

---

我需要创建表，然后将其用作

DataTable

只是好奇，但我尝试以您的代码为例加载一个相当大的数据集（28795个JSON对象），加载速度非常快。我调整了DOM操作以使用

innerHTML

之外的内容，但除此之外，它基本上是相同的。以下是我提出的要求：

main.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，创建所有28795个表行只需2秒钟。问题可能是向DOM添加数据的方式，而不是数据集的大小？或者你的数据集要大得多？我从未处理过大量的数据，所以我可能会在这里偏离基准，但如果可能的话，我想尝试并帮助

这是另一个版本，我单击一个按钮，将背景更改为红色，并在加载时添加一些

p

标记。它肯定挂起来了，但只挂了一秒钟：

---

我很好奇，但我尝试以您的代码为例加载一个相当大的数据集（28795个JSON对象），加载速度非常快。我调整了DOM操作以使用

innerHTML

之外的内容，但除此之外，它基本上是相同的。以下是我提出的要求：

main.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，创建所有28795个表行只需2秒钟。问题可能是向DOM添加数据的方式，而不是数据集的大小？或者你的数据集要大得多？我从未处理过大量的数据，所以我可能会在这里偏离基准，但如果可能的话，我想尝试并帮助

这是另一个版本，我单击一个按钮，将背景更改为红色，并在加载时添加一些

p

标记。它肯定挂起来了，但只挂了一秒钟：

---

这是我当前的迭代。 在浏览器内部

<script>
function inventoryWorker() {
w = new Worker("js/tableHelper.js");
w.onmessage = function (event) {
DatatableMaker(event.data);
}
}


function DatatableMaker(data) {
$(document).ready(function () {
$('#main').DataTable().destroy();
var events = $("#events");
// Setup text input
$("#main tfoot th").each(function () {
    var title = $(this).text();
    $(this).html(
        '<input class="form-control" type="text" placeholder="Search ' + title +
        '" />'
    );
});
// DataTable
var table = $("#main").DataTable({
    data: data,
    paging: true,
    lengthChange: true,
    searching: true,
    ordering: true,
    info: true,
    scrollX: true,
    scrollCollapse: true,
    autoWidth: true
});
}
</script>

---

它工作得更好，但是当调用

inventoryWorker

函数时会有一个轻微的停顿。 在浏览器内部

<script>
function inventoryWorker() {
w = new Worker("js/tableHelper.js");
w.onmessage = function (event) {
DatatableMaker(event.data);
}
}


function DatatableMaker(data) {
$(document).ready(function () {
$('#main').DataTable().destroy();
var events = $("#events");
// Setup text input
$("#main tfoot th").each(function () {
    var title = $(this).text();
    $(this).html(
        '<input class="form-control" type="text" placeholder="Search ' + title +
        '" />'
    );
});
// DataTable
var table = $("#main").DataTable({
    data: data,
    paging: true,
    lengthChange: true,
    searching: true,
    ordering: true,
    info: true,
    scrollX: true,
    scrollCollapse: true,
    autoWidth: true
});
}
</script>

---

---

它工作得更好，但在调用

inventoryWorker

函数时会有一点停顿

您可以尝试web worker。使用生成器延迟加载？Datatable数据比循环创建表行更快。因此，您可以直接使用datatable加载JSON数据。喜欢并请查看渲染器以修改或自定义您的列、数据和显示格式。希望有帮助。所以我尝试使用WebWorker和datatable数据对象。首先，当我有一个获取数据的事件时，我启动一个web worker，它为数据表生成一个2d数组，然后忽略该数组。然后我调用一个DataTableMaker，在这里我销毁表并用新数据重新创建。这确实很好，但它仍然会让浏览器完全停止片刻。您可以尝试web worker。使用生成器延迟加载？Datatable数据比循环创建表行更快。因此，您可以直接使用datatable加载JSON数据。喜欢并请查看渲染器以修改或自定义您的列、数据和显示格式。希望有帮助。所以我尝试使用WebWorker和datatable数据对象。首先，当我有一个获取数据的事件时，我启动一个web worker，它为数据表生成一个2d数组，然后忽略该数组。然后我调用一个DataTableMaker，在这里我销毁表并用新数据重新创建。这真的很好，但它仍然会让浏览器完全停止片刻。是的，在您的情况下，不使用innerhtml效果很好。但是浏览器选项卡会停止一秒钟吗？@sakib11我不确定我是否明白，你所说的“浏览器选项卡停止”是什么意思？大约有1-2秒的延迟，然后所有的数据都会显示出来，gif不会被任何方式修改。在开发工具中有什么我应该为您检查的吗？我是一个新手开发人员，所以我通常不会处理这种事情。不，对不起，我的意思是当页面加载时，浏览器选项卡中的其他元素是否正常工作？对我来说，当它附加innerHTML时，我不能单击任何其他内容（对于我的ciode）。@sakib11啊，是的，它肯定会阻止我向dom添加任何其他内容。看我的第二张gif。太快了，我几乎没时间注意到。可能先加载页面，然后在加载所有内容后发出获取请求？这就是我目前所做的，我首先加载所有内容。然后进行获取调用。是的，在您的情况下，不使用innerhtml非常有效。但是浏览器选项卡会停止一秒钟吗？@sakib11我不确定我是否明白，你所说的“浏览器选项卡停止”是什么意思？大约有1-2秒的延迟，然后所有的数据都会显示出来，gif不会被任何方式修改。在开发工具中有什么我应该为您检查的吗？我是一个新手开发人员，所以我通常不会处理这种事情。不，对不起，我的意思是当页面加载时，浏览器选项卡中的其他元素是否正常工作？对我来说，当它附加innerHTML时，我不能单击任何其他内容（对于我的ciode）。@sakib11啊，是的，它肯定会阻止我向dom添加任何其他内容。看我的第二张gif。太简单了