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

Merge pull request #684 from webbomj/translate-challenge-35

Browse Source 
docs(ru): added translate challenge 35
This commit is contained in:
Laforge Thomas
2024-03-13 14:33:29 +01:00
committed by GitHub
parent b43d1ee3c2 cfdfdb5703
commit 15bb51dfd0
1 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/src/content/docs/ru/challenges/performance/35-memoize.md Normal file
View File

@@ -0,0 +1,50 @@
---
title: 🟢 Мемоизация
description: Задача 35 заключается в изучении того, как работает чистые pipe
author: thomas-laforge
contributors:
- webbomj
challengeNumber: 35
command: performance-memoized
sidebar:
order: 8
---
## Информация
В Angular <b> чистые каналы</b> очень эффективны, потому что значение запоминается, что означает, что если входное значение не изменяется, функция "преобразования" канала не вычисляется повторно, а выводится кэшированное значение.
Вы можете узнать больше о каналах в [документации Angular](https://angular.io/guide/pipes) и в этой [статье о глубоком погружении в pipes](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
В этом задании мы начнем с кнопки для загрузки списка людей. Каждый человек связан с числом, и мы будем использовать вычисление Фибоначчи для создания сложных вычислений, которые замедлят работу приложения.
Как только список будет загружен, попробуйте ввести несколько букв в поле ввода. Вы заметите, что приложение работает очень медленно, даже несмотря на то, что вы выполняете только самый простой набор текста.
:::note[Примечание]
В этом задании мы не будем заострять внимание на начальной загрузке списка.
:::
Давайте воспользуемся <b>Angular DevTool</b> для профилирования нашего приложения и поймем, как этот инструмент может помочь нам понять, что происходит внутри нашего приложения.
:::note[Примечание]
Если вы не знаете, как им пользоваться, сначала прочтите [страницу введения в производительность](/задачи/производительность/) и вернитесь после.
:::
Теперь запустите профилирование вашего приложения и введите несколько букв в поле ввода. Вы увидите несколько красных полос, отображающихся внутри панели профиля.
Если вы нажмете на одну из полос (обозначенную желтой стрелкой на рисунке ниже), вы увидите, что цикл обнаружения изменений в `PersonListComponent` занимает более 3 секунд.
![profiler record](../../../../../assets/performance/35/memoize-profiler.png 'Profiler Record')
## Пояснение
Цель этой задачи - понять, что является причиной такой задержки, и улучшить ее.
## Подсказка:
<details>
<summary>Подсказка 1</summary>
Используйте `Pipes` для запоминания вычисления Фибоначчи.
</details>