Целевая аудитория:
разработчики программного обеспечения/технические менеджеры, которые хотят сравнить показатели производительности Angular и React, чтобы лучше понять, какой из них больше подходит для предстоящего проекта.
Введение
Angular — это фреймворк JavaScript, созданный Google, а React — это библиотека Javascript, созданная Facebook. Angular в основном используется для быстрого создания сложных CRUD-приложений, в то время как React позволяет создавать приложения, которые должны отображать много данных и требуют частого и быстрого обновления данных с его концепцией виртуального DOM.
В этом посте мы сравним разницу в производительности между React и Angular с точки зрения:
1) Размер пакета приложения (только файлы JS)
2) Размер кучи
3) Узлы DOM
4) Загружено содержимое DOM (DCL)
5) Первая отрисовка содержимого (FCP)
6) Самая большая отрисовка содержимого (LCP)
7 ) Время до интерактивности (TTI)
8) Время написания сценария
9) Время рендеринга
Мы будем сравнивать данные из Performance, Memory, Lighthouse, Performance Insights (это все еще предварительная функция) и вкладки Network в Chrome Devtools для простого приложения (менеджер контактов), созданного как в React (v18.2.0) и Angular (v14.2.6).
Приложение менеджера контактов
Мы собираемся создать приложение диспетчера контактов как в React, так и в Angular. Приложение Angular было создано с помощью Angular CLI, а приложение React — с помощью Create React App (CRA). Приложение будет иметь некоторые контакты по умолчанию и будет иметь возможность увеличить количество контактов, чтобы вы могли сравнить их с узлами с разными номерами. Существует возможность указать параметр запроса в URL-адресе, no_of_contacts, чтобы мы могли динамически указывать количество создаваемых контактов. В этой статье мы рассмотрим результаты производительности для 1000 контактов.
Если вы хотите проверить производительность приложения для другого набора контактных номеров, доступ к приложениям можно получить по указанному URL-адресу или клонировать из ссылки на репозиторий Github, представленной внизу статьи.
ПРИМЕЧАНИЕ. Я попытался перечислить наиболее точные показания, но есть такие факторы, как задержка, кэширование и т. д., которые могли на них повлиять.
Таблица показаний (для 1000 контактов)
Детали установки
Хостинг: страницы Github
Стек Angular: Angular v14.2.6 с пакетами по умолчанию.
Стек React: React (v18.2), react-router-dom, Typescript.
Давайте погрузимся и посмотрим, как были взяты вышеприведенные данные и как они способствуют повышению производительности нашего приложения.
1) Размер пакета приложений
Размер приложения определяет время загрузки файлов браузером и играет важную роль, особенно когда размер приложения очень велик или наша целевая аудитория может использовать медленное интернет-соединение. На рисунках ниже показана вкладка инструментов разработчика Chrome, а размер приложения, показанный в приведенной выше таблице, был рассчитан путем добавления размера файла JS. Размер файла также можно проверить из отчета маяка.
2) Размер кучи
На вкладке «Память» будет показано распределение памяти по объектам JavaScript страницы и связанным узлам DOM. Показания как для Angular, так и для React выглядят нормально, как и для нашего приложения.
3) DOM-узлы
Это очень важно, поскольку внутренняя компиляция шаблонов парсером шаблонов может привести к вставке нескольких дополнительных узлов DOM. Чем меньше узловых элементов, тем светлее дерево DOM, тем оно лучше. Но в нашем случае количество узлов DOM одинаково для Angular и React.
4) Содержимое DCL-DOM загружено
Когда HTML-документ полностью проанализирован и все отложенные сценарии загружены и запущены, запускается событие DOMContentLoaded. Он не ждет завершения загрузки других элементов, таких как асинхронные скрипты, подкадры и изображения. На приведенном ниже снимке экрана и для сравнения были взяты лучшие из 3 показаний. Мы также можем считывать эти важные веб-показатели на вкладках «Производительность» и «Маяк». Приложение выглядит так или с меньшим стилем после события DOM Content Loaded.
5) FCP — первая краска с контентом
First Contentful Paint (FCP) — это когда браузер отображает первый бит контента из DOM, предоставляя пользователю первую обратную связь о том, что страница действительно загружается. Приложение должно выглядеть так после FCP.
6) LCP — самая большая содержательная краска
LCP измеряет время с момента, когда пользователь инициирует загрузку страницы, до момента отображения самого большого изображения или текстового блока в области просмотра.
7) TTI- время для интерактивности
Метрика TTI измеряет время с момента начала загрузки страницы до загрузки ее основных подресурсов, и она способна надежно и быстро реагировать на пользовательский ввод. После этого наше приложение должно быть полностью загружено.
8) Время написания сценария
Сколько общего времени было потрачено фреймворком на этапе написания сценариев. В этом есть существенная разница для Angular и React,
9) Время рендеринга
Сколько общего времени было потрачено на фазу рендеринга фреймворками.
10) Событие загрузки
Событие загрузки запускается, когда вся страница загружена, включая все зависимые ресурсы, такие как таблицы стилей и изображения. Это отличается от события DOM Content Loaded, которое запускается сразу после загрузки DOM страницы, не дожидаясь окончания загрузки ресурсов.
