Угловая производительность сетки в несколько строк в браузере Chrome - PullRequest
0 голосов
/ 22 мая 2018

Мне нужно сделать так, чтобы компонент содержал таблицу с множеством строк.Все отлично работает на небольших данных.Но если количество предметов увеличивается до 2000 и более, оно становится запаздывающим.Прокрутка и, особенно, анимация становятся слишком медленными.

Я также пытался установить trackBy для ngFor , но это не влияет на производительность в этом случае.

Пожалуйста, см. stackblitz пример;

Как вы видите, все прекрасно работает, когда вы используете 100 предметов, на 2000 он начинает зависать и10000 это не годится для использования.

Мне интересно, как правильно показывать сетки с большим количеством данных в Angular и как я могу повысить производительность таких страниц?

Есть ли пример реализации отложенной загрузки?Могу ли я сделать это так, чтобы в DOM HTML присутствовали только видимые строки, а из DOM были удалены все строки, кроме прокрутки?

Любые идеи приветствуются.

ОБНОВЛЕНИЕ

У меня установлена ​​последняя версия браузера Chrome: Версия 66.0.3359.181 (Официальная сборка) (64-разрядная версия).

Я пробовал его на разных ПК, в браузерах: он зависает только в Chrome (в Chrome на MacBook он работает намного лучше, чем на ПК, но хуже, чем в Safari, например).

1 Ответ

0 голосов
/ 29 мая 2018

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

  • angular2-virtual-scroll , самое популярное на данный момент, имеет несколько интересных форков
  • ngx-ui-свиток , поддерживается мной, не стесняйтесь задавать любые вопросы
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...