Производительность удаления и добавления элементов в DOM

Цель: изучить влияние различных способов добавления и удаления узлов DOM на производительность клиентских веб-приложений. Вам предстоит написать скрипт для автоматизированного сбора метрик, провести статистический анализ результатов и обосновать выбор оптимального подхода.

Критерии оценивания

Итоговая оценка за работу напрямую зависит от объема проведенного сравнения и методологии сбора данных.

• 30 баллов ставится за ручное сравнение 2-3 методов с использованием простого усреднения.
• 50 баллов требует автоматизированного сценария тестирования, покрытия не менее 4 методов для каждой операции (добавление/удаление) и проведения тестов на выборках разного размера (например, 1 000 и 10 000 элементов).
• 60 баллов выставляется за учет “прогрева” браузера, изоляцию тестов, полный расчет статистических метрик и грамотную интерпретацию статистической значимости в отчете.

Действия в репозитории

Как и в прошлых работах, переключитесь на ветку main, cоздайте ветку lab7 и работайте на ней. Создайте документ html с H1 заголовком «ФИО - Лабораторная работа №7. Выполните эксперимент и заполните отчет в md-файле.

Требования к экспериментам

Вам необходимо реализовать тестирование производительности с использованием интерфейса Performance API.

• Для замеров времени выполнения блоков кода используйте метод performance.now().
• Реализуйте от двух и более способов добавления элементов: через appendChild, DocumentFragment, innerHTML, insertAdjacentHTML или что придумаете или найдете вы самостоятельно.
• Реализуйте от двух и более способов очистки контейнера: через innerHTML = '', цикл с removeChild и метод replaceChildren().
• Для каждого тестируемого метода необходимо провести независимую серию из не менее чем 30 итераций , чтобы получить статистически значимую выборку.

Расчет статистических показателей

Полученные замеры (в миллисекундах) необходимо обработать математически для исключения случайных выбросов.

Среднее арифметическое время выполнения :

Стандартное отклонение выборки :

Доверительный интервал для математического ожидания с уровнем надежности 95%, где коэффициент :

Требования к отчету

Результаты работы оформляются в виде markdown-файла в том же репозитории и ветке.

Сведите все полученные данные в единую сравнительную таблицу, содержащую колонки: метод, количество элементов в работе, количество повторений, среднее время, стандартное отклонение и границы доверительного интервала.

Напишите вывод опираясь на полученные числа и упоминая их в выводе.

Дайте аргументированный ответ на вопрос о наличии статистически значимого различия между методами. Разница признается статистически значимой, если доверительные интервалы двух сравниваемых методов не пересекаются.

Советы по проведению тестирования в браузере

• Прогрев JIT-компилятора: движок V8 оптимизирует код не сразу. Перед началом основных замеров выполните несколько “холостых” прогонов тестируемой функции, результаты которых не пойдут в итоговую статистику.
• Изоляция среды: всегда запускайте тесты в режиме “Инкогнито” без активных расширений, так как блокировщики рекламы и менеджеры паролей вмешиваются в работу DOM и искажают метрики.
• Влияние сборщика мусора (Garbage Collector): старайтесь не создавать лишних объектов внутри замеряемого блока кода, чтобы внезапная пауза на очистку памяти не увеличила время выполнения отдельной итерации.
• Исключение Layout Thrashing: внутри замеряемого участка кода избегайте чтения свойств элементов (например, offsetHeight или clientWidth) сразу после изменения DOM, так как это заставит браузер выполнить синхронную перекомпоновку страницы.
• Асинхронные паузы: между сериями тестов делайте небольшие задержки с помощью setTimeout, чтобы браузер успевал отрисовать кадр и очистить память, иначе вкладка может зависнуть.

Результат работы

Код в репозитории для выполнения замеров, отчет в markdown с итоговой таблицей и выводами.