Profilointi Vue DevToolsin Performance-välilehdellä
Komponenttipäivitysten tallentaminen, tarpeettomien uudelleenrenderöintien tunnistaminen ja komponenttien ajoitus
Profilointi Vue DevToolsin Performance-välilehdellä on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Miksi profiloida
Ennen optimointia on tiedettävä, mihin aika kuluu. Vue DevTools sisältää suorituskyky- ja aikajananäkymän, joka tallentaa komponenttien renderöinnit. Näin voitte löytää turhan työn arvailun sijaan.
Vue DevToolsin asentaminen
Asentakaa selainlaajennus tai suorittakaa erillinen sovellus. Vite-projekteissa vite-plugin-vue-devtools-plugin lisää sovelluksen sisäisen tarkastimen.
npm install -D vite-plugin-vue-devtoolsTallennuksen aloittaminen
Avatkaa DevToolsin aikajana- tai suorituskykyvälilehti ja painakaa tallennuspainiketta, minkä jälkeen käyttäkää sovellusta. Lopettakaa tallennus, jotta kyseisen ajanjakson renderöintitoiminta tallentuu.
Komponenttien renderöinnin aikajana
Jokainen komponentin renderöinti näkyy aikajanalla tapahtumana. Näette, milloin komponentti renderöitiin uudelleen ja kuinka kauan sen renderöinti kesti.
Commit-kaavio
Commit on yksi DOM-päivitysten tyhjennyskerta. Commit-kaavio näyttää jokaisen commitin ja siinä renderöidyt komponentit, joten voitte havaita commitit, jotka koskettavat huomattavasti odotettua useampia komponentteja.
Komponenttien ajoituksen liekkikaavio
Liekkikaavio pinoaa vanhempien ja lasten renderöintien kestot. Leveät palkit kuvaavat hitaita renderöintejä, ja syvät pinot osoittavat, miten renderöinti etenee puussa.
Turhien renderöintien tunnistaminen
Turha renderöinti tarkoittaa komponenttia, joka renderöitiin uudelleen mutta tuotti saman tuloksen. Ne näkyvät toistuvina renderöintitapahtumina, joiden tulos ei muuttanut DOM:ia.
Sama tulos, uusi renderöinti
Yleinen syy on uuden objektin tai inline-nuolifunktion välittäminen propina jokaisella renderöintikerralla, mikä rikkoo memo isoinnin. Lapsikomponentti renderöidään uudelleen, vaikka sen näkyvä tulos on täysin sama.
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />Korjaaminen vakailla viitteillä
Nosta vakiot komponentin ulkopuolelle tai kääri johdettu data computed-kutsuun, jotta renderöintikertojen välillä välitetään sama viite.
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));Yhdistäminen vuorovaikutukseen
Aikajana tallentaa myös hiiri- ja näppäimistötapahtumat. Yhdistä hidas commit sen käynnistäneeseen vuorovaikutukseen, jotta löydät tarkan optimoitavan koodipolun.
Komponenttitarkastimen renderöintimäärä
Komponenttitarkastin voi korostaa päivittyviä komponentteja. Kun seuraat laskurin välähtävän jokaisen siihen liittymättömän tilamuutoksen yhteydessä, näet ylenrenderöinnin heti.
Pikatarkistus
Mitä suorituskykyvälilehden commit-kaavio esittää?
Kertaus
Tallenna renderöinnit Vue DevToolsin suorituskyky-/aikajana-välilehdellä. Commit-kaavio näyttää jokaisen DOM-päivityksen ja siinä renderöidyt komponentit, kun taas liekkikaavio paljastaa hitaat renderöinnit. Etsi turhia renderöintejä eli komponentteja, jotka renderöidään uudelleen ilman muutosta tulosteeseen. Niitä aiheuttavat usein epävakaat prop-viitteet, ja ne voi korjata nostamalla vakiot komponentin ulkopuolelle tai käyttämällä computed-ratkaisua.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Profilointi Vue DevToolsin Performance-välilehdellä” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Profilointi Vue DevToolsin Performance-välilehdellä”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Profilointi Vue DevToolsin Performance-välilehdellä”?
Komponenttipäivitysten tallentaminen, tarpeettomien uudelleenrenderöintien tunnistaminen ja komponenttien ajoitus Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Profilointi Vue DevToolsin Performance-välilehdellä”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- v-memo templaten memoisaatioon
- Profilointi Vue DevToolsin Performance-välilehdellä
- Virtuaalinen vieritys suurille listoille
- Web Workerit Vuen kanssa