Angular, a wuchta komponentów

0

Napisałem sobie aplikację angularową i działa to nawet całkiem fajnie. Niestety przy większych danych mam problemy wydajnościowe.

W aplikacji powstaje ok. 3000 instancji pewnego komponentu. Każdy ma pod siebie podczepione eventy typu onmouseenter, onmouseleave itp. Najechanie myszką na dowolny z nich powoduje ogromny lag. Odpaliłem profiler i wyszło, że Angular sprawdza stan całego świata przy każdym evencie (dużo funkcji ze słowem "stable" w zrzucie).

Da się jakoś zrobić, żeby jednak tego nie robił? Jak się najedzie myszką na pojedyńczy komponent to może się zmienić tylko jego stan i nic poza tym.

Robiłem PoC w Vanilla.js tego rozwiązania kiedyś i o ile wyrenderowanie trwało wieki to potem śmigało normalnie, więc możliwości przeglądarki na pewno nie są ograniczeniem.

1
  1. Zmień change detection strategy na OnPush dla każdego komponentu, który jest dzieckiem komponentu którego masz 3000 (tak samo jego samego).
  2. Spróbuj skorzystać z VirtualScrolla, bardzo dobrze się sprawdza w przypadku gdy masz dużo elementów.
0
  1. mozesz np zrobic event delegation ze by byl tylko 1 onmouseenter i 1 onmouseleave i potem robic w niej co chcesz
  2. https://github.com/TinkoffCreditSystems/ng-event-plugins czyli onmouseenter/onmouseleave w runOutsideAngular
  3. progressive rendering
  4. manual rendering
  5. IntersectionObserver + detach change detection dla elementow ktore nie sa w viewport

Oczywiscie jako pierwsza zmiana to OnPush chage detection dla wszystkich komponentow!

1 użytkowników online, w tym zalogowanych: 0, gości: 1