Identifisere og løse flaskehalser
Profiler og løs ytelsesflaskehalser.
Identifisere og løse flaskehalser er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 3 leksjoner.
Mål før du optimaliserer
Å gjette hvor en app er treg, er bortkastet tid. Den profesjonelle fremgangsmåten er å måle først, finne den reelle flaskehalsen, fikse den og deretter måle på nytt. Vue DevTools og nettleserens profileringsverktøy er hovedverktøyene dine.
Vue DevTools
Nettleserutvidelsen Vue DevTools lar deg inspisere komponenttreet, reaktiv tilstand og hendelser. Fanen Performance registrerer hvor lang tid komponenter bruker på å gjengis, slik at du kan oppdage de trege.
Bruke fanen Performance
Start et opptak, samhandle med appen og stopp deretter opptaket. DevTools viser en tidslinje over komponentgjengivelser. Komponenter med lange eller hyppige gjengivelsesfelt er de mest sannsynlige årsakene.
Nettleserens profileringsverktøy
Performance-panelet i nettleserens DevTools registrerer hele siden: skriptkjøring, gjengivelse og maling. Lange gule skriptblokker peker ofte på omfattende JavaScript-arbeid under en gjengivelse.
Oppdage overdreven re-rendering
En vanlig flaskehals er at en komponent gjengis på nytt langt oftere enn forventet. Hvis en liten endring utløser gjengivelse på nytt av et stort deltre, bør du se etter delt reaktiv tilstand eller manglende komponentgrenser.
Gjengivelse av store lister
Det går tregt og krever mye minne å gjengi tusenvis av DOM-noder samtidig. Hvis en liste har hundrevis eller tusenvis av rader, blir selve DOM-en flaskehalsen, ikke datalogikken din.
<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>Konseptet virtuell rulling
Virtuell rulling gjengir bare radene som for øyeblikket er synlige i visningsområdet, pluss en liten buffer, og gjenbruker DOM-noder mens brukeren ruller. En liste med 10 000 elementer har bare noen få dusin noder i DOM-en.
Bruke et bibliotek for virtuelle lister
Biblioteker som vue-virtual-scroller implementerer dette for deg. Du gir dem alle dataene og en radhøyde, så håndterer de vindusinndelingen.
import { RecycleScroller } from "vue-virtual-scroller"
// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
// <div>{{ item.name }}</div>
// </RecycleScroller>Re-renderingsfeil knyttet til nøkler
Hvis du bruker arrayindeksen som :key i en dynamisk liste, kan Vue gjenbruke DOM-noder feil når elementer legges til, fjernes eller endrer rekkefølge. Det kan føre til feil innhold og ekstra re-rendering.
<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>Fikse nøkkelfeil
Bruk en stabil og unik identifikator som nøkkel, slik at Vue kan koble elementene riktig til dataene ved oppdateringer.
<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>En praktisk arbeidsflyt
Sett det hele sammen: Gjør et opptak med DevTools, finn den tregeste komponenten, se etter overdreven re-rendering eller enorme lister, bruk riktig løsning (bufring med computed, v-memo, virtuell rulling eller stabile nøkler), og mål på nytt for å bekrefte forbedringen.
Hurtigsjekk
Test kunnskapen din om å finne flaskehalser.
Oppsummering
Optimaliser ved å måle først med Vue DevTools og nettleserens profileringsverktøy, og rett deretter innsatsen mot reelle flaskehalser: overdreven re-rendering, enorme lister (løst med virtuell rulling) og feil forårsaket av indeksnøkler (løst med stabile nøkler). Mål alltid på nytt for å bekrefte resultatet. Deretter skal du lære å teste Vue-applikasjoner.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Identifisere og løse flaskehalser» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Identifisere og løse flaskehalser», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Identifisere og løse flaskehalser»?
Profiler og løs ytelsesflaskehalser. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «Identifisere og løse flaskehalser»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Lazy loading og kodedeling
- Teknikker for memoization
- Identifisere og løse flaskehalser