DOM多搜索大数据挂起

Question

使用（HTML、JS）进行多重搜索，这将是一个嵌入了 JS、CSS 的 HTML 文件。 它在处理小数据时工作正常，但是当处理大量数据（呈现 4000 行）时它变得太慢，无法使用任何 CDN，因为它需要离线工作。 我该如何优化这个 DOM 多重搜索或者有没有其他方法可以进行多重搜索？

    var searchArray = []
        function multiSearch(inputElement) {
            var value = searchArray.length ? searchArray : inputElement.value.toLowerCase();
            if (event.keyCode === 13 && inputElement.value) {
                searchArray.push(inputElement.value.toLowerCase())
                inputElement.parentNode.insertBefore(createFilterItem(inputElement.value), inputElement)
                inputElement.value = "";
            }
            if (searchArray.length && inputElement.value)
                value = [...searchArray, inputElement.value.toLowerCase()]
            searchDom(value);
        }
        function searchDom(value) {
            document.querySelectorAll('#multiSearch tr:not(.header)').forEach((data) => {
                let text = data.innerText.toLowerCase();
                if ((searchArray.length && value.some(d => text.includes(d))) || (!searchArray.length && text.includes(value)))
                    data.style.display = ""
                else
                    data.style.display = "none"
            })
        }
        function createFilterItem(text) {
            const item = document.createElement("div");
            item.setAttribute("class", "multi-search-item");
            const span = `<span>${text}</span>`;
            const close = `<div class="multi-search-close" onclick="this.parentNode.remove();removeArray('${text}')"></div>`;
            item.innerHTML = span + close;
            return item;
        }
        function removeArray(text) {
            searchArray = searchArray.filter(data => data != text)
            searchDom(searchArray)
        }

.multi-search-filter {
            border: 1px solid #DDD;
            border-radius: 3px;
            padding: 3px;
            min-height: 26px;
            margin-bottom: 10px;
            max-width: 500px;
        }

        .multi-search-filter>input {
            border: 0px;
            outline: none;
            font-size: 15px;
        }

        .multi-search-item {
            margin: 2px;
            padding: 2px 8px 2px 8px;
            float: left;
            display: flex;
            background-color: rgb(204, 204, 204);
            color: rgb(51, 51, 51);
            border-radius: 3px;
            position: relative;
        }

        .multi-search-item>span {
            font-family: 'Muli';
            line-height: 18px;
        }

        .multi-search-item>.fa {
            font-size: 12px;
            line-height: 18px;
            margin-left: 8px;
            position: absolute;
            right: 8px;
            top: 2px;
        }

        .multi-search-close:after {
            display: inline-block;
            content: "\00d7";
            padding-left: 4px;
        }

<div class="multi-search-filter" onclick="Array.from(this.children).find(n=>n.tagName==='INPUT').focus()">
        <input type="text" id="filtInp" placeholder="Multi keyword search" onkeyup="multiSearch(this)">
    </div>
        
    <table id="multiSearch" style="border-collapse: collapse; " width='100%' border='0' bordercolor=Brown
        cellspacing='0' cellpadding='2'>
    <tr class='header'><th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>