🟠 Оптимизация больших списков

Информация

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

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

Заметка

Если вы не знаете, как это сделать, сначала прочтите введение в производительность и вернитесь после этого.

Утверждение

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

Подсказки:

Подсказка 1

Если вы не уверены, с чего начать, я рекомендую прочитать документацию Angular CDK о виртуализации.