---
title: 🟢 Мемоизация
description: Задача 35 заключается в изучении того, как работает чистые pipe
author: thomas-laforge
contributors:
  - webbomj
challengeNumber: 35
command: performance-memoization
sidebar:
  order: 8
---

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

В Angular <b> чистые каналы</b> очень эффективны, потому что значение запоминается, что означает, что если входное значение не изменяется, функция "преобразования" канала не вычисляется повторно, а выводится кэшированное значение.

Вы можете узнать больше о каналах в [документации Angular](https://angular.dev/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>
