Исследование производительности веб-приложений

Сравнительный анализ фреймворков React, Angular, Vue и Svelte

Метрики производительности

FCP First Contentful Paint
LCP Largest Contentful Paint
TTI Time To Interactive
TBT Total Blocking Time
CLS Cumulative Layout Shift
App Size Вес приложения
Performance Score Интегральная оценка

Ссылки на приложения

Landing App
Weather App
Todo App
Shop App

Weather App

Framework FCP LCP TTI TBT CLS Size Score
● React 1.4s 2.9s 3.2s 180ms 0.03 240kb 82
● Angular 1.7s 3.4s 3.9s 230ms 0.04 310kb 75
● Vue 1.3s 2.6s 2.9s 150ms 0.02 210kb 88
● Svelte 1.1s 2.2s 2.5s 120ms 0.01 160kb 93

Todo App

Framework FCP LCP TTI TBT CLS Size Score
● React 1.2s 2.0s 2.4s 120ms 0.01 190kb 90
● Angular 1.4s 2.5s 2.9s 160ms 0.02 260kb 84
● Vue 1.1s 1.9s 2.2s 100ms 0.01 170kb 92
● Svelte 0.9s 1.6s 1.8s 80ms 0.01 130kb 97

Shop App

Framework FCP LCP TTI TBT CLS Size Score
● React 1.9s 3.7s 4.2s 280ms 0.04 380kb 76
● Angular 2.2s 4.2s 4.8s 320ms 0.05 450kb 70
● Vue 1.7s 3.1s 3.6s 240ms 0.03 340kb 82
● Svelte 1.5s 2.7s 3.0s 190ms 0.02 250kb 89

Landing App

Framework FCP LCP TTI TBT CLS Size Score
● React 1.0s 1.8s 2.1s 90ms 0.01 150kb 92
● Angular 1.3s 2.2s 2.6s 120ms 0.02 220kb 88
● Vue 0.9s 1.6s 1.9s 80ms 0.01 140kb 94
● Svelte 0.7s 1.3s 1.5s 60ms 0.01 100kb 98

Выводы

Svelte

Показывает наилучшую производительность и минимальный вес приложения.

Vue

Демонстрирует лучший баланс между производительностью и удобством разработки.

React

Хорошо подходит для крупных проектов.

Angular

Удобен для enterprise-разработки, несмотря на больший вес.

Рекомендации

Тип приложения Рекомендуемый фреймворк
Лендинги ● Svelte
Простой SPA ● Svelte / ● Vue
Средние SPA ● Vue
Крупные SPA ● React
Enterprise-приложения ● Angular