Способ повысить производительность для angular2 бесконечной прокрутки - PullRequest
Новая
       11

Способ повысить производительность для angular2 бесконечной прокрутки

0 голосов
/ 30 мая 2019

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

Список будет непрерывно расти по мере прокрутки вниз, а список массивов news [] будет увеличиваться и увеличиваться. 

<li *ngFor="let item of news">{{item.title}}</li>

При проверке в домике будет много предметов, как в примере ниже: 

<li _ngcontent-c0>item1</li> 
<li _ngcontent-c0>item1</li> 
<li _ngcontent-c0>item1</li>
<li _ngcontent-c0>item1</li>
.
.
.
<li _ngcontent-c0>itemn</li>

Угловая виртуальная прокрутка предназначена для решения вышеуказанной проблемы. Окно просмотра виртуальной прокрутки Cdk эффективно отображает большие списки элементов, отображая только те элементы, которые умещаются на экране. Это повышает производительность браузера при загрузке слишком большого количества элементов для визуализации. Но текущая виртуальная прокрутка поддерживает только фиксированный размер. Различного размера пока нет в официальном релизе.

Теперь мне нужно обработать элемент разного размера, и поэтому я не могу использовать виртуальную прокрутку.

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

Сложность для меня заключается в том, как узнать текущий верхний индекс элемента при прокрутке вверх или нижний индекс элемента при прокрутке вниз. Все предметы имеют различный размер. Таким образом, кажется, что мне нужно знать высоту каждого элемента элемента в DOM и рассчитывает, чтобы узнать текущую верхнюю / нижнюю позицию прокрутки показывает, какой индекс элемента. при изменении массива news [] после удаления старых элементов и добавления новых элементов пользовательский интерфейс не влияет и отображает правильный элемент в видимом представлении.

Возможно ли это достичь и легко ли достичь? У любого эксперта есть пример или комментарий к этому?

Большое спасибо.

...