Identifier et corriger les goulots d’étranglement
Analysez les performances et résolvez les goulots d’étranglement.
Identifier et corriger les goulots d’étranglement est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.
Mesurer avant d’optimiser
Deviner les causes de la lenteur d’une application fait perdre du temps. L’approche professionnelle consiste d’abord à mesurer, à trouver le véritable goulot d’étranglement, à le corriger, puis à mesurer de nouveau. Vue DevTools et le profileur du navigateur sont vos principaux outils.
Vue DevTools
L’extension Vue DevTools pour navigateur vous permet d’inspecter l’arbre des composants, l’état réactif et les événements. Son onglet Performances mesure le temps nécessaire au rendu des composants afin que vous puissiez repérer ceux qui sont lents.
Utiliser l’onglet Performances
Commencez un enregistrement, interagissez avec votre application, puis arrêtez-le. DevTools affiche une chronologie des rendus des composants. Les composants dont les barres de rendu sont longues ou fréquentes sont vos principaux suspects.
Le profileur du navigateur
Le panneau Performance de DevTools du navigateur enregistre la page entière : exécution des scripts, rendu et peinture. Les longs blocs jaunes d’exécution des scripts indiquent souvent un travail JavaScript lourd pendant un rendu.
Repérer les nouveaux rendus excessifs
Un goulot d’étranglement courant est un composant qui effectue un nouveau rendu bien plus souvent que prévu. Si une petite modification déclenche un nouveau rendu d’un grand sous-arbre, recherchez un état réactif partagé ou des limites de composants manquantes.
Rendu de grandes listes
Effectuer le rendu de milliers de nœuds du DOM en une seule fois est lent et consomme beaucoup de mémoire. Si une liste comporte des centaines ou des milliers de lignes, le DOM lui-même devient le goulot d’étranglement, et non votre logique de données.
<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>Principe du défilement virtuel
Le défilement virtuel n’effectue le rendu que des lignes actuellement visibles dans la zone d’affichage, avec une petite mémoire tampon, et recycle les nœuds du DOM au fur et à mesure du défilement. Une liste de 10 000 éléments ne conserve que quelques dizaines de nœuds dans le DOM.
Utiliser une bibliothèque de listes virtuelles
Des bibliothèques comme vue-virtual-scroller s’en chargent pour vous. Vous leur fournissez toutes les données ainsi que la hauteur d’une ligne, et elles gèrent le fenêtrage.
import { RecycleScroller } from "vue-virtual-scroller"
// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
// <div>{{ item.name }}</div>
// </RecycleScroller>Bugs de nouveau rendu liés aux clés
Utiliser l’index du tableau comme :key dans une liste dynamique peut amener Vue à réutiliser incorrectement les nœuds du DOM lorsque des éléments sont ajoutés, supprimés ou réordonnés, ce qui entraîne un contenu incorrect et des nouveaux rendus supplémentaires.
<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>Corriger les bugs de clés
Utilisez un identifiant stable et unique comme clé afin que Vue puisse associer correctement les éléments aux données lors des mises à jour.
<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>Une méthode pratique
Mettez tout cela en pratique : enregistrez avec DevTools, trouvez le composant le plus lent, recherchez les nouveaux rendus excessifs ou les listes volumineuses, appliquez la bonne correction (mise en cache des propriétés calculées, v-memo, défilement virtuel, clés stables), puis mesurez de nouveau pour confirmer l’amélioration.
Vérification rapide
Testez vos connaissances sur la recherche des goulots d’étranglement.
Récapitulatif
Optimisez en mesurant d’abord avec Vue DevTools et le profileur du navigateur, puis en ciblant les véritables goulots d’étranglement : les nouveaux rendus excessifs, les listes volumineuses (corrigées avec le défilement virtuel) et les bugs liés aux clés d’index (corrigés avec des clés stables). Mesurez toujours de nouveau pour confirmer le résultat. Vous allez maintenant apprendre à tester les applications Vue.
Questions Fréquemment Posées
La leçon « Identifier et corriger les goulots d’étranglement » est-elle gratuite ?
Oui — le texte complet de « Identifier et corriger les goulots d’étranglement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Identifier et corriger les goulots d’étranglement » ?
Analysez les performances et résolvez les goulots d’étranglement. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Identifier et corriger les goulots d’étranglement » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Chargement différé et division du code
- Techniques de mémoïsation
- Identifier et corriger les goulots d’étranglement