Дмитрий

https://jsfiddle.net/khvobL3r/11/

let itemsStr = "";
list.forEach(function(text, indx) {
      if( text.textContent.toUpperCase().includes(query) ) {
      itemsStr += '<li>'+text.textContent+'</li>';
   }
});
$('#result').append(itemsStr);

1. Медленные «дорогие» — операции по изменению DOM дерева. Поэтому всякие реактивные фреймворки типа Vue, React – работают с Shadow DOM – отрисовывая в реальный DOM только изменения.

2. в окно не влезет более, чем N результатов поиска. Поэтому незачем каждый раз сразу отрисовывать все 10 тыс. результатов поиска по букве "С", например. Достаточно первые N показать. Т.е. тут нужен компонент «виртуальной прокрутки» — который рисует только то, что видно, а скролл-баром имитирует всю длину имеющихся результатов.

Итого: я бы прикрутил VueJS и компонент виртуальной прокрутки, например, tangbc/vue-virtual-scroll-list