Пропустить до содержимого
angular challenges logo Angular Challenges

🟢 Мемоизация

Испытание #35

Создано Thomas Laforge

Информация

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

Вы можете узнать больше о каналах в документации Angular и в этой статье о глубоком погружении в pipes.

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

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

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

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

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

profiler record

Пояснение

Цель этой задачи - понять, что является причиной такой задержки, и улучшить ее.

Подсказка:

Подсказка 1

Используйте Pipes для запоминания вычисления Фибоначчи.

Контрибьюторы

Спасибо всем контрибьюторам которые помогли сделать эту документацию лучше!

  • webbomj