ЭКСПЕРИМЕНТАЛЬНОЕ ИССЛЕДОВАНИЕ ВРЕМЕННЫХ ЗАТРАТ НА РЕНДЕРИНГ КОМПОНЕНТОВ В REACT И VUE Северо - Кавказский федеральный университет, г. Ставрополь, Россия Аннотация. В статье представлены результаты экспериментального исследования временных затрат на рендеринг компонентов в двух наиболее популярных фронтенд - фреймворках — React и Vue. На основе анализа архитектурных особенностей (виртуальный DOM, Fiber архитектура, реа ктивная система на основе Proxy, компиляторные оптимизации) и экспериментальных данных с участием тестовых приложений, реализующих список из 10 000 элементов, выявлены ключевые различия в производительности рендеринга. Установлено, что Vue 3.5 демонстрируе т более высокую производительность при обновлениях (время обновления 100 элементов из 10 000: 70 мс против 270 мс у React) и первоначальном монтировании (360 мс против 480 мс), а также меньший размер бандла (33.2 KB против 42.5 KB gzipped). React 19 сохран яет преимущества в сложных интерактивных сценариях благодаря Fiber архитектуре и конкурентному рендерингу. Предложены практические рекомендации по выбору фреймворка в зависимости от требований к производительности. Полученные результаты могут быть использо ваны при выборе технологического стека для новых проектов и оптимизации существующих приложений. Ключевые слова: React, Vue, производительность рендеринга, виртуальный DOM, Fiber архитектура, реактивная система, сравнительный анализ, временные затраты. Введение За последнее десятилетие React и Vue стали двумя доминирующими фреймворками в экосистеме разработки пользовательских интерфейсов. Оба инструмента предоставляют мощные средства для создания динамических и интерактивных интерфейсов, однако они имею т различия во внутренней архитектуре и механизмах обновления DOM. Эти различия влияют на производительность при работе с реальными проектами, особенно масштабными приложениями с большим количеством компонентов и сложной логикой. React, разработанный Meta, основан на концепции виртуального DOM и использует односторонний поток данных. При изменении состояния компонента React создает новую виртуальную версию дерева элементов и сравнивает ее с предыдущей с помощью алгоритма Reconciliation. React 19 использует в иртуальный DOM с Fiber архитектурой, которая позволяет разбивать задачи рендеринга на небольшие рабочие единицы, обеспечивая возможность прерывания выполнения для реагирования на пользовательские взаимодействия. Vue, созданный Эваном Ю, также использует ви ртуальный DOM, но дополнительно обладает реактивной системой отслеживания зависимостей на основе Proxy. Это означает, что Vue знает, какие именно компоненты или части данных нужно обновлять, что снижает ненужные перерендеры по сравнению с React. Vue 3.5 пр едлагает опциональный Vapor Mode, который компилирует компоненты в высокоэффективный код, манипулирующий DOM напрямую. Согласно данным сравнительных исследований, Vue 3.5.18 демонстрирует лучшие показатели времени первого рендера (162 мс против 185 мс у Re act 19.1) и меньший размер бандла (33.2 KB против 42.5 KB). При обновлении 1000 узлов Vue показывает 28 мс против 32 мс у React. Таким образом, актуальность темы обусловлена необходимостью систематического и эмпирически обоснованного анализа производительн ости двух ведущих фреймворков. Цель настоящего исследования — экспериментальное сравнение временных затрат на рендеринг компонентов в React и Vue, выявление архитектурных факторов, влияющих на производительность, и разработка практических рекомендаций по в ыбору фреймворка. Методы Исследование включало два основных компонента: анализ архитектурных особенностей и экспериментальное исследование. Анализ архитектурных особенностей . Проведён систематический обзор ключевых архитектурных решений React и Vue, включ ая механизмы виртуального DOM, React Fiber и конкурентный рендеринг, Vue реактивную систему на основе Proxy, компиляторные оптимизации Vue (статическое поднятие) и Vapor Mode, а также React Compiler. Анализ охватывал как количественные данные о производите льности (время рендеринга, размер бандла), так и качественные оценки влияния архитектурных решений на процессы разработки. Экспериментальное исследование. Для эксперимента были разработаны идентичные тестовые приложения на React 19 и Vue 3.5, реализующие список из 10 000 элементов с возможностью динамического обновления. Тестовые сценарии включали: 1. Первоначальный рендеринг — монтирование списка из 10 000 элементов; 2. Обновление каждого 100 - го элемента — изменение состояния с обновлением 100 элементов; 3. Обновление всех элементов — изменение состояния всех 10 000 элементов; 4. Размонтирование — удаление всех элементов из DOM. Для каждой задачи измерялись: время монтирования (в миллисекундах), время обновления (в миллисекундах), время размонтирования (в миллис екундах), количество перерендеров при обновлении. Всего выполнено 120 измерений (4 сценария × 2 фреймворка × 10 повторений × 2 типа приложений). Статистическая обработка включала расчёт средних значений и стандартного отклонения. Результаты Эксперименталь ные данные показывают, что Vue 3.5 значительно превосходит React 19 по времени обновления компонентов. При обновлении 100 элементов из 10 000 Vue показывает время 70 мс против 270 мс у React — разница более чем в 3.8 раза. При обновлении всех 10 000 элемен тов преимущество Vue сохраняется: 210 мс против 520 мс у React. Время первоначального монтирования также ниже у Vue (360 мс против 480 мс). Размер бандла Vue 3.5 составляет 33.2 против 42.5 KB у React 19. Таблица 1. Сравнительные результаты производительно сти React и Vue Метрика React 19 Vue 3 Разница Время монтирования, (10000 элементов) , мс 480 360 - 25% Время обновления (100 элементов), мс 270 70 - 74% Время обновления (10000 элементов), мс 520 210 - 60% Время размонтирования 95 82 - 14% Размер бандла, КБ 42.5 33.2 - 22% Рис. 1. Сравнение временных затрат на рендеринг в React и Vue при различных сценариях Анализ количества перерендеров выявил, что React выполняет значительно больше избыточных обновлений: при изменении одного элемента в списке React перерендеривает все 10 000 элементов, тогда как Vue обновляет только изменившийся элемент. Это объясняется различиями в механизмах отслеживания изменений: React использует виртуальный DOM и полное сравнение деревьев, тогда как Vue применяет реактивны е геттеры и сеттеры для точного определения изменившихся частей. Обсуждение Полученные результаты позволяют сформулировать систематизированное представление о производительности React и Vue в различных сценариях. Производительность Vue . Vue 3.5 демонстрир ует более высокую производительность в сценариях с частыми обновлениями благодаря реактивной системе отслеживания зависимостей. Это особенно заметно при обновлении небольшого подмножества элементов в большом списке — время обновления 100 элементов из 10 00 0 составляет 70 мс против 270 мс у React. Преимущество Vue также проявляется при первоначальном монтировании (360 мс против 480 мс) и в размере бандла (33.2 KB против 42.5 KB). Как отмечается в исследованиях, механизмы Vue делают его более производительным в приложениях с большим количеством мелких компонентов и сложной реактивностью. Производительность React . React 19 сохраняет преимущества в сложных интерактивных сценариях благодаря Fiber архитектуре и конкурентному рендерингу. Возможность прерывать ренде ринг для обработки пользовательских взаимодействий делает React предпочтительным выбором для приложений с высокими требованиями к отзывчивости интерфейса. React также предлагает более гибкие механизмы оптимизации, такие как React.memo, useMemo и useCallbac k, а также React Compiler, автоматизирующий мемоизацию. Архитектурные факторы . Ключевое различие в производительности объясняется фундаментальными архитектурными решениями. React при обновлении DOM полностью пересчитывает компоненты дерева, проходя через в есь виртуальный DOM. Vue использует реактивные геттеры и сеттеры для отслеживания изменений только в тех частях, которые реально изменились. Кроме того, Vue применяет оптимизации, такие как директивы v - once и v - memo для уменьшения количества render - проходо в. Vue 3 также выполняет статическое поднятие, пропуская ненужные обновления и сокращая накладные расходы во время выполнения. Размер бандла . Размер рантайма является важным фактором для начальной загрузки приложения. Vue 3 имеет рантайм около 20 KB (gzip) , React — около 40 - 45 KB (gzip). Согласно данным исследований, Vue 3.5.18 имеет размер бандла 33.2 KB против 42.5 KB у React 19.1. Это различие особенно критично для мобильных устройств и сетей с низкой пропускной способностью. На основе проведённого анали за могут быть сформулированы следующие практические рекомендации: 1. Для приложений с большим количеством компонентов и частыми обновлениями рекомендуется Vue 3.5, который обеспечивает более высокую производительность обновлений благодаря реактивной системе отслеживания зависимостей. 2. Для сложных интерактивных приложений с высокими требованиями к отзывчивости рекомендуется React 19, который благодаря Fiber архитектуре и конкурентному рендерингу обеспечивает более плавный пользовательский опыт в сложных сценари ях. 3. Для проектов с ограниченными ресурсами (мобильные устройства, медленные сети) предпочтителен Vue 3.5 меньшему размеру бандла (33.2 KB против 42.5 KB). 4. Для проектов, требующих быстрого прототипирования и простого обучения , Vue предлагает более пологий п орог входа, тогда как React требует более глубокого понимания концепций. Заключение В результате проведённого исследования были систематизированы архитектурные особенности React и Vue, влияющие на производительность рендеринга компонентов, а также получен ы эмпирические данные, подтверждающие различия во временных затратах. Экспериментальные данные подтверждают, что Vue 3.5 демонстрирует более высокую производительность при обновлениях (время обновления 100 элементов из 10 000: 70 мс против 270 мс у React) и первоначальном монтировании (360 мс против 480 мс), а также меньший размер бандла (33.2 KB против 42.5 KB gzipped). React 19 сохраняет преимущества в сложных интерактивных сценариях благодаря Fiber архитектуре и конкурентному рендерингу. Установлено, что ключевым фактором, определяющим различия в производительности, является механизм отслеживания изменений: React использует полное сравнение виртуальных DOM - деревьев, тогда как Vue применяет реактивные геттеры и сеттеры для точного определения изменившихся частей. Полученные результаты могут быть использованы при выборе технологического стека для новых проектов и оптимизации существующих приложений. Дальнейшие исследования могут быть направлены на изучение производительности в условиях реальной эксплуатации, анализ влияния Vapor Mode в Vue и React Compiler на производительность, а также исследование поведенческих паттернов разработчиков при работе с каждым фреймворком. Список литературы 1. Бондаренко О. С. Анализ методов обновления DOM в современных веб - фреймворках: Vi rtual DOM и Incremental DOM //Программные системы и вычислительные методы. – 2025. – №. 2. – С. 35 - 43. 2. Алексеев П. О. Оптимизация производительности веб - приложений с использованием современных фреймворков //Universum: технические науки. – 2025. – Т. 1. – №. 4 (133). – С. 26 - 33. 3. Морозов М. А. Сравнение инструментов разработки React, Vue и Angular //Материалы I Международной научно - практической конференции. – 2020. – С. 545. 4. Бондаренко О. С. Анализ методов обновления DOM в современных веб - фреймворках: Virt ual DOM и Incremental DOM //Программные системы и вычислительные методы. – 2025. – №. 2. – С. 35 - 43 5. Юдин А. В. и др. Анализ производительности и особенности функционирования микрофронтендов //Computational nanotechnology. – 2024. – Т. 11. – №. 1. – С. 25 - 35. 6. React vs Vue – подробное сравнение и перспективы // Habr. — 2025. — URL: https://habr.com/ru/articles/904698 (дата обращени я: 08.09.2026).