Обзор доступных методов для составления больших списков элементов с угловатой
Эта статья была первоначально опубликована на Остатки по ДЖАНКАРЛО ПУМПРИСКО
Фреймворки в 2020 году стали лучше, эффективнее и быстрее. С учетом сказанного, сохранение больших списков элементов в Интернете, не заставляя браузер заморозить, все еще может быть трудно даже для самых быстрых доступных платформ.
Это один из многих случаев, когда «структура быстра, ваш код медленный».
Существует много различных методов, которые делают рендеринг большого количества элементов не блокирующим способом для пользователей. В этой статье я хочу изучить текущие доступные методы, и какие из них лучше всего использовать на основе конкретных случаев использования.
Хотя эта статья посвящена оптимизации рендеринга с помощью угловой, эти методы фактически применимы к другим рамкам или просто ванильным JavaScript.
В этой статье подробно рассказывается об аспекте, о котором я говорил в одной из моих предыдущих статей: предоставляя слишком много данных. Главные причины, по которым ваше угловое приложение медленно
Мы рассмотрим следующие методы:
Виртуальная прокрутка (с помощью углового CDK)
Ручной рендеринг
Прогрессивный рендеринг
Какую бы реализацию вы ни выбрали для рендеринга длинных списков, убедитесь, что вы делитесь своими повторными угловыми компонентами с Bit.dev Компонентный концентратор. Это сэкономит вам время, потраченное на повторение, и упростит вам и вашей команде использовать тестируемый и оптимизированный результат кода в ваших угловых проектах.
Вы можете прочитать больше об этом в моем предыдущем посте: Совместное использование компонентов с угловым и битом *Введение в бит: строительство и обмен угловыми компонентами*blog.bitsrc.io
1. Виртуальная прокрутка
Виртуальная прокрутка, вероятно, является наиболее эффективным способом обработки больших списков с уловом. Спасибо Угловой CDK и другие плагины очень легко реализовать в любом компоненте.
Концепция проста, но реализация не всегда самая простая:
- Учитывая контейнер и список элементов, предмет отображается только в том случае, если он находится в пределах видимых границ контейнера
Чтобы использовать модуль прокрутки CDK, нам сначала нужно установить модуль:
npm i @angular/cdk
Затем мы импортируем модуль:
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
...
imports: [ ScrollingModule, ...]
})
export class AppModule {}
Теперь мы можем использовать компоненты для использования виртуальной прокрутки в наших компонентах:
Как вы можете видеть, это чрезвычайно просты в использовании, и результаты впечатляют. Компонент без проблем отдает тысячи и тысячи предметов.
Если виртуальная прокрутка так хороша и легко достичь, зачем изучать другие методы? Это то, что я тоже задавался вопросом – и на самом деле есть несколько причин, почему.
Как будет работать очень зависит от реализации : Трудно иметь возможность управлять всеми возможными сценариями с одной реализацией. Например, мой компонент зависел от поля автозаполнения (построенного той же командой), и, к сожалению, он не сработал, как и ожидалось. Чем сложнее ваши предметы, тем сложнее будет Анкет
Другой модуль, другой Большая часть кода, добавленная в ваше приложение Анкет
Доступность и удобство использования: скрытые элементы не отображаются и поэтому не будут доступны для поиска.
Виртуальная прокрутка идеальна (когда он работает) в ряде ситуаций:
неопределенный и, возможно, огромный список элементов (примерно больше 5K, но он сильно зависит от сложности каждого элемента)
бесконечная прокрутка предметов
2. Ручной рендеринг
Одним из вариантов, который я пытался ускорить большой список предметов, является ручное рендеринг с использованием API Angular, а не полагаться на *ngfor.
У нас есть простой шаблон петли NGFO:
Я использую эталон, вдохновленный JS-FrameWorks-Benchmark Рассчитать рендеринг из 10000 простых предметов.
Первый тестный запуск был сделан с простым, обычным *ngfor. Вот результаты: сценарии заняли 1099 мс, а рендеринг занял 1553 мс, 3 мс.
Используя API Angular, мы можем вручную отобразить предметы.
Код контроллера изменяется следующим образом:
- Мы объявляем наш шаблон и наш контейнер
@ViewChild('itemsContainer', { read: ViewContainerRef }) container: ViewContainerRef;
@ViewChild('item', { read: TemplateRef }) template: TemplateRef<*any*>;
- Когда мы создаем данные, мы также отображаем их, используя ViewContainerRef CreateEmbeddedView метод
private buildData(length: number) {
const start = this.data.length;
const end = start + length;
for (let n = start; n <= end; n++) {
this.container.createEmbeddedView(this.template, {
item: {
id: n,
label: Math.random()
},
isEven: n % 2 === 0
});
}
}
Результаты показывают скромное улучшение:
- 734ms Time Proting Scripting, 1443 рендеринг и 2 мс живописи
В практическом плане, однако, это все еще очень медленно! Браузер замерзает в течение нескольких секунд, когда кнопка нажимается, предоставляя пользователю плохой пользовательский опыт.
Вот как это выглядит (я перемещаю мышь, чтобы имитировать индикатор загрузки 😅):
Давайте попробуем Прогрессивный рендеринг в сочетании с Ручной рендеринг Анкет
3. Прогрессивный рендеринг
Концепция прогрессивного рендеринга состоит в том, чтобы просто отображать подмножество элементов и отложить рендеринг других элементов в цикле событий. Это позволяет браузеру плавно и постепенно производить все предметы.
Код ниже просто:
Мы создаем интервал, работающий каждые 10 мс и рендеринг 500 предметов одновременно
Когда все элементы были отображены, на основе индекса, мы останавливаем интервал и разбиваем петлю
private buildData(length: number) {
const ITEMS_RENDERED_AT_ONCE = 500;
const INTERVAL_IN_MS = 10;
let currentIndex = 0;
const interval = setInterval(() => {
const nextIndex = currentIndex + ITEMS_RENDERED_AT_ONCE;
for (let n = currentIndex; n <= nextIndex ; n++) {
if (n >= length) {
clearInterval(interval);
break;
}
const context = {
item: {
id: n,
label: Math.random()
},
isEven: n % 2 === 0
};
this.container.createEmbeddedView(this.template, context);
}
currentIndex += ITEMS_RENDERED_AT_ONCE;
}, INTERVAL_IN_MS);
Обратите внимание, что количество визуализированных элементов и время интервала полностью зависит от ваших обстоятельств Анкет Например, если ваши предметы очень сложные, рендеринг 500 предметов одновременно, безусловно, будет очень медленным.
Как вы можете видеть ниже, статистика выглядит конечно хуже:
Что не хуже, так это пользовательский опыт. Несмотря на то, что время, необходимое для визуализации списка, длиннее, чем раньше, пользователь не может сказать. Мы рендерируем 500 предметов одновременно, и рендеринг происходит за пределами границ контейнеров.
Некоторые проблемы могут возникнуть в связи с тем, что контейнер изменяет свой размер или положение прокрутки, пока это происходит, поэтому эти проблемы должны быть смягчены в нескольких случаях.
Посмотрим, как это выглядит:
Последние слова
Приведенные выше методы, безусловно, полезны в некоторых ситуациях, и я использовал их всякий раз, когда виртуальная прокрутка была не лучшим вариантом.
С учетом сказанного, по большей части виртуальная прокрутка с использованием отличной библиотеки, такой как CDK Angular, безусловно, является лучшим способом заняться большими списками.
Если вам нужны какие -либо разъяснения, или если вы думаете, что что -то неясно или неправильно, сделайте, пожалуйста, оставьте комментарий!
Надеюсь, вам понравилась эта статья! Если вы это сделали, следуйте за мной Середина , Твиттер или же Девчонка Для получения дополнительных статей о разработке программного обеспечения, фронт -энд, RXJS, TypeScript и многое другое!
Оригинал: “https://dev.to/angular/3-ways-to-render-large-lists-in-angular-10nl”