Производительность многострочной сетки Angular в браузере Chrome
Мне нужно сделать компонентную ведьму таблицей с большим количеством строк. Все отлично работает на небольших данных. Но если количество предметов вырастет до 2000 и более, оно отстает. Прокрутка и особенно анимация становятся слишком медленными.
Я также пытался установить функцию trackBy для ngFor, но в этом случае это не влияет на производительность.
См. Пример stackblitz;
Как видите, все работает отлично, когда вы используете 100 предметов, на 2000 он замерзает, а на 10 000 его нельзя использовать.
Мне интересно, как правильно отображать сетки с большим количеством данных в Angular и как я могу повысить производительность таких страниц?
Есть ли какой-нибудь пример реализации отложенной загрузки, могу ли я сделать это таким образом, чтобы только видимые строки присутствовали как html в DOM, а все строки, кроме прокрутки, удалялись из DOM?
Любые идеи будут оценены по достоинству.
ОБНОВИТЬ
У меня последняя версия браузера Chrome: версия 66.0.3359.181 (официальная сборка) (64-разрядная версия).
Я пробовал это на разных ПК, браузерах: зависает только в хроме (например, в хроме на Mac-книге он работает намного лучше, чем на ПК, но хуже, чем в сафари).
@JonasPraem, для меня это странно ... В каком браузере вы это тестировали? Я пользуюсь Chrome (последняя версия) и он зависает
Chrome (последняя версия). Когда я рисую в 10000 в ´this.populateArr (10000); ´ он зависает максимум на 1 секунду, пока не будет сгенерирован список
У меня последняя версия браузера Chrome, и она тормозит. Я пробовал это на разных ПК, браузерах: зависает только в хроме (в хроме на книге Mac он работает намного лучше, чем на ПК, но хуже, чем в сафари, например)
Ответы 2
Правильный способ - применить подход виртуальной прокрутки, когда приложение динамически уничтожает элементы, когда они становятся невидимыми. Я знаю два решения для Angular:
- угловой2-виртуальный прокрутки, самый популярный на данный момент, имеет несколько интересных вилок
- ngx-ui-scroll, поддерживается мной, не стесняйтесь задавать любые вопросы
Спасибо за Ваш ответ. Думаю, это может решить эту проблему. Но это не дает ответа на вопрос, почему у меня такая проблема только в браузере Chrome. Также 2k элементов - это не очень большой объем данных на сегодняшний день.
Я принял этот ответ, потому что на тот момент это был единственный способ «исправить» эту проблему. Но теперь кажется, что проблема решена одним из обновлений Google Chrome.
Будет ли это работать для таблицы материалов Angular?
@Gobind Должен. Но посмотрите на material.angular.io/cdk/scrolling/overview#virtual-scrolling - возможно, сейчас это более предпочтительное решение для Material.
Я знаю, что это слишком поздно для вас, но для будущих ссылок и людей, ищущих улучшения скорости в больших таблицах (у меня около 100 x 40 ячеек -> значки), вот что я сделал:
- содержимое ячейки перемещено в отдельный компонент (который отображает разные значки svg в цвете в зависимости от данных)
- в обе директивы ngFor добавлен алгоритм trackBy:
* ngFor = "пусть строка строк; trackBy: trackByRowId" .... * ngFor = "пусть ячейка из row.cells; trackBy: trackByCellId"
и эти функции похожи на:
trackByRowId(index, item) {
return item.rowId;
}
trackByCellId(index, item) {
return item.cellColId;
}
Мое время рендеринга ушло с cca. От 10-20 секунд до 1 секунды (редактирование, перемещение и прыжки до нескольких дней после или до ...).
Я только что загрузил 10000 элементов, и у меня почти не было времени загрузки .. Никаких зависаний тоже