---
title: 🟠 Оптимизация больших списков
description: Задание 37 посвящено изучению того, как виртуализация оптимизирует рендеринг больших списков
author: thomas-laforge
contributors:
  - Dinozavvvr
challengeNumber: 37
command: performance-ngfor-biglist
sidebar:
  order: 117
---

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

В этом приложении мы будем отображать список из 100 000 человек, нажав на кнопку **loadList**. Если вы откроете панель разработчика Chrome, нажав **F12**, перейдите на вкладку <b>Source</b> и разверните элемент, чтобы увидеть список, вы заметите, что все 100 000 элементов отображаются в DOM, хотя мы можем видеть только около 20 элементов в видимой области. Этот процесс занимает много времени, поэтому приложение очень медленно отображает список.

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

<video controls src="https://github.com/tomalaforge/angular-challenges/assets/30832608/713403fa-2eda-49d5-a7c9-acdef8aacd34">
</video>

:::note
Если вы не знаете, как это сделать, сначала прочтите [введение в производительность](/challenges/performance/) и вернитесь после этого.
:::

## Утверждение

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

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

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

Если вы не уверены, с чего начать, я рекомендую прочитать [документацию Angular CDK о виртуализации](https://material.angular.io/cdk/scrolling/overview).

</details>
