käyttöajan suorituskyvyn analysointi: Google DevTools

RAIL performance monitoring continued.

Runtime performance on se, miten sivu toimii, kun se on käynnissä, eikä lataus. Chrome DevTools ovat ihanteellisia analysoimaan sivustosi vastaus, animaatio, ja tyhjäkäynti kertaa KISKOMALLIN suorituskykyä. Jos et tiedä, mitä rautatie on, suosittelen checkout minun edellinen artikkeli ennen eteenpäin.

nyt kun ymmärrät, mitä rautatie on, niin sukelletaan!

Getting Started

First things first is learning how to use you DevTools’ Performance panel. Käytämme tätä paneelia tunnistamaan suorituskyvyn pullonkauloja millä tahansa verkkosivulla.

Google docs tarjoaa meille kätevän demosivuston Devtoolsin suorituskyvyn käyttämiseen. Avataan se Chromessa Incognito-tilassa. Tämä antaa meille mahdollisuuden aloittaa puhtaalta pöydältä asioita, kuten evästeitä, jotka saattavat hidastaa sivustoamme, mutta eivät ole tärkein suorituskykykysymys. Nyt avataan DevTools (Mac: Command+Option + I tai Windows / Linux: Control + Shift + I) sinun pitäisi nähdä jotain seuraavista:

tätä sivustoa profiloimme DevTools Performance Panelin kanssa.

mitä profilointi on?

ajettaessa koodia käytetään Profilointityökaluja tunnistamaan, mitkä prosessit vievät eniten aikaa. Profilointityökaluja käytetään yleensä vain, kun A — suorituskykyongelma on tunnistettu järjestelmässä-jos palvelimella kestää kauan vastata, etkä voi tunnistaa resurssiongelmaa (e.g. muistin puute tai huonosti konfiguroitu roskayhteys), profilointi voi olla seuraava strategiavalintasi.

Back to the demo

kuten edellisessä artikkelissani rautateistä, eri laitteilla on erilainen suoritinteho, joka vaikuttaa verkkosivuston suorituskykyyn kyseisessä laitteessa. Koska pienempi CPU teho mobiililaitteen, meidän täytyy simuloida sivu profiloimme alemman CPU jotain kutsutaan CPU Kuristaminen.

mikä on suorittimen Kuristaminen?

pohjimmiltaan suorittimen Kuristaminen hidastaa tietokoneen prosessointinopeutta. Tunnetaan myös, dynaaminen taajuus skaalaus, se säätää kellotaajuus CPU. Sitä käytetään yleensä automaattisesti hidastaa tietokoneen kun mahdollista käyttää vähemmän energiaa ja säästää akkua, erityisesti kannettavissa tietokoneissa. CPU: n kuristamista voidaan säätää myös manuaalisesti, jotta järjestelmä olisi hiljaisempi, koska tuuletin voi silloin toimia hitaammin.

niin, kuristetaan demomme. Devtooleissa:

• Napsauta suorituskyky-välilehteä.
• varmista, että Ruutukaappausruutu on käytössä.
• Napsauta Capture Settings (the settings-kuvake oikealla poistumispainikkeen alla). DevTools paljastaa asetukset, jotka liittyvät siihen, miten se kaappaa suorituskyvyn mittareita.
• suorittimelle valitse 4x hidastus. DevTools kuristaa suoritinta niin, että se on 2 kertaa tavallista hitaampi.

nyt kun demomme on kuristettu, voimme nähdä suorituskyvyn heikkenemisen, kun lisäämme sivulle sinisiä neliöitä. Kun optimoimme sivun, siniset lohkot toimivat sujuvasti, mutta kun un-optimoida sitä, voit lohkojen alkaa liikkua hitaammin ja jankier. Voimme nyt alkaa seurata Demon suorituskykyä tunnistaaksemme suorituskyvyn pullonkaulan, joka hidastaa kaikkea.

Recording Runtime Performance

devtoolsin Performance-välilehden vasemmassa yläkulmassa klikkaa ”Record” – ympyrää alkaaksesi seuraamaan Demon suoritusmittareita.

odota muutama sekunti, että jäljitin nappaa tietoja. Valitse seuraavaksi stop. DevTools lopettaa tallennuksen, käsittelee tiedot, sitten se näyttää tulokset suorituskyvyn paneeli. Katsotaanpa tuloksia.

analysoimalla tietoja

nyt kun meillä on kaikki tiedot, voimme paikantaa demomme suorituskyvyn hidastumisen syyt.

analysoi kuvaa sekunnissa

tärkein mittari minkä tahansa animaation suorituskyvyn mittaamiseksi on kuvaa sekunnissa (FPS). Kuten edellisessä artikkelissani RAIL, käyttäjät ovat tyytyväisiä, kun animaatiot toimivat 60 FPS.

• katso FPS-kaavio. Aina kun näet punaisen palkin FPS: n yläpuolella, se tarkoittaa, että kehysnopeus laski niin alas, että se todennäköisesti vahingoittaa käyttäjäkokemusta. Yleensä, mitä korkeampi vihreä palkki, sitä korkeampi FPS.

• alla FPS kaavio näet CPU kaavio. SUORITINKAAVION värit vastaavat Suoritustaulun alareunassa olevan Yhteenveto-välilehden värejä. Se, että SUORITINKAAVIO on täynnä väriä, tarkoittaa, että suoritin maksimoitiin tallennuksen aikana. Aina kun näet CPU maxed ulos pitkiä aikoja, se on merkki löytää tapoja tehdä vähemmän työtä.

• viet hiiren FPS, CPU, tai NET kaavioita. DevTools näyttää kuvakaappauksen sivusta kyseisenä ajankohtana. Siirrä hiirtä vasemmalle ja oikealle toistaaksesi tallennuksen. Tätä kutsutaan pensaikoksi, ja se on hyödyllinen animaatioiden etenemisen analysointiin manuaalisesti.

– mitä se on?

Kuuraaminen tarkoittaa animaation selaamista käsin eteen-ja taaksepäin, animaation esikatselua, jotta animaatioon voidaan tarkistaa, korjata tai lisätä kehyksiä.

• Kehysosassa viet hiiren yhden vihreän ruudun päälle. DevTools näyttää kyseisen kehyksen FPS: n. Jokainen ruutu on todennäköisesti selvästi alle 60 FPS: n tavoitteen.

avaa FPS-mittari

toinen kätevä työkalu on FPS-mittari, joka antaa reaaliaikaiset arviot FPS: lle sivun käydessä.

1. paina Command+Shift+P (Mac) tai Control+Shift+P (Windows, Linux) avataksesi komentovalikon.
2. aloita kirjoittamalla Rendering Komentovalikosta ja valitse Näytä renderöinti.
3. ota Renderöintivälilehdessä käyttöön FPS-mittari. Uusi peitto ilmestyy kuvaikkunan oikeaan yläkulmaan.

nyt kun olet mitannut ja varmistanut, että animaatio ei toimi hyvin, seuraava kysymys on: miksi?

• huomaa Yhteenveto-välilehti. Kun tapahtumia ei ole valittu, tämä välilehti näyttää toiminnan jaottelun. Sivu käytti suurimman osan ajastaan renderöintiin. Koska performanssi on taidetta tehdä vähemmän työtä, sinun tehtäväsi on vähentää aikaa renderöinti työtä.

• Laajenna pääosa. DevTools näyttää liekkikartan pääkierteen toiminnasta ajan kuluessa. X-akseli kuvaa tallennetta ajan kuluessa. Jokainen baari edustaa tapahtumaa. Laajempi rima tarkoittaa, että tapahtuma kesti pidempään. Y-akseli edustaa kutsupinoa. Kun näkee tapahtumia päällekkäin, se tarkoittaa, että ylemmät tapahtumat aiheuttivat alemmat tapahtumat.

• nauhoituksessa on paljon dataa. Zoomaa yhteen Animaatiorungon Laukaisutapahtumaan napsauttamalla, pitämällä ja vetämällä hiirtä yleiskuvan päällä, joka on osa, joka sisältää FPS -, CPU-ja NET-kaaviot. Pääosa ja Yhteenveto-välilehti näyttävät vain tallennuksen valitun osan tiedot.

• huomaa punainen kolmio oikeassa yläkulmassa animaation runko potkut tapahtuma. Aina kun näet punainen kolmio, se on varoitus, että siellä voi olla ongelma liittyy tähän tapahtumaan.
• klikkaa Animaatiorunko potkut-tapahtumaa. Yhteenveto-välilehdeltä näet nyt tietoja kyseisestä tapahtumasta. Huomaa paljastuslinkki. Klikkaamalla, joka saa Devtoolsin korostamaan tapahtumaa, joka käynnisti Animaatiorungon Laukaisutapahtuman. Huomaa myös sovellus.js: 95 link. Napsauttamalla tätä hyppäät lähdekoodin asiaankuuluvalle riville.

• sovelluksen alla.päivitä tapahtuma, siellä on nippu violetti tapahtumia. Jos ne olisivat leveämpiä, näyttää siltä, että jokaisella niistä voisi olla punainen kolmio. Valitse yksi violetti Asettelutapahtumista nyt. DevTools tarjoaa lisätietoja tapahtumasta tiivistelmä-välilehdessä. Todellakin, siellä on varoitus pakko uudelleen (toinen sana layout).
• valitse Yhteenveto-välilehdessä sovellus.js: 71 linkki Layout pakotettu. DevTools vie koodiriville, joka pakotti asettelun.

seuraavat vaiheet

suorituskyvyn ymmärtämisen perusta on RAUTATIEMALLI. Tämä malli opettaa sinulle suorituskyvyn mittarit, jotka ovat tärkeimpiä käyttäjille. Katso suorituskyvyn mittaaminen KISKOMALLILLA saadaksesi lisätietoja.

kuten missä tahansa, jotta Suoritustaulun kanssa olisi mukavampi, harjoitus tekee mestarin. Kokeile profiloida omia sivujasi ja analysoida tuloksia. Jos sinulla on kysyttävää tuloksistasi, hyödynnä Internetin tietotaitoa ja avaa pinon Ylivuotokysymys, joka on merkitty koodilla google-chrome-devtools. Sisällytä kuvakaappauksia tai linkkejä toistettaviin sivuihin, jos mahdollista.

jotta voisit todella hallita ajonaikaisen suorituskyvyn, sinun täytyy oppia, miten selain kääntää HTML: n, CSS: n ja JS: n pikseleiksi näytöllä. Paras paikka aloittaa on renderöinti suorituskykyä yleiskatsaus. Kehyksen anatomia sukeltaa vielä tarkemmin.

viimeinen, on monia tapoja parantaa ajonaikaista suorituskykyä. Tämä opetusohjelma keskittyi yhteen tiettyyn animaation pullonkaula antaa sinulle keskittynyt kierros läpi suorituskyvyn paneeli, mutta se on vain yksi monista pullonkauloja saatat kohdata. On olemassa useita muita näkökohtia runtime suorituskykyä. Tutustu seuraaviin linkkeihin saadaksesi hyviä vinkkejä runtime-suorituskyvyn parantamiseen kaikilla tasoilla:

• JS: n suorituksen optimointi
• Tyylilaskelmien laajuuden ja monimutkaisuuden vähentäminen
• Vältä suuria, monimutkaisia asetteluja ja pohjakosketuksia
• yksinkertaista maalin monimutkaisuutta ja pienennä Maalialueita
• pidä kiinni vain Komposiittiominaisuuksista ja hallitse Kerroslukua
• Debunce your Input Handlers