Vadovas naudojimuisi „Chrome Profiler“ įrankiu veiksmingumui optimizuoti

Šiame vadove parodysiu, kaip naudoti Profiler įrankį „Chrome“ kūrėjų įrankiuose, kad galėtum identifikuoti ir optimizuoti našumo trūkumus savo JavaScript kode. Optimizuotas kodas ne tik pagerina vartotojo patirtį, bet taip pat gali ženkliai sumažinti jūsų svetainės įkėlimo laiką. Baigę studijuoti šį vadovą, galėsite geriau analizuoti savo interneto programas, atpažinti silpnybes ir imtis priemonių jas pagerinti.

Svarbiausiai išvados

• Profileris yra esminis našumo interneto programose analizės įrankis.
• Gali gauti išsamesnę informaciją apie scenarijų vykdymą, vaizdavimą ir atminties naudojimą.
• Atlikęs tikslines įrašus, galėsi įvertinti savo programos veikimą skirtingose naudojimo scenarijose.

Žingsnis po žingsnio vadovas

Žingsnis 1: Prieiga prie Profilerio įrankio

Naudodamas Profilerio įrankį „Chrome“ kūrėjų įrankiuose, pirma atidaryk kūrėjų įrankius, paspaudęs F12 arba pasirinkęs „Tirti“ spustelėjus dešiniuoju pelės mygtuku ant puslapio. Viršutinėje juostoje rasite skirtingus skirtukus. Spustelėkite skirtuką „Našumas“, kuris pagal nutylėjimą yra šalia skirtuko „Tinklas“.

Žingsnis 2: Pradėti įrašą

Norėdamas pradėti našumo įrašą, galite arba perkrauti puslapį, kai įrašas yra aktyvus, arba naudoti rankinį įrašymą. Norėdamas nedelsiant pradėti profilį, spustelėkite mygtuką „Pradėti profilį ir perkrauti puslapį“. Tai yra ypač naudinga, jei turite sudėtingą puslapį, kuriame yra daug scenarijų, kuriuos reikia optimizuoti.

Žingsnis 3: Sustabdyti įrašą

Kai manai, kad surinkote pakankamai duomenų, įrašą galite sustabdyti rankiniu būdu. Tiesiog spustelėkite Stabdyti mygtuką našumo skirtuke. Dabar pamatysite vizualų apžvalgą apie našumo duomenis, surinktus įkraunant ir vaizduojant jūsų puslapį.

Žingsnis 4: Leidžiamųjų duomenų analizė

Kai įrašas sustabdytas, matysite įvairių veiklų laiko eiga vaizdinę išraišką. Čia pateikiama skirtingų veiksmų, įskaitant įkrovimą, vaizdavimą ir puslapio brėžimą, laiko eiga. Galite pritaikyti peržiūrą priartindami, kad gautumėte išsamesnės informacijos arba analizuotumėte specifinius laiko tarpus.

Žingsnis 5: Išsamesnė scenarijų laiko analizė

Norint išsamesnai analizuoti našumo duomenis, pažiūrėkite į „Scenarijai“ sritį, kuri parodo, kiek laiko buvo skiriama vykdant „JavaScript“ funkcijas. Ypač ilgi laikai šioje srityje gali rodyti į neefektyvų kodą. Galite patekti į konkretų modulį, kad pamatytumėte, kuri funkcija užima daugiausiai laiko.

Žingsnis 6: Vaizdavimo problemų identifikavimas

Kitas svarbus aspektas yra vaizdavimo laikas. Čia galite nustatyti, kur didžiausias laikas buvo skirtas išdėstymui, tapybai ir komponavimui. Per ilgas vaizdavimas gali sukelti vėluojančią vartotojo sąsają arba neplaukiantį rodymą. Atkreipkite dėmesį, ar yra daug išdėstymo ar tapybos įvykių ir gebeate juos optimizuoti, jei reikia.

Žingsnis 7: Atminties naudojimo analizė

Pereikite į „Atmintis“ sritį „Našumo“ duomenyse. Čia matysite savo programos atminties naudojimą vykstant scenarijui. Dažna našumo problemos priežastis yra per didelis atminties naudojimas, kurdami didelius objektus ar masyvus. „Garbage Collection“ skyriuje galite matyti, kiek atminties iš tikrųjų yra atlaisvinama.

Žingsnis 8: Trumpas rezultatų suvestinė

Atlikęs analizę, surinkite išvadas ir suplanuokite tolimesnius žingsnius. Apsvarstykite, kurie funkcijos kainuoja daugiausiai šaltinių ir kur yra optimizavimo galimybės. Naudinga šiuos žingsnius atlikti iteratyviai, kad įsitikintumėte, jog pakeitimai iš tikrųjų pagerina našumą.

Santrauka

Šiame vadove išmokei, kaip naudoti „Profiler“ įrankį „Chrome“ kūrėjo įrankiuose „JavaScript“ kodo veikimo analizei atlikti. Mačiai, kaip pradėti įrašus, analizuoti surinktus duomenis ir atpažinti silpnybes. Nuolat stebėdami ir optimizuodami, gali ženkliai pagerinti savo programų našumą.