Как оптимизировать простой алгоритм поиска строки по всей странице?

Question

[kocherman]

Постараюсь быть краток.

Дано: html-страница c текстом и формой поиска с одним input.

Поиск работает как в Firefox по сочетанию Ctrl+F.
Начинаешь вводить в input - в тексте выделяются найденные вхождения.

Накостылял худо бедно работающее в Chromium решение.

Код тут: https://jsfiddle.net/952qo6zu/

Есть две проблемы:

1. Не работает нигде кроме Chromium и неясно в чём ошибка.

2. Когда браузер ищет текст, если его много, то он начинает морозиться. В принципе, в тормозах нет ничего страшного, если бы не маленькое НО: пока набираешь подстроку, во время тормозов при печати пропускаются буквы.

В Firefox так дивно работает поиск по Ctrl+F. Даже на огромных много-мегабайтных страницах. Мне бы его реализовать. Может кто делал что-то подобное?!

В общем уже полтора часа ищу причины, что не так?

Comments

[Denioo]

1. Не работает нигде кроме Chromium и неясно в чём ошибка.

Попробуйте использовать сборщик, подключить babel.

2. Когда браузер ищет текст, если его много, то он начинает морозиться. В принципе, в тормозах нет ничего страшного, если бы не маленькое НО: пока набираешь подстроку, во время тормозов при печати пропускаются буквы.

Дебажьте и увидите на каком этапе тормозит и подумайте что сделать.

[kocherman]

Denioo, babel не поможет, только хуже сделает, он может конвертировать новый синтаксис в старый, а логику работы window.find() и window.getSelection() он вряд ли исправит. На это legacy полифилов не придумали.
Отдебажил. Тормозит метод window.find(). Да я и так догадывался. А что дальше делать? Чем его заменить? Будет ли по-другому работать быстрее? Там логику надо выносить в отдельный worker. А в отдельном процессе искать по элементам не получится, либо реализовывать в отдельных процессах весь рендеринг html в готовый для отображения canvas.