Javascript performance issue with big data

I am filtering a list with javascript. My code works without issues but when the list const gets greater than 100 the browser freezes.

<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>

What am I doing wrong and how can I make this code working for a list of much more values (> 50.000).

Answer

See if this helps to begin with:

• Move lower-casing filterVal out of the .filter loop. There’s no need to do that for each item in list.
• Only write innerHTML once (instead of clearing it and then appending to it).

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("");
};

Going forward, you may want to think about a framework such as React (or something lighter-weight like Svelte or Mithril) instead of building your HTML by hand.

That is especially true since a customer named <script>alert("hello")</script> will presently cause havoc on your site. 🙂