Animatsiooniline veebiarendus: Jõudlus #2.1 – Chrome Performance tööriist

Animatsiooniline veebiarendus: Jõudlus #2.1 – Chrome Performance tööriist

Performance tööriist on animatsioonilises veebiarenduses väga kasulik – sellega saab mõõta sõna otses mõttes veebilehe jõudlust.

Edaspidi nimetan Performance tööriista lihtsalt jõudluse mõõtjaks.

Tänases animatsioonilise veebiarenduse osas räägingi ühe brauseri (Chrome) jõudluse mõõtjast.

Järgmises osas võtan ette Firefox’i performance tööriista.

Teistest brauserite tööriistadest ma ei juttu ei tee, sest need ei ole kas kõigile kätte saadavad või ei ole need eriti levinud, aga põhimõtted peaksid jääma samaks – olenemata brauserist.

Perfomance tööriist Chromium tüüpi brauserites

Google’i ametlikku õpetuse Perfomance tööriista kohta võib leida siit (vana versioon), siit (uus versioon) ja ka siit (Getting Started). Võtsin nendest eeskuju.

Varem nimetati Perfomance tööriista Chromium tüüpi brauserites Timeline tööriistaks.

Lindistamine

Performance tööriista nägemiseks ava Chromiumi arendaja tööriistad ja sealt edasi vali “Performance” (või “Timeline”).

ChromiumPerformance

Edaspidi nimetan ma neid joatatud osasid paneelideks ehk kui viitan teisele paneelile, siis mõtlen selle all siin pildil olevat number kahte.

Number ühe all (rohelisega piiratud ala) võid näha juhtpaneeli, millega saad kontrollida jõudluse mõõtja tegevust.

Seal asub “Record” nupp (ümmargune ring üleval vasakul), mis lubab sul lindistada veebilehe jõudlust.

Nagu päris eluski pead sa kõigepealt tegema vastavad mõõtmised, et siis neid analüüsida.

Lindistamiseks mine veebilehele, mida tahad analüüsida; ava chromiumi jõudluse mõõtja ning vajuta “Record”. Tee veebilehel erinevaid toiminguid (vaheta alamlehti, käivita animatsioone, keri üles ja alla vms).

Kui oled vastavad toimingud ära teinud, siis ava uuesti performance tööriist ja vajuta hüpikaknas olevat “Stop” nuppu.

Juhhei! Arvatavasti sinu esimene jõudluse mõõtmine on tehtud.

Enne kui liigun teiste funktsioonide ja võimaluste juurde, annaksin ma mõningaid nippe, kuidas paremini jõudlust lindistada.

  • Proovi hoida lindistamised võimalikult lühikesed ja konkreetsed (nt. ainult 2-3 toimingut), sest pärast on lihtsam andmeid analüüsida.
  • Hoidu mitte vajalikest aktsioonidest. Näiteks kui mõõdad hamburger menüü avanemisanimatsiooni, siis ära samal ajal keri jne. Seegi aitab andmeid paremini analüüsida.
  • Keela ära võrgu vahemälu (kui lindistad aktsioone, kus vahetad alamlehte lingiga). Seda saad teha läbi “Network” vahelehe (“Network” -> “Disable cache”)
  • Keela ära brauseri laiendused. Need võivad mõjutada jõudlust üleüldse. Kõige lihtsam viis oleks avada chromium inkognito moodis, siis ei tohiks ühtegi laiendust olemas olla (kui sa just ei ole seadnud erandeid).

Kui on soov mõõta veebilehe laadimist, siis ava lihtsalt jõudluse mõõtja ja refresh‘i veebilehte.

Nagu võid näha on “Record” nuppu kõrval ka “Refresh” nupp – seda võib ka kasutada.

Performance tööriist teeb ülejäänu ise.

Tänases osas keskundun ainult animatsioonidele, kuid netowork’i võtan ka loomulikult ette tulevastes õpetustes!

Edasi “Refresh” nupu kõrval on olemas “Clear” nupp, mis kustutab viimase lindistuse andmed ja puhstab jõudluse mõõtja.

Järgnevad kaks märkeruutu. Esimene checkbox (Screenshots) tähistab seda, et sa näeksid teisel paneelil visuaalselt, mida sa veebilehel mingi ajahetkel tegid. Nõnda on parem pärast andmeid analüüsida.

Teine märkeruut on Memory. Sellega saad ülevaate, mis toimub mingil teatud ajahetkel brauseri mälus kui ka graafikakaardi (GPU) mälus.

Kolmandaks sama paneeli peal on prügikasti ikoon. Seda vajutades lindistamise ajal saad sundida brauserit tegema garbage collect‘imist ehk “prügi väljaviimist” (brauser eemaldab vanad JSi muutujad ja “muu pahna” mälust).

Kõige lõpus, paremal pool, on väikene hammasratas. Selle peale vajutades avanevad sätted, mis mõjutavad, kuidas brauser jõudlust salvestab.

Esimene sätte on “Disable JavaScript Samples”. Kui checkbox‘il on tõene väärtus, siis pärast lindistamist ei näe sa enam teisel paneelil, milliseid JS’i funktsioone brauser kindlal ajahetkel täitis.

Mina soovitaksin selle jätta kindlalt vaikimisi väärtuse peale (ehk sul on JavaScripti käsud lubatud; eemalda kastist linnuke kui see on sul millegipärast seal), sest veebilehe muudab interaktiivseks siiski JS, mitte CSS.

Kui sa kasutad animeerimiseks CSS’i omadusi, siis soovitaksin sul lugeda seda artiklit; alampealkiri “CSS animatsioonilises veebiarenduses”.

Sellest allpool on checkbox “Enable advanced paint instrumentation”. Kui see on enne lindistamist ära märgitud, siis pärast saab kasutada “Layers” tööriista paneelil neli, et näha erinevaid kihte ehk layer‘eid.

Näiteks Hardware Acceleration baseerub veebilehes uute kihtide loomisele.

Paremal pool võime näha Throttling‘u sätteid, millega saame imiteerida jõudlust aeglasematel seadmetel või ühendustel.

Network throttling on mõeldud mõõtmaks, kuidas sinu veebileht laeb erinevatel ühendustel ning CPU throttling on mõeldud näitamaks, kuidas sinu veebileht töötab aeglasematel seadmetel.

Analüüsimine

Nüüd kui oled lindistamise ära teinud, tuleb hakata andmeid analüüsima.

Selleks kasutame ülejäänud paneele.

Paneelil kaks saad väga üldise pildi tehtud lindistusest:

  • Roheline tulpdiagramm näitab FPS’i (frames per second; kaadrisagedus) ehk kui sujuvalt veebileht suudab mingit toimingut teha. Väga heaks kaadrisagedust peetakse 60FPS’i. Kogu jõudluse parandamine taandubki sellele, kuidas FPS’i saada 60 peale ehk mida kõrgem on tulp, seda parem.
  • FPS mõõdiku all on erinevate värvidega graafik, mis näitab sulle CPU tegevust mingil ajahetkel. Mida vähem on graafikut näha, seda parem, sest kui graafik on olemas, siis näitab see, et CPU’l on pidevalt mingi protess käimas.
  • Hall – muu/tundmatu tegevus
  • Roheline – värvimine (välimus)
  • Lilla – renderdamine
  • Oranž – skriptimine

Vahetevahel võivad olla punased kastid ka üleval pool FPS mõõdikut. Need viitavad sellele, et veebileht ei pruugi olla väga kiire ning seda peaks optimeerima.

Sellele on veebimaailmas olemas ka oma termin – jank.

Väga hea veebileht, mis on just keskendunud jõudlusele on näiteks JankFree.org

Võib olla sa juba märkasid, et kui lähed hiirega paneeli kahe peale, siis ilmub nähtavale suurem pilt veebilehest. Liigutades hiirt paremale või vasakule näed, mis veebilehel täpselt toimub (vaata, et sul Screenshots oleks lubatud ning et sa lindistasid jõudlust koos Screenshots sättega).

Screenshots

Veel mida saab teha on muuta praegust hallatavat ala. Õigemini saab sisse zuumida kindlasse ajahetke. Selleks saab kasutada hiirt:

  • kerides keskmist nuppu üles alla;
  • hoides vasakut nuppu all ning liigutades hiirt vasakule või paremale;
  • klikata kindlal alal paneelil kaks ühe korra;
  • “lohistada” hallatava ala äärmiseid pulkasid

Kui sa sisse zuumid, siis muutub ka kolmas paneel.

Kolmanda paneeli paremaks kasutamiseks tuleb kindlalt sisse zuumida, sest muidu on kõik nagu pudru ja kapsad. 😀

Selle paneeli kõige üleval asuvad helerohelised frame‘id. Kui lähed hiirega nende peale, siis näed kui pikk see kaader on ja mis oli FPS tol hetkel.

Frame hovered

Nagu pildi pealt võid näha, siis see kaader oli 66 millisekundit pikk ja tol hetkel oli FPS’iks 15.

Veel natukene kontrolli kohapealt – et kolmandas paneelis korralikult töötatada, siis tuleks vasakut hiire klahvi all hoida ja hiirt liigutada.

Nõnda saad ennast viia koheselt sobivasse punkti, et soovitud andmeid analüüsida.

Kolmas paneel on tegelikult väga andmete rohke.

Nimelt, kui vaatad vasakule, siis võid näha, et seal on neli alamlehte.

Arvatavasti on sul praegu lahti “Main”, aga pane see kinni vajutades vasakul olevale kolmnurgale.

Kui mõni teine alamleht on ka lahti, siis pane need ka kinni.

Nüüd ava “Interactions” ja omakorda ava “Input” ning “Animation”.

“Input’is” võid näha, mis aktsioone lehel võeti teatud ajahetkel.
“Animation’is” võid näha, mis animatsioonid tol hetkel mängisid.

See tuleb kasuks, siis kui soovid täpselt teada, mida sa tegid tol hetkel tegid.

Nüüd võid “Interactions” lehe kinni panna ja võid avada “Main” alamlehe.

“Main” nagu nimigi ütleb on põhiline ehk siin veedad sa arvatavasti kõige rohkem analüüsides aega.

Nimelt “Main” näitab sulle nii JS funktsioonide väljakutsumisi (välja arvatud juhul kui sa märkisid ära “Disable JavaScript Samples” checkbox’i) kui ka brauseri aktsioone.

Brauseri aktsioonide all mõtlen ma sulle loodedavasti tuttavaid tegureid – asetust, välimust ja kompositsiooni.

Värvi legend on järgmine:

  • Heleroheline – värvimine (välimus)
  • Tumeroheline – kompositsioon
  • Lilla – asetus ja suurus
  • Ülejäänu – JavaScriptiga seotud

Main Example Bad

Nagu näha võid on see klassikaline halb näide animatsioonist. Kõigepealt asetus ja suurus, siis värvimine ning kõige lõpuks kompositsioon.

Kõik kolm tegurit on ära kasutatud!

Ei mõista, millest räägin? Uuri seda postitust siin.

Siit tegelikult saab aru, miks minu veebileht (jah, see on minu firma AnsiVeebi veebileht AnsiVeeb.ee) on aeglane – kõik kolm tegurit kasutatakse pidevalt ära.

“Main” alamlehes võib veel näha JavaScript funktsioone, mida käivitati (oranži värvi kastid).

Nende all on funktsioonid, mida oranži kastiga funktsioonid väljakutsusid. Need “alamfunktsioonid” on ära märgitud helesinisega ja hallikas-rohelisega (sinul võivad värvid erineda, sest Chromium annab nendele täielikult suvalised värvid).

Kuna ma kasutasin AnsiVeebi lehe arendamiseks erinevaid teeke, siis minu Call Stack‘id (Call Stack – põhimõtteliselt funktsiooni side teiste funktsioonidega ehk peafunktsioon ja alamfunktsioon) on hästi suured, kuid nagu pildilt nägid, siis päris all lõpus olid lilla värvi kastid.

Need viitavad brauseri asetuse ja suuruse aktsioonidele.

Nagu reegel ütleb, kui muudad asetust/suurust, siis tuleb muuta ka värvi (välimust) ning kõige lõpuks kompositsiooni.

AnsiVeebi lehes läheb täpselt samamoodi.

Täna ma parandamisest ei räägiks – seegi õpetus on mul plaanis, kuid põhimõtteliselt on mul kaks varianti, kas muuta animatsiooni funktsiooni ennast, mis muudab elemendi asetust/suurust või anda animatsiooni funktsioonile odavamad omadused.

Vahetevahel ei pruugi alati olla brauseri aktsioonid/funktsioonid otse JS Call Stack‘i all, vaid selle järel.

Seda tuleks lihtsalt meelespidada, et suure tõenäosusega on selle brauseri aktsiooni käivitanud eelnev JavaScripti funktsioon.

 

Nüüd ma arvan, et oleks õige aeg tutvustada sulle meie viimast nähtavat paneeli – see on neljas paneel.

Esimese vahelehena on meil olemas “Summary”.

Põhimõtteliselt mida “Summary” teeb on see, et ta annab lisainformatsiooni mingi teatud tegevuse kohta kolmandas paneelis.

See tegevus võib ka olla kogu lindistatu. Ülevaate saamiseks zuumi välja ja vaata, et sul ei oleks mitte ühtegi aktsiooni valitud.

Kui aga tahaksin näiteks teada, mis kutsus välja Recalculate Style funktsiooni, siis ainult ma pean klikkama soovitud aktsioonil ja juba teangi, kus see toimus.

Summary

Kuid neljas paneel suudab palju rohkem.

Ta võib näidata sulle Call Tree‘d, Bottom Up’i ja Event Log‘i.

Need kõik tunduvad sarnased, aga tegelikult on nendel kõigil erinev ülesanne.

Kasuta

  • Call Tree‘d, siis kui soovid näha tegevusi, mis nõuavad kõige rohkem tööd.
  • Bottom Up’i, siis kui soovid näha tegevusi, mis võtavad kõige rohkem aega üleüldse.
  • Event Log‘i, siis kui soovid näha tegevusi järjekorras.

 

Call Tree näitab sulle kahte asja Self Time‘i ja Total Time‘i.

Soovitavalt kasuta Call Tree võimalusi suure hallatava alaga, et saada üldpilti veebilehest

Self Time näitab kui palju aega võttis just see antud tegevus aega ning Total Time näitab kui palju võttis see tegevus ja tema alamtegevustel aega.

Sa võid ka aegu sortida vajutades kolmele tulbale üleval (“Self Time”, “Total Time” või “Activity”).

Üleval vasakul on ka otsimis ja sorteerimisvõimalused. Kasuta neid vastavalt oma kriteeriumitele.

Üleval paremal aga on “Show heaviest stack” nupp, millel vajutades suudab Call Tree vaheleht näidata kõige kulukamat aktsiooni Stack‘is.

 

Teise vehelehena on meil olemas Bottom Up.

Bottom Up näitab ka Self Time‘i ja Total Time‘i, kuid nüüd hoopis selles järjekorras, mis võtsid kõige rohkem aega üleüldse.

Jällegi aegade sortmine käib tulpadele vajutades.

Bottom Up‘i tuleks kasutada teatud ajavahemikus, kuid see võib olla üsnagi suur.

 

Neljandaks vaheleheks on “Event Log”.

“Event Log’is” on sarnaselt eelmisetele vahelehtedele olemas Self Time ja Total Time, kuid juures on ka “Start Time”.

Self Time näitab kui palju aega võttis just see antud tegevus aega ning Total Time näitab kui palju võttis see tegevus ja tema alamtegevustel aega.

“Start Time” tähistab just seda, millal tegevusega alustati.

Sorteerimine käib nagu eelmistel, tulpade peale klikates.

 

Neljandal paneelil on olemas veel üks vaheleht, aga sellest teen ma juttu allpool.

 

Liigume nüüd korraks tagasi kolmanda paneeli juurde.

Meil on võtmata kaks alamlehte – “Raster” ja “GPU”.

“Raster” all on erinevad Rasterizer Thread‘id, mis põhimõtteliselt loovad veebilehe.

Õigemini nad võtavad erinevad brauseri funktsioonid/aktsioonid (nagu näiteks ´fillRect()´ ja näitavad neid reaalset veebilehel.

Tegemist on siiski “Paint” alamaktsiooniga ning seda võiks võimalikult vähe esineda.

“GPU” alamleht lihtsalt näitab GPU ehk graafikakaardi kasutust veebilehel.

 

Et nüüd edasi minna, peaksime tegema uue lindistamise, kus on lubatud “Enable advanced paint instrumentation”.

Kui sa seda ei ole teinud, siis tee see ära.

Luba “Advanced paint instrumentation” paneelil üks ja alusta uue lindistusega.

Lõpeta lindistust, oota kuni Chromium andmeid laeb.

Kui laetud, siis vali välja üks suvaline kaader (see võiks olla ühe animatsiooni alguses või keskel).

Kaadrid asusid otse teise paneeli all.

Sul peaks automaatselt avanema “Layers” vaheleht neljandas paneelis.

Example of Layers

“Layers” vahelehe ülesanne on sulle näidata, millised erinevad kihid on su veebilehes olemas.

Siit on ka väga hästi näha, miks ei tohiks HA’d kasutada koos kogu (*) selektoriga. Iga element on omal kihil, mis on jõudluse kohapealt väga jube ja kole.

Lisaks, mida “Layers” vaheleht pakub on see, et sa saad ise kihi valida ja selle kohta näha rohkem informatsiooni.

Kihi valimiseks mine vasakule, kus on #document ja ava see. Sealt peaksid nägema, millised erinevad kihid on sul olemas.

Klikka ühe peal ja paremal pool näed informatsiooni selle kihi kohta.

Teise asjana, mida “Advanced paint instrumentation” lubab on “Paint” aktsiooni näitamine visuaalselt.

See vaheleht avaneb ka neljandas paneelis ja selle nimi on “Paint Profiler”

Selleks, et näha “Paint” aktsiooni visuaalselt ja koos alamfunktsioonidega mine teises paneelis “Main” vahelehel ja vali üks suvaline “Paint” funktsioon.

Kui “Paint Profiler” on tühi, siis vali mõni muu “Paint”. “Rasterize Paint” sobib ka “Paint Profiler’isse”

Nõnda saad aimu, mida just tol hetkel värviti.

Lindistuse salvestamine

Kui soovid seda lindistust salvestada, siis vajuta lihtsalt vasakut hiire klahvi “Performance” tööriista peal ja vali “Save Profile”.

See salvestab sinu lindistuse kui JSON failina.

Kui soovid seda lindistust uuesti näha, siis vali “Save Profile” asemel “Load Profile”.

Rendering tööriist

“Rendering” tööriist ei ole tegelikult midagi erilist – see lubab sul saada koheselt tagasisidet veebilehe kohta.

See tähendab seda, et sa ei pea midagi lindistama, vaid saad koheselt andmetega jälgida veebilehe kiirust – see on eriti kasulik kiireks jõudluse kontrolliks.

Et seda tööriista kasutada, ole ükskõik, mis Chromium arendatajate tööriista vahelehel (“Performance” sobib selleks väga hästi) ja vajuta escape nuppu.

Nüüd peaks alt nähtavale ilmuma riba koos konsooliga.

Kui ei ilmu, siis vajuta escape nuppu uuesti.

Klikka hiirega kõige vasakul pool olevale kolmele täpile ja vali sealt “Rendering”.

Nüüd peaks sul “Rendering” menüü lahti olema.

Example of Rendering tool

Seal on erinevad checkbox‘id:

  • “Paint Flashing” – tähistab veebilehes iga elemendi, mida peab uuesti värvima.
  • “Layer Borders” – näitab iga kihi ääri ja osasid.
  • “FPS Meter” – näitab koheselt, mis on praegune FPS.
  • “Scrolling Perfomance Issues” – tähistab ära elemente, mis võivad veebilehe scroll‘imist takistada.
  • “Emulate CSS Media” – see pole praegu tähtis, kuid sellega saab muuta, kuidas veebilehte RWD’s näidatakse.

Example of Rendering tool in Action

Ei lülitanud “Scrolling Perfomance Issues” checkbox’i sisse, sest minu veebilehel ei ole scrollimist

Nagu näed (või ka ei näe 😀 ) ei ole FPS eriti kiire.

See jääb umbes 10-20 vahemikku, aga ilma screen record’imiseta on FPS umbes 30-40.

Ma arvan, et tulevikus saame seda üheskoos parandada ehk kavatsen teha õpetuse, kuidas veebilehte optimeerida, kuid järgmises osas võtame luubi alla Firefox’i jõudluse tööriista.

 

Ongi Chromium Performance tööriist läbivõetud!

Pikk postitus ja sügav õppimiskurv, kuid ma arvan, et see oli seda väärt!


Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.
Ma ei pea ennast praegu animatsioonilise veebiarenduse eksperdiks, kuid olen sellele spetsialiseerunud ja saan Sind väga palju aidata animatsioonilise veebilehe loomisel!

Leave a Reply

Your email address will not be published. Required fields are marked *