如何创建具有大量本地数据的快速用户界面？

Question

我有一个包含15000多个项目的JSON文件。我的JSON文件大约有7MB。我想在一个表中显示所有结果（没有分页），并添加一些复选框以在某些条件下显示或隐藏项目。为了尽可能简化，假设我有一个复选框仅显示巴黎的商品：

问题是用户界面不流畅。单击该复选框大约需要一秒钟来刷新表格。这是不可接受的。

我正在使用fetch()下载JSON数据，然后将其保存在本地。当用户单击复选框时，这就是我所做的：

document.getElementById('paris-only').addEventListener('click', updateTable);

function updateTable() {
    const parisOnly = document.getElementById('paris-only').checked;

    items.forEach(item => item.visible = !parisOnly || item.city === 'Paris');

    refreshTable();
}

function refreshTable() {
    [...document.getElementById('items-table').children].forEach((tr, index) => {
        tr.classList.toggle('hidden', !items[index].visible);
    });
}

.hidden {
    display: none;
}

我曾尝试过setTimeout(_, 0)，但并没有太大帮助。这样可以减少UI冻结，但是刷新表仍需要花费大量时间。

是否有任何策略可以使这样的界面更灵活？我的想法之一是考虑<canvas>，它可以快速绘制许多元素，但对于这项任务来说似乎并不自然。

另一种选择是在滚动状态下以fetch()加载数据，但我想尽可能将所有数据加载一次。

我还要考虑什么？

Answer 1

此外，直接更改项目而不是使用中间列表可能会更有效。