HRB Svelte Themes

Hrb

Full-stack project for comparing React, Vue and Svelte performance

Download

🚀 Heavy Render Benchmark

Full-stack проект для сравнительного анализа производительности рендеринга современных фронтенд-фреймворков: React, Vue 3 и Svelte.

Все три фронтенд-приложения обращаются к единому бэкенду на FastAPI, получают идентичные "тяжёлые" наборы данных и измеряют метрики производительности при их отрисовке.

🎯 Цель проекта

Создать инструмент для честного и наглядного сравнения производительности рендеринга популярных фреймворков в стресс-сценариях, работающий по принципу "один бэкенд — три идентичных теста".

🏗️ Архитектура

Проект состоит из 4 независимых сервисов, работающих локально:

Сервис Технология Порт по умолчанию Роль
Backend FastAPI (Python) :8000 Генератор сложных JSON-данных по запросу
Frontend 1 React 18 + Vite :5173 Первый стенд для тестирования
Frontend 2 Vue 3 + Vite :5174 Второй стенд для тестирования
Frontend 3 SvelteKit + Vite :5175 Третий стенд для тестирования

Все фронтенды обращаются к бэкенду по эндпоинту POST /api/benchmark/start.

📁 Структура проекта

heavy-render-benchmark/
├── backend/                  # FastAPI приложение
│   ├── app/
│   │   └── main.py          # Основной файл с API и логикой генерации данных
│   ├── requirements.txt     # Зависимости Python
│   └── venv/                # Виртуальное окружение (в .gitignore)
├── frontends/
│   ├── react-app/           # React-приложение
│   ├── vue-app/             # Vue 3-приложение
│   └── svelte-app/          # SvelteKit-приложение
├── docs/                    # Документация
├── STATUS.md               # Текущий статус разработки и план
└── README.md               # Этот файл

⚙️ Требования к окружению

  • ОС: Ubuntu 24.04 LTS (или любая другая с поддержкой Python/Node.js)
  • Python: 3.10+
  • Node.js: 20.19+, 22.x или 24.x (рекомендуется 22.x LTS)
  • npm: 10.x+
  • Git: (опционально) для клонирования репозитория

🚀 Быстрый старт

1. Клонирование репозитория и настройка бэкенда

# Клонируйте проект
git clone https://github.com/YOUR_USERNAME/heavy-render-benchmark.git
cd heavy-render-benchmark

# Настройте и запустите бэкенд
cd backend
python3 -m venv venv           # Создайте виртуальное окружение
source venv/bin/activate       # Активируйте его
pip install -r requirements.txt # Установите зависимости
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

2. Настройка и запуск фронтенд-приложений

Откройте новые окна терминала для каждого приложения.

React:

cd frontends/react-app
npm install
npm run dev

Приложение будет доступно по адресу: http://localhost:5173

Vue 3:

cd frontends/vue-app
npm install
npm run dev

Приложение будет доступно по адресу: http://localhost:5174

SvelteKit:

cd frontends/svelte-app
npm install
npm run dev

Приложение будет доступно по адресу: http://localhost:5175

🧪 Как проводить тест

  1. Убедитесь, что все 4 сервиса запущены (1 бэкенд + 3 фронтенда).
  2. Откройте в браузере три вкладки:
  3. В каждой вкладке нажмите кнопку "Start Benchmark (1500 items)".
  4. Сравните появившиеся метрики (Время получения данных, Время рендеринга, Общее время) между фреймворками.

📊 Результаты бенчмарка (тяжёлый DOM)

Последнее обновление: 2026-01-21 Условия теста: payloadSize=2500, complexity='high', рендеринг HTML-таблицы (2500 строк).

Фреймворк ⚡ Время рендеринга 🎮 Средний FPS 📈 График производительности
React 18 478.00 мс 4.2 ![Красный] Критическая просадка (блокировка)
Vue 3 61.80 мс 16.2 ![Оранжевый] Умеренная просадка
Svelte 252.00 мс 35.0 ![Зелёный] Плавная отрисовка

🔍 Финальные выводы

  1. Vue 3 продемонстрировал оптимальный баланс, показав наилучшее время рендеринга (в 7.7 раза быстрее React) и сохранив интерфейс отзывчивым (FPS 16.2).
  2. Svelte подтвердил архитектурное преимущество в отзывчивости, обеспечив наивысший FPS (35.0) при среднем времени рендеринга.
  3. React 18 в данном сценарии ("из коробки") показал наихудшие результаты по обеим метрикам, что указывает на необходимость ручной оптимизации для подобных нагрузок.

Примечание: Тесты проводились в режиме "из коробки" (без ручных оптимизаций вроде React.memo).

🧠 Архитектурные выводы и компромиссы

Проведённый бенчмарк не просто сравнивает цифры, а иллюстрирует фундаментальные архитектурные различия современных фреймворков:

  • React (Virtual DOM, runtime-оптимизации) демонстрирует подход, где производительность — это ответственность разработчика. Его гибкость в крупных проектах "оплачивается" необходимостью ручных оптимизаций (memo, useMemo) для тяжёлых сценариев рендеринга.
  • Vue 3 (Реактивная система, компиляция шаблонов) занимает золотую середину, предлагая отличную производительность "из коробки" за счёт умного компилятора и эффективной реактивности, оставаясь при этом простым в изучении.
  • Svelte (Компилятор в императивный код) радикально меняет парадигму, перенося основную работу на этап сборки. Это даёт наименьшие накладные расходы во время выполнения, что проявляется в максимальной отзывчивости (FPS) интерфейса, даже при большой нагрузке.

Выбор фреймворка — это не поиск "самого быстрого", а выбор архитектуры, которая лучше всего соответствует целям проекта, его масштабу и приоритетам (сырая скорость vs. плавность vs. скорость разработки).

📊 Основной эндпоинт API

POST /api/benchmark/start

Тело запроса (JSON):

{
  "framework": "react | vue | svelte",
  "payloadSize": 1500,
  "complexity": "low | medium | high"
}

Ответ: Объект JSON с сгенерированными данными в поле payload.

🔧 Технические детали

  • Генерация данных: Бэкенд создаёт объекты с вложенной структурой (пользователи, инвентарь, история) для имитации реальной нагрузки.
  • Замер производительности: Фронтенды фиксируют время сетевого запроса и время рендеринга (планируется переход на более точный замер через requestAnimationFrame).
  • CORS: Бэкенд настроен на приём запросов с локальных портов фронтендов.

🔬 Углублённое исследование: Svelte + SSE прототип

Для проверки гипотезы о производительности в условиях, максимально приближенных к реальным, был создан отдельный прототип — дашборд реального времени на Svelte с использованием Server-Sent Events (SSE).

Цель прототипа: Практически оценить плавность рендеринга (FPS) и задержки при высокочастотном потоке данных.

🏗️ Архитектура прототипа

[FastAPI Backend] -> SSE Stream (100 объектов / 100 мс) -> [Svelte Frontend]
|-> Chart.js (Live Graph)
|-> Metrics Panel (FPS, Latency)
|-> Event History Table

✨ Ключевые компоненты

  • /api/stream (бэкенд): Эндпоинт SSE, генерирующий пакеты по 100 обновлённых объектов каждые 100 мс (1000 событий/сек).
  • Централизованный Store (фронтенд): Единый источник истины (stores.js) для обработки входящих данных, расчёта метрик и хранения истории.
  • LiveChart.svelte: Компонент на Chart.js, отображающий линейный график, который обновляется в реальном времени с анимацией.
  • MetricsPanel.svelte: Компонент, отображающий ключевые метрики производительности: FPS интерфейса, время обработки пакета, среднюю и последнюю задержку (latency).
  • Встроенный бенчмарк-модуль: Система замера FPS на основе requestAnimationFrame, аналогичная основной, но интегрированная непосредственно в прототип.

🚀 Как запустить прототип

  1. Запустите бэкенд: cd backend && uvicorn main:app --reload
  2. Запустите фронтенд: cd frontends/svelte-sse-test && npm run dev
  3. Откройте http://localhost:5176 (или другой порт из вывода терминала).

📊 Предварительные наблюдения

  • При нагрузке ~1000 обновлений в секунду Svelte-прототип демонстрирует стабильно высокий FPS (близкий к 60).
  • Время обработки одного пакета из 100 событий составляет менее 10-15 мс, что подтверждает эффективность архитектуры.
  • Прототип служит готовой тестовой базой для создания аналогичных реализаций на React и Vue с целью проведения окончательного сравнительного анализа.

Подробная документация по прототипу находится в frontends/svelte-sse-test/README-SSE-TEST.md.

📈 План развития

  1. ✅ MVP: Базовая работа всех сервисов и замер времени.
  2. ✅ Точные метрики: Внедрение requestAnimationFrame для замера FPS (реализовано во всех трёх фреймворках).
  3. ✅ Реальный DOM: Отрисовка данных в виде таблицы, а не JSON-строки (реализовано во всех трёх фреймворках).
  4. 🔄 Режим оптимизаций: Тесты с применением React.memo, v-memo, {#key} и других практик.
  5. ⏳ Усложнение сценариев: Сортировка, фильтрация и интерактивность во время теста.
  6. ⏳ Анализ памяти: Замер потребления памяти до и после рендеринга.
  7. ⏳ Продвинутая визуализация: Интерактивные графики и сохранение истории запусков.

👨‍💻 Разработка

  • Этот проект создаётся в рамках пошагового руководства.
  • Текущий статус разработки и известные проблемы задокументированы в STATUS.md.
  • Все важные архитектурные решения описаны в Техническом задании.

📄 Лицензия

MIT

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes