Profilering med fanen Performance i Vue DevTools
Optagelse af komponentopdateringer, identificering af unødvendige genrenderinger og måling af komponenters tidsforbrug
Profilering med fanen Performance i Vue DevTools er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvorfor profilere
Før du optimerer, skal du vide, hvor tiden bruges. Vue DevTools indeholder en visning af ydeevne og tidslinje, der registrerer komponentgengivelser, så du kan finde spildt arbejde i stedet for at gætte.
Installation af Vue DevTools
Installér browserudvidelsen, eller kør den selvstændige app. I Vite-projekter tilføjer pluginet vite-plugin-vue-devtools en inspektør i appen.
npm install -D vite-plugin-vue-devtoolsStart af en optagelse
Åbn DevTools' tidslinje-/ydeevnefane, og tryk på optag. Interagér derefter med din app. Stop optagelsen for at registrere gengivelsesaktiviteten i det pågældende tidsrum.
Tidslinjen for komponentgengivelse
Hver komponentgengivelse vises som en hændelse på tidslinjen. Du kan se, hvornår en komponent blev gengivet igen, og hvor lang tid gengivelsen tog.
Commit-grafen
En commit er én samlet tømning af opdateringer til DOM'en. Commit-grafen viser hver commit og hvilke komponenter der blev gengivet i den, så du kan finde commits, der berører langt flere komponenter end forventet.
Flammegraf for komponenttider
Flammegrafen stabler varigheden af gengivelser for overordnede og underordnede komponenter. Brede søjler er langsomme gengivelser, mens dybe stakke viser, hvordan gengivelsen breder sig gennem træet.
Identifikation af spildte gengivelser
En spildt gengivelse er en komponent, der blev gengivet igen, men producerede det samme resultat. De vises som gentagne gengivelseshændelser, hvor resultatet ikke ændrede DOM'en.
Samme resultat, ny gengivelse
En almindelig årsag er, at du sender et nyoprettet objekt eller en inline-pilfunktion som prop ved hver gengivelse, så memoiseringen brydes. Det underordnede komponent gengives igen, selv om det synlige resultat er identisk.
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />Sådan får du stabile referencer
Flyt konstanter uden for komponenten, eller pak afledte data ind i computed, så den samme reference sendes mellem gengivelserne.
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));Sammenhold med interaktioner
Tidslinjen registrerer også muse- og tastaturhændelser. Sammenhold en langsom commit med den interaktion, der udløste den, for at finde den præcise kodevej, der skal optimeres.
Komponentinspektørens gengivelsestæller
Komponentinspektøren kan fremhæve komponenter, når de opdateres. Hvis du ser en tæller blinke ved hver uvedkommende ændring af tilstanden, afsløres unødvendige gengivelser med det samme.
Hurtig kontrol
Hvad repræsenterer commit-grafen på fanen med ydeevne?
Opsummering
Brug fanen med ydeevne og tidslinje i Vue DevTools til at optage gengivelser. Commit-grafen viser hver DOM-opdatering og de komponenter, der blev gengivet, mens flammegrafen afslører langsomme gengivelser. Se efter spildte gengivelser – komponenter, der gengives igen uden at ændre resultatet, ofte på grund af ustabile prop-referencer – og ret dem med konstanter, der er flyttet uden for komponenten, eller med computed.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Profilering med fanen Performance i Vue DevTools” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Profilering med fanen Performance i Vue DevTools”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Profilering med fanen Performance i Vue DevTools”?
Optagelse af komponentopdateringer, identificering af unødvendige genrenderinger og måling af komponenters tidsforbrug Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Profilering med fanen Performance i Vue DevTools”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- v-memo til template-memoisering
- Profilering med fanen Performance i Vue DevTools
- Virtuel scrollning til store lister
- Web Workers med Vue