vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs(ru): added translate challenge 34

Browse Source
This commit is contained in:
webbomj
2024-03-13 15:31:07 +03:00
parent 486fca8984
commit 9e1870a854
1 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
docs/src/content/docs/ru/challenges/performance/34-default-onpush.md Normal file
View File

@@ -0,0 +1,57 @@
---
title: 🟢 Default vs OnPush
description: Задача 34 заключается в изучении разницы между стратегией обнаружения изменений Default и OnPush.
author: thomas-laforge
contributors:
- webbomj
challengeNumber: 34
command: performance-default-onpush
sidebar:
order: 7
---
## Информация
В этом задании мы рассмотрим различия и последствия использования `ChangeDetectionStrategy.Default` в сравнении с `ChangeDetectionStrategy.OnPush`.
Вы можете прочитать [Angular документацию](https://angular.io/guide/change-detection-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>