---
title: Производительность Angular-а
prev: false
next: false
contributors:
  - Dinozavvvr
description: Узнайте, как использовать расширение Angular DevTools для Chrome.
noCommentSection: true
sidebar:
  order: 1
---

import { LinkCard } from '@astrojs/starlight/components';

В этой серии испытаний по производительности вы узнаете, как оптимизировать и улучшить производительность вашего приложения Angular.

Прежде чем приступить к решению какого-либо испытания, я приглашаю вас скачать [расширение Angular DevTools для Chrome](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh), если вы еще этого не сделали.

Это расширение позволяет профилировать ваше приложение и обнаруживать проблемы производительности, что очень полезно для понимания мест, где могут возникать проблемы с производительностью.

## Как его использовать

При запуске приложения Angular вы можете проверить страницу, нажав <b>F12</b>, что откроет <b>Инструменты разработчика Chrome</b>. Затем перейдите на вкладку <b>Angular</b>. Оттуда вы можете выбрать вкладку <b>Profiler</b>, как показано ниже.

![вкладка профилировщика](../../../../../assets/performance/profiler-tab.png 'Вкладка профилировщика')

Теперь вы можете профилировать свое приложение, нажав кнопку записи. Вы можете играть с вашим приложением и видеть, когда срабатывает обнаружение изменений и какие компоненты перерисовываются.

:::tip[Узнайте больше]
Вы можете узнать больше на [странице документации](https://angular.io/guide/devtools).
:::

Теперь, когда вы знаете, как использовать <b>Angular DevTool</b>, вы можете выбрать испытание и решить его с использованием профилирования.

<LinkCard
  title="🟢 Default vs OnPush"
  description="Узнайте разницу между стратегиями обнаружения изменений по умолчанию и OnPush."
  href="/challenges/performance/34-default-vs-onpush/"
/>

<LinkCard
  title="🟢 Мемоизация"
  description="Узнайте силу чистых каналов."
  href="/challenges/performance/35-memoization/"
/>

<LinkCard
  title="🟠 Оптимизация обнаружения изменений"
  description="Узнайте, как убрать загрязнение зон."
  href="/challenges/performance/12-optimize-change-detection/"
/>
