Norādījumi par Chrome Profiler rīka izmantošanu veiktspējas optimizēšanai

Šajā norādījumā es tev parādīšu, kā izmantot Profiler-rīku Chrome Developer Tools, lai identificētu un optimizētu veiktspējas šaurumus savā JavaScript kodā. Optimizētais kods ne tikai uzlabo lietotāja pieredzi, bet arī var ievērojami samazināt tavas vietnes ielādes laikus. Pēc šī norādījuma izpildei tu spēsi labāk analizēt savas tīmekļa lietotnes, identificēt problēmas un veikt atbilstošus uzlabojumus.

Svarīgākās secinājumi

• Profiler-rīks ir būtisks rīks tīmekļa lietotņu veiktspējas analīzei.
• Tu vari iegūt detalizētu informāciju par skriptēšanu, renderēšanu un atmiņas izmantošanu.
• Izvēlētās ierakstīšanas veidā tu vari novērtēt savas lietotnes darbību dažādos izmantošanas scenārijos.

Pamācība soli pa solim

Solī 1: Piekļuve Profiler-rīkam

Lai izmantotu Profiler-rīku Chrome Developer Tools, vispirms atver pārlūka izstrādes rīkus, nospiežot F12 vai veicot labo pogas klikšķi uz lapas un izvēloties "Pārbaudīt". Augšējā izvēlnē atradīsi dažādas cilnes. Noklikšķini uz cilnes “Veiktspēja”, kas parasti atrodas blakus cilnei “Tīkls”.

Solī 2: Uzņemšanas sākums

Lai sāktu veiktspējas uzņemšanu, vari vai nu atsvaidzināt lapu, pārbaudot, vai ierakstīšana ir aktīva, vai arī izmantot manuālo uzņemšanu. Lai sāktu profilēšanu, noklikšķini uz pogas “Sākt profils un atsvaidzināt lapu”. Šis solis ir īpaši noderīgs, ja tev ir sarežģīta lapa ar daudziem skriptiem, kas jāoptimizē.

Solī 3: Uzņemšanas apturēšana

Ja uzskati, ka esi savācis pietiekami daudz datu, manuāli apturē uzņemšanu. To vari izdarīt, vienkārši noklikšķinot uz apturēšanas pogas veiktspējas cilnē. Tagad tev būs vizuāls pārskats par veiktspējas datiem, kas tika reģistrēti, ielādējot un renderējot tavu lapu.

Solī 4: Veiktspējas datu analīze

Kad uzņemšana ir apturēta, redzēsi grafisku veiktspējas žurnāla attēlojumu. Šeit tiks parādīts dažādu aktivitāšu laika gaita, ieskaitot ielādi, renderēšanu un lapas zīmēšanu. Tu vari pielāgot skatu, tuvinoties, lai iegūtu detalizētāku informāciju, vai analizējot konkrētus laika posmus.

Solī 5: Detalizēta skriptēšanas laika analīze

Lai precīzāk analizētu veiktspējas datus, aplūko sadaļu “Skriptēšana”, kas norāda, cik daudz laika tiek pavadīts JavaScript funkciju izpildei. Īpaši garie čekņi šajā jomā var norādīt uz neefektīvu kodu. Tu vari ienākt konkrētā modulī, lai redzētu, kura funkcija aizņem visvairāk laika.

Solī 6: Rendering problēmu identificēšana

Vēl viens svarīgs aspekts ir renderēšanas laiks. Šeit tu vari noteikt, kur lielākā daļa laika tiek pavadīta izkārtojumam, gleznošanai un komponēšanai. Pārāk ilgs renderēšanas laiks var novest pie tā, ka lietotāja saskarne reaģē kavēti vai nav plūstoša. Seko līdzi, vai ir daudz izkārtojuma vai gleznošanas notikumu, un, ja nepieciešams, optimizē tos.

Solī 7: Atmiņas izmantošanas analīze

Aizej uz sadaļu “Atmiņa” veiktspējas datu tabulās. Šeit tiks parādīts tava lietotnes atmiņas patēriņš skriptēšanas darbības laikā. Bieži sastopamais veiktspējas problēmu iemesls ir pārmērīgs atmiņas patēriņš, veidojot lielas objektus vai masīvus. Savāršķošanas procesā vari redzēt, cik daudz atmiņas tiešām tiek atbrīvota.

Solī 8: Īss secinājums par rezultātiem

Pēc analīzes veikšanas apkopi secinājumus un plāno nākamos soļus. Apsver, kuras funkcijas visvairāk paļaujas uz veiktspēju, un kur ir iespējami uzlabojumi. Izmanto šos soļus iteratīvi, lai pārliecinātos, ka veiktie grozījumi tiešām uzlabo veiktspēju.

Kopsavilkums

Šajā rokasgrāmatā tu esi iemācījies, kā izmantot Chrome Developer Tools profilēšanas rīku JavaScript koda veiktspējas analīzei. Tu esi redzējis, kā sākt ierakstus, analizēt savāktos datus un identificēt vājās vietas. Pastāvīgi uzraudzot un optimizējot, tu vari būtiski uzlabot savu lietotņu veiktspēju.