大数据的 Javascript 性能问题

Question

我正在用 javascript 过滤一个列表。 我的代码可以正常工作，但是当列表 const 大于 100 时，浏览器会冻结。

<div id="domList" class="flex flex-col p-8 space-y-4 bg-white shadow rounded-xl">
    <?php foreach ($clients as $client): ?>
        <a href="<?=base_url();?>/clients/<?=$client->id;?>" class="flex justify-between p-4 bg-gray-100 rounded item hover:bg-gray-200">
            <div class="flex items-center"><span class="mr-2 text-xs text-gray-400"><?=$client->customernumber;?></span> <?=$client->fn;?> <?=$client->ln;?></div>
            <div class="ml-2 py-1 px-2 text-xs flex-shrink-0 flex justify-center items-center text-white <?=$client->status_bg;?> rounded"><?=$client->status;?></div>
        </a>
    <?php endforeach;?>
</div>

<script type="text/javascript">
    const list = <?=json_encode($clients);?>;

    const filterEventHandler = (event) => {
        const filterVal = event.target.value;

        const domList = document.getElementById('domList');

        domList.innerHTML = '';

        const newList = list.filter((e) =>
            e.customernumber.toLowerCase().includes(filterVal.toLowerCase()) ||
            (e.fn + " " +e.ln).toLowerCase().includes(filterVal.toLowerCase())
        );

        newList.forEach(user => domList.innerHTML += buildItem(user));
    }

    const buildItem = (user) => {
        const item = `
            <a href="<?=base_url();?>/clients/${user.id}" class="flex justify-between p-4 bg-gray-100 rounded item hover:bg-gray-200">
                <div class="flex items-center"><span class="mr-2 text-xs text-gray-400">${user.customernumber}</span> ${user.fn} ${user.ln}</div>
                <div class="ml-2 py-1 px-2 text-xs flex-shrink-0 flex justify-center items-center text-white ${user.status_bg} rounded">${user.status}</div>
            </a>`;
        return item;
    }
</script>

我做错了什么，如何使此代码适用于更多值（> 50.000）的列表。

Answer 1

看看这是否有助于开始：

• 将下套管filterVal移出.filter循环。 没有必要对list每个项目都这样做。
• 只编写一次innerHTML （而不是清除它然后附加到它）。

const filterEventHandler = (event) => {
  const filterVal = event.target.value.toLowerCase();
  const htmlFragments = list
    .filter(
      (e) =>
        e.customernumber
          .toLowerCase()
          .includes(filterVal) ||
        `${e.fn} ${e.ln}`.toLowerCase().includes(filterVal),
    )
    .map(buildItem);
  const domList = document.getElementById("domList");
  domList.innerHTML = htmlFragments.join("");
};

展望未来，您可能想要考虑一个框架，如 React（或像 Svelte 或 Mithril 这样的轻量级框架），而不是手动构建您的 HTML。

尤其如此，因为名为<script>alert("hello")</script>客户目前会对您的网站造成严重破坏。 :-)