Проблема с производительностью Angular 6 с большим столом
У меня проблема с производительностью Angular 6. На странице есть большая таблица со 100 строками и 100 столбцами в каждой строке. Тогда эта страница немного тормозит, когда я пытаюсь использовать библиотеки, такие как ng-select или ng-bootstrap datepicker и т. д. Даже если у этих библиотек нет обмена данными с таблицей. Это означает, что даже если ng-select просто встроен в HTML и не содержит данных, открытие и закрытие раскрывающегося списка ng-select происходит с задержкой, загрузка занимает около 0,5 секунды. То же и с другими библиотеками. Когда я уменьшаю таблицу до 10 строк, проблема запаздывания значительно улучшается. Почему так происходит?
Еще одно наблюдение: когда я использую собственные теги HTML, такие как опция выбора, он совсем не тормозит, он реагирует мгновенно. Как улучшить производительность в моей ситуации? Спасибо! Код в основном примерно такой.
компонент приложения:
<ng-select></ng-select>
<row-component *ngFor = "let basket of baskets"></row-component>
строка-компонент:
<div *ngFor = "let apple of apples">
blah blah blah
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Есть несколько вещей, которые вы можете рассмотреть:
Во-первых, нужно ли отображать сразу все 100 столбцов? Можно ли разбить столбцы на более управляемые части и, возможно, использовать интерфейс с вкладками (что-то вроде Angular Bootstrap Tabset https://ng-bootstrap.github.io/#/components/tabset/examples) и сгруппировать связанные столбцы в вкладки, чтобы уменьшить количество столбцов, которые вы должны отображать на одной странице.
Во-вторых, возникнет проблема с производительностью, когда вы перейдете на определенное количество строк, поэтому разбивка данных на страницы будет хорошим вариантом (опять же, возможно, посмотрите на загрузочную подкачку https://ng-bootstrap.github.io/#/components/pagination/examples). Вы можете установить жесткое ограничение - может быть, 40 строк на страницу, или установить лимит строк динамически, получая размер окна браузера, вычитая количество места, которое вам нужно для меню и т. д., И разделив оставшееся на высоту строки, чтобы определить, сколько ряды уместятся в доступном вам пространстве и используйте его в качестве размера страницы. Таким образом, вам всегда нужно отображать только подмножество столбцов и столько строк, сколько уместится на экране без прокрутки, и вы обнаружите, что ваша производительность значительно улучшится.
- Это также может быть просто проблемой того, сколько элементов DOM создается и отображается на странице. Вы можете попробовать использовать виртуализацию строк, которая отображает только те строки, которые отображаются на экране.
- Тот факт, что использование ng-select делает веб-сайт более медленным, чем собственные теги html, заставляет меня думать, что дополнительные прослушиватели событий из компонентов angular также снизили производительность вашей веб-страницы.
В Ag-Grid есть отличная статья о том, как они оптимизировали отображение записей в таблице. https://www.ag-grid.com/ag-grid-performance-hacks/
Вы используете какую-либо библиотеку для таблицы, например Angular Material? Одно из возможных (и очень распространенных) решений - виртуальная прокрутка: https://material.angular.io/cdk/scrolling/overview#virtual-scrolling
Я пробовал эту библиотеку. Он отлично работает, когда у вас есть один список для отображения. Но в моем случае у меня есть таблица (2D-список) с очень большим объемом данных (около 400+ МБ). И при прокрутке сначала отображается пустой экран, а затем загружаются следующие данные.
Спасибо за ответ. Ваши советы определенно помогают. Пейджинг уже существует. Может быть, я попробую использовать набор вкладок или, может быть, я уменьшу количество строк на одной странице.