---
title: 🟢 Default vs OnPush
description: Задача 34 заключается в изучении разницы между стратегией обнаружения изменений Default и OnPush.
author: thomas-laforge
contributors:
  - webbomj
challengeNumber: 34
command: performance-default-vs-onpush
sidebar:
  order: 7
---

## Информация

В этом задании мы рассмотрим различия и последствия использования `ChangeDetectionStrategy.Default` в сравнении с `ChangeDetectionStrategy.OnPush`.

Вы можете прочитать [Angular документацию](https://angular.dev/best-practices/skipping-subtrees) чтобы узнать больше о различиях между этими стратегиями.

В этом задании все компоненты начинаются со стратегии `Default`. Когда вы вводите буквы в поле ввода, вы заметите, что все компоненты выделены оранжевым цветом.

:::note[Заметка]
Я добавил цветовую подсветку к каждому компоненту и каждой строке, чтобы обеспечить лучшую визуализацию при повторном отображении компонента.
:::

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

Давайте воспользуемся <b>Angular DevTool</b> для профилирования нашего приложения и поймем, как этот инструмент может помочь нам понять, что происходит внутри нашего приложения.

:::note[Заметка]
Если вы не знаете, как им пользоваться, прочтите [страницу введения в производительность](/challenges/performance/) сначала и возвращайся.
:::

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

Если вы нажмете на одну из полос (обозначенную желтой стрелкой на рисунке ниже), вы можете увидеть, что на `PersonListComponent`, `RandomComponent` и все `MatListItem` влияет цикл обнаружения изменений, даже когда мы взаимодействуем только с полем ввода.

![profiler record](../../../../../assets/performance/34/profiler-record.png 'Profiler Record')

## Пояснение

Цель этой задачи состоит в том, чтобы улучшить кластеризацию обнаружения изменений в приложении, используя стратегию обнаружения изменений "OnPush", но не только...

## Подсказки:

<details>
  <summary>Подсказка 1</summary>

Используйте `ChangeDetectionStrategy.OnPush` но этого будет не достаточно.

</details>

<details>
  <summary>Подсказка 2</summary>

Создайте компоненты меньшего размера, чтобы лучше отделить поле ввода от списка.

</details>
