Angular - Optimiser les performances d’une liste interactive à forte volumétrie

السيناريو

Une page affiche une liste paginée de 50 000 éléments avec des composants enfants complexes (badges, mini-graph, actions). L’application subit des ralentissements importants lors du tri, du filtrage et du scroll. Tâche : proposer et implémenter (conceptuellement) une stratégie d’optimisation qui combine au moins : ChangeDetectionStrategy.OnPush, trackBy, virtual scrolling (cdk-virtual-scroll-viewport), découplage des calculs lourds (Web Worker ou debouncing/RxJS), et pagination côté backend ou lazy loading des vues. Expliquez comment mesurer l’amélioration (outils, métriques), les compromis éventuels (consistance UI vs performance) et comment garantir que les composants enfants reçoivent correctement les mises à jour sans provoquer de re-renders inutiles.

المهارات المستهدفة