Задача. На странице имеется поле ввода (поиска) и текст с разметкой. По мере ввода слов в поисковое поле необходимо подсвечивать найденные слова в тексте. Вывести количество совпадений. Реализовать на чистом JavaScript без использования innerHTML.
Обоснование. Решение даёт полезный инструмент выделения слов в текстах.
Подсветка введённых слов
(все слова состоят из русских или латинских букв)
Совпадений:
Из-за разметок заполнение работает медленнее раз в 5. И подсветки тоже небыстры. Поэтому делаем 2 тыс. русских записей и 200 латинских, чтобы получить сопоставимое с первым тестом время выполнения.
Поскольку используется каркас первого теста и совершенно очевидно, как удалять jQuery/Zepto из кода, работа с селекторами оставлена неизменной - через библиотеки. Ядро же решения задачи сделано, как требуется, на чистом JS.
Из-за большого массива случайных слов наблюдение результатов будет не так наглядно, как хотелось бы. Поэтому в первую задачу перенесена техника подсветки, разработанная в этой задаче. При удалении неподсвеченных строк выделения отображаются компактно и наглядно.
Из-за проблем работы границ слов (\b) с кириллицей оригинальный алгоритм переделан под работающий на основе другого регулярного выражения.
На процессоре e7200 время выставления подсветок в браузерах: Chrome 25 - 2000 за секунду; Firefox 20 - 100 за секунду; Opera 12 - 300; IE8 - 400 подсветок за секунду.
Это - данные о скорости перерисовок нод. Вернуться к 1-му тесту.
Общие замечания
Какие особенности сделаны в 2 решениях.
В решениях использован общий каркас HTML и CSS, общая генерация тестового массива, так как часть решений похожа друг на друга.
Постановка задач и особенности решений описаны на страницах решений.
Имеется общая часть JS. Но, так как задачи не связаны и имеют произвольные различия, выделения общей части не делалось.
CSS Reset не сделано, т.к. это не принципиальная часть задачи.
%75 кодов работает на оформление - оно не нужно для решения, но делает страницу удобочитаемой и предоставляет необходимую информацию и ссылки.
Контейнер решения оформлен как независимый блок, все стили которого зависят от контейнера блока.
Нет перфекционистского следования точности оформления списков.
Объём списка выбран таким, чтобы показать задержки алгоритма.
Включение пересчёта фильтрации списка индицируется цветом подложки поля ввода.
Чтобы пересчёт не происходил с каждым набранным символом, установлены задержки и отмены пересчётов (0.6 с - время задержки).
jQuery/Zepto, а не просто jQuery, выбрано как вариант, теоретически улучшающий скорость работы в не-IE-браузерах. Не составляет необходимости для решения данных задач.