Eric Coissac
abe8c1a4b2
- Virtualize queue list in QueueViewer.vue using RecycleScroller - Add 300ms debounce on queue_updated refetches to prevent cascading JSON fetch - Implement client-side pagination (100 items/page) + cache in PlayListManager.vue with sortedTracks memoization - Limit browse infinite scroll memory usage via sliding window (200 items) + Minor CSS fixes for flexbox overflow/min-width to support virtualization
1.2 KiB
1.2 KiB
Rapport : Optimisation performances frontend playlists ~1000 titres
Résumé
Implémentation de quatre optimisations pour traiter les lenteurs UI observées avec de grandes playlists : virtualisation de la file d'attente avec RecycleScroller, debounce des refetches queue_updated, pagination + cache dans PlayListManager, et fenêtre glissante dans MediaBrowser. Ces changements éliminent les freezes au scroll, bloquages UI et refetches JSON répétés.
Fichiers modifiés
-
pmoapp/webapp/src/components/pmocontrol/QueueViewer.vue- Remplacement du v-for natif par RecycleScroller de vue-virtual-scroller
- Migration de querySelector+scrollIntoView vers scrollToItem() exposé par RecycleScroller
-
pmoapp/webapp/src/composables/useRenderers.ts- Ajout d'un debounce de 300ms sur les refetches queue_updated pour éviter les refetches en cascade
-
pmoapp/webapp/src/components/PlayListManager.vue- Ajout pagination client (100 items/page) avec navigation Précédent/Suivant -Ajout cache mémorisé pour sortedTracks par playlist ID
- Simplification lazyTracksCount derivé de sortedTracks
-
pmoapp/webapp/src/composables/useMediaServers.ts- Ajout fenêtre glissante limitant le cache browse aux 200 derniers items