Retour à la leçonMission
Mission : un tableau de statistiques qui fige le navigateur
Diagnostiquer un rendu non virtualisé de 10 000 lignes et un re-rendu inutile par ligne, puis proposer des corrections adaptées.
Contexte
Un tableau de statistiques affiche 10 000 lignes avec un simple v-for="item in items" :key="item.id", chaque ligne contenant un <GraphiqueMiniature :donnees="item.historique" /> coûteux à rendre. Chaque frappe dans un champ de recherche situé au-dessus du tableau (qui ne filtre qu'un compteur affiché à part, sans toucher items) fait ramer visiblement toute la page pendant une fraction de seconde.