ПРОГРАММНЫЕ СИСТЕМЫ И ВЫЧИСЛИТЕЛЬНЫЕ МЕТОДЫ

Предметом исследования является производительность рендеринга трёх современных фреймворков - React, Angular и Svelte - в типовых сценариях построения и обновления пользовательского интерфейса в веб приложениях. Объектом исследования являются сами фреймворки как комплексы технологических решений, включающие механизмы обнаружения изменений, виртуальные или компилируемые DOM структуры и сопутствующие оптимизации. Автор подробно рассматривает такие аспекты темы, как первичный и повторный рендеринг, операции обновления и удаления элементов, работа в линейных и глубоко вложенных структурах данных. Особое внимание уделяется практической значимости выбора фреймворка для коммерческих продуктов, где разница в производительности непосредственно влияет на конверсию, опыт пользователя и финансовую эффективность проекта. Описываются ключевые внутренние механизмы - виртуальный DOM React, детектор Angular и компилируемый код Svelte, - которые определяют их поведение в разных нагрузочных сценариях. Методология основана на автоматизированном бенчмарке: унифицированный набор тестовых сценариев выполняется клиентскими приложениями на React, Angular и Svelte, эталонном JavaScript решении и сервере оркестраторе Express JS; время операций фиксируется через performance. now в Chrome 126, критерий производительности - время до первой перерисовки. Новизна исследования заключается в комплексном лабораторном сопоставлении трёх фреймворков по четырём критически важным сценариям (первичный рендеринг, повторный рендеринг, обновление и удаление элементов) с учётом двух типов структур данных и привязкой к актуальным версиям 2025 года. Основными выводами проведённого исследования являются следующие: Svelte обеспечивает наибольшую производительность и лидирует при глубокой иерархии благодаря компиляции DOM операций; React показывает лучшие результаты при повторном обновлении длинных списков, используя оптимизированный алгоритм обнаружения изменений и ключи элементов; Angular гарантирует предсказуемость и архитектурную целостность, но увеличивает время перерисовки примерно на 60% из-за детектора изменений. Универсального лидера не существует; рациональный выбор должен опираться на аналитический профиль операций конкретного приложения, что и подтверждают результаты представленного эксперимента.

Статья представляет собой анализ современных методов обновления структуры Document Object Model (DOM) в популярных клиентских веб-фреймворках, таких как Angular, React и Vue. Основное внимание уделяется сравнению концепций Virtual DOM и Incremental DOM, которые лежат в основе архитектурных решений соответствующих фреймворков. Virtual DOM, применяемый в React и Vue, оперирует виртуальным деревом, сравнивает его версии с целью выявления различий и минимизации изменений в реальном DOM. Такой подход обеспечивает относительную простоту реализации реактивного интерфейса, однако сопровождается дополнительными затратами на вычисления и использование ресурсов. В отличие от него, Angular использует Incremental DOM, при котором отсутствует создание промежуточных структур: изменения применяются напрямую через механизм Change Detection. Этот подход позволяет добиваться высокой производительности за счёт точечных обновлений DOM-элементов без необходимости в виртуальном представлении. В исследовании применяется сравнительный анализ архитектурных подходов к обновлению DOM, основанный на изучении официальной документации, практических экспериментов с кодом и визуализации процессов рендеринга в Angular и React. Методология включает теоретическое обоснование, пошаговый разбор механизмов обновлений и оценку их влияния на производительность. Научная новизна статьи заключается в систематическом сопоставлении архитектурных подходов к обновлению DOM в ведущих фреймворках, с акцентом на внедрение сигнальной модели в Angular версии 17+. Подробно проанализировано влияние использования сигналов на отказ от библиотеки Zone. js и формирование более предсказуемой, детерминированной модели рендеринга, а также возможности управления производительностью на более низком уровне. Статья содержит не только теоретическое описание, но и практические примеры, раскрывающие поведение обновлений в реальных сценариях. Также рассматриваются нюансы шаблонной компиляции, работы функций effect() и computed(). Проведённое сравнение Virtual DOM и Incremental DOM позволяет выявить ключевые различия, оценить применимость подходов в зависимости от задач и уровня сложности проекта, а также предложить направления оптимизации фронтенд-архитектур.