JavaScript našumo profiliavimas: „Chrome DevTools“ integracijos įvaldymas

Šiuolaikiniame sparčiame skaitmeniniame pasaulyje svetainių ir žiniatinklio programų našumas yra svarbiausias. Vartotojai tikisi momentinio atsako ir sklandžios patirties, nepriklausomai nuo jų buvimo vietos ar įrenginio. Lėtas įkėlimo laikas ir vangi sąveika gali sukelti nusivylimą, nutrauktas sesijas ir galiausiai neigiamą poveikį jūsų verslui. Būtent čia į pagalbą ateina „JavaScript“ našumo profiliavimas. Šis išsamus vadovas suteiks jums žinių ir įgūdžių, kaip efektyviai panaudoti „Chrome DevTools“ „JavaScript“ našumo optimizavimui.

Kodėl našumo profiliavimas yra svarbus

Našumo profiliavimas – tai jūsų kodo analizės procesas, siekiant nustatyti kliūtis ir tobulintinas sritis. Jis suteikia vertingų įžvalgų apie tai, kaip jūsų programa naudoja išteklius, tokius kaip procesorius (CPU), atmintis ir tinklo pralaidumas. Suprasdami šiuos išteklių vartojimo modelius, galite tiksliai nustatyti našumo problemų priežastis ir įgyvendinti tikslinius sprendimus.

Įsivaizduokite pasaulinę el. prekybos platformą, skirtą vartotojams įvairiuose regionuose su skirtingu interneto greičiu. Blogai optimizuotas „JavaScript“ kodas gali lemti ženkliai skirtingą vartotojo patirtį įvairiose šalyse. Vartotojai regionuose su lėtesniu interneto ryšiu gali susidurti su nepriimtinu įkėlimo laiku, o vartotojai regionuose su greitesniu ryšiu gali nepastebėti jokių problemų. Našumo profiliavimas leidžia jums nustatyti ir pašalinti šiuos skirtumus, užtikrinant nuoseklią ir teigiamą patirtį visiems vartotojams.

Prasto našumo poveikis

• Padidėjęs atmetimo rodiklis: Dėl lėto įkėlimo laiko vartotojai gali palikti jūsų svetainę dar jai pilnai neįsikėlus.
• Sumažėjęs konversijos rodiklis: Lėta ir nereaguojanti svetainė gali atbaidyti vartotojus nuo pirkinių ar kitų norimų veiksmų atlikimo.
• Neigiama vartotojo patirtis: Nusivylę vartotojai rečiau sugrįš į jūsų svetainę ar rekomenduos ją kitiems.
• Žemesni paieškos sistemų reitingai: Paieškos sistemos, tokios kaip „Google“, atsižvelgia į svetainės našumą kaip į reitingavimo faktorių.
• Didesnės infrastruktūros išlaidos: Neefektyvus kodas gali sunaudoti daugiau serverio išteklių, o tai padidina prieglobos ir pralaidumo išlaidas.

Pristatome „Chrome DevTools“ našumo profiliuoklį

„Chrome DevTools“ – tai galingų žiniatinklio kūrimo įrankių rinkinys, integruotas tiesiai į „Chrome“ naršyklę. Jo „Performance“ (Našumo) skydelis suteikia išsamų funkcijų rinkinį „JavaScript“ našumui analizuoti. Išnagrinėkime pagrindinius „Performance“ skydelio komponentus:

• Timeline (Laiko juosta): Vizualus jūsų programos veiklos vaizdas per tam tikrą laiką. Jis rodo, kada įvyksta įvykiai, kiek laiko jie trunka ir kokie ištekliai naudojami.
• CPU Profiler (Procesoriaus profiliuoklis): Nustato funkcijas, kurios sunaudoja daugiausiai procesoriaus laiko.
• Memory Profiler (Atminties profiliuoklis): Aptinka atminties nutekėjimus ir per didelį atminties naudojimą.
• Rendering Statistics (Vaizdavimo statistika): Suteikia įžvalgų apie tai, kaip jūsų programa atvaizduoja vartotojo sąsają.
• Network Panel (Tinklo skydelis): Analizuoja tinklo užklausas ir atsakymus.

Darbo su „Chrome DevTools“ našumo profiliavimu pradžia

1. Atidarykite „Chrome DevTools“: Dešiniuoju pelės mygtuku spustelėkite savo tinklalapį ir pasirinkite „Inspect“ (Tikrinti) arba paspauskite Ctrl+Shift+I („Windows“/„Linux“) arba Cmd+Option+I („macOS“).
2. Pereikite į „Performance“ (Našumo) skydelį: Spustelėkite skirtuką „Performance“.
3. Pradėkite įrašymą: Spustelėkite įrašymo mygtuką (apskritimą) viršutiniame kairiajame „Performance“ skydelio kampe.
4. Sąveikaukite su savo programa: Atlikite veiksmus, kuriuos norite profiliuoti.
5. Sustabdykite įrašymą: Dar kartą spustelėkite įrašymo mygtuką, kad sustabdytumėte profiliavimo sesiją.

Sustabdžius įrašymą, „Chrome DevTools“ apdoros surinktus duomenis ir parodys išsamią jūsų programos našumo laiko juostą.

Našumo laiko juostos analizė

Našumo laiko juosta suteikia gausybę informacijos apie jūsų programos veiklą. Išnagrinėkime pagrindinius laiko juostos elementus:

• Frames (Kadrai): Kiekvienas kadras atspindi vieną vartotojo sąsajos atnaujinimą. Idealiu atveju jūsų programa turėtų atvaizduoti 60 kadrų per sekundę (FPS), kad užtikrintų sklandžią ir greitai reaguojančią patirtį.
• Main Thread (Pagrindinė gija): Pagrindinėje gijoje vykdoma didžioji dalis jūsų „JavaScript“ kodo. Didelis procesoriaus panaudojimas pagrindinėje gijoje gali rodyti našumo kliūtis.
• Raster (Rasterizavimas): Vektorinės grafikos konvertavimo į pikselių pagrindu sukurtą vaizdą procesas. Lėtas rasterizavimas gali lemti trūkinėjantį slinkimą ir animacijas.
• GPU (Vaizdo plokštė): Grafikos apdorojimo blokas yra atsakingas už vartotojo sąsajos atvaizdavimą. Didelis GPU panaudojimas gali rodyti našumo problemas, susijusias su grafikos atvaizdavimu.

Liepsnos diagramos supratimas

Liepsnos diagrama (angl. flame chart) yra hierarchinis iškvietimų dėklo (angl. call stack) vizualizavimas profiliavimo sesijos metu. Kiekviena juosta liepsnos diagramoje atspindi funkcijos iškvietimą. Juostos plotis rodo toje funkcijoje praleistą laiką. Nagrinėdami liepsnos diagramą, galite greitai nustatyti funkcijas, kurios sunaudoja daugiausiai procesoriaus laiko.

Pavyzdžiui, įsivaizduokite, kad profiliuojate vaizdų apdorojimo žiniatinklio programą, kuri leidžia vartotojams įkelti nuotraukas ir taikyti filtrus. Jei liepsnos diagrama rodo, kad tam tikra vaizdo filtravimo funkcija (galbūt naudojanti „WebAssembly“) sunaudoja didelį kiekį procesoriaus laiko, tai rodo, kad optimizavus šią funkciją galima pasiekti reikšmingą našumo pagerėjimą.

Našumo kliūčių nustatymas

Kai suprasite našumo laiko juostą ir liepsnos diagramą, galite pradėti nustatinėti našumo kliūtis. Štai keletas įprastų sričių, kurias verta ištirti:

• Ilgai veikiančios funkcijos: Funkcijos, kurių vykdymas trunka ilgai, gali blokuoti pagrindinę giją ir sukelti vartotojo sąsajos nereagavimą.
• Perteklinis DOM manipuliavimas: Dažni Dokumento Objekto Modelio (DOM) atnaujinimai gali būti brangūs. Sumažinkite DOM manipuliavimą grupuodami atnaujinimus ir naudodami tokias technikas kaip virtualus DOM.
• Atminties nutekėjimai: Atminties nutekėjimai įvyksta, kai jūsų programa skiria atmintį, bet nepavyksta jos atlaisvinti, kai ji nebėra reikalinga. Laikui bėgant atminties nutekėjimai gali priversti jūsų programą sunaudoti per daug atminties ir sulėtėti.
• Neoptimizuoti vaizdai: Dideli, neoptimizuoti vaizdai gali ženkliai padidinti įkėlimo laiką. Optimizuokite vaizdus juos suspausdami ir naudodami tinkamus vaizdų formatus (pvz., WebP).
• Trečiųjų šalių scenarijai: Trečiųjų šalių scenarijai, tokie kaip analitikos stebėjimo įrankiai ir reklamos bibliotekos, gali paveikti našumą. Įvertinkite trečiųjų šalių scenarijų poveikį našumui ir apsvarstykite galimybę juos pašalinti ar optimizuoti, jei reikia.

Praktinis pavyzdys: lėtai įsikraunančios svetainės optimizavimas

Panagrinėkime hipotetinį scenarijų: naujienų svetainė, kuri susiduria su lėtu įkėlimo laiku. Atlikę svetainės profiliavimą su „Chrome DevTools“, nustatote šias kliūtis:

• Dideli, neoptimizuoti vaizdai: Svetainėje naudojami didelės raiškos vaizdai, kurie nėra tinkamai suspausti.
• Perteklinis DOM manipuliavimas: Svetainė dažnai atnaujina DOM, kad rodytų dinamišką turinį.
• Trečiosios šalies analitikos scenarijus: Svetainėje naudojamas trečiosios šalies analitikos scenarijus, kuris lėtina įkėlimo procesą.

Norėdami pašalinti šias kliūtis, galite imtis šių veiksmų:

1. Optimizuoti vaizdus: Suspauskite vaizdus naudodami tokius įrankius kaip „ImageOptim“ ar „TinyPNG“. Konvertuokite vaizdus į WebP formatą geresniam suspaudimui ir kokybei.
2. Sumažinti DOM manipuliavimą: Grupuokite DOM atnaujinimus ir naudokite tokias technikas kaip virtualus DOM, kad sumažintumėte DOM operacijų skaičių.
3. Atidėti trečiųjų šalių scenarijus: Įkelkite trečiosios šalies analitikos scenarijų asinchroniškai arba atidėkite jo vykdymą, kol bus įkeltas pagrindinis turinys.

Įgyvendinę šiuos optimizavimus, galite ženkliai pagerinti svetainės įkėlimo laiką ir suteikti geresnę vartotojo patirtį.

Pažangūs profiliavimo metodai

Be anksčiau aptartų pagrindinių profiliavimo metodų, „Chrome DevTools“ siūlo daugybę pažangių funkcijų išsamiai našumo analizei:

• Atminties profiliavimas: Naudokite „Memory“ (Atminties) skydelį, kad aptiktumėte atminties nutekėjimus ir nustatytumėte per didelio atminties naudojimo sritis.
• Vaizdavimo statistika: Analizuokite vaizdavimo statistiką, kad nustatytumėte kliūtis atvaizdavimo procese.
• Tinklo droseliavimas: Imituokite skirtingas tinklo sąlygas, kad išbandytumėte savo programos našumą įvairiais scenarijais. Tai ypač naudinga, kai orientuojamasi į vartotojus regionuose su lėtesniu interneto ryšiu, pavyzdžiui, kai kuriose besivystančiose šalyse, kur 3G ar net 2G ryšys vis dar paplitęs.
• Procesoriaus droseliavimas: Imituokite skirtingus procesoriaus greičius, kad išbandytumėte savo programos našumą mažesnės galios įrenginiuose.
• Ilgos užduotys: Nustatykite ilgas užduotis, kurios blokuoja pagrindinę giją.
• User Timing API: Naudokite „User Timing“ API, kad išmatuotumėte konkrečių kodo sekcijų našumą.

Išsami atminties profiliavimo analizė

„Memory“ skydelis „Chrome DevTools“ suteikia galingus įrankius atminties naudojimui analizuoti. Jį galite naudoti, norėdami:

• Daryti krūvos momentines nuotraukas (Heap Snapshots): Užfiksuoti dabartinę jūsų programos atminties būseną.
• Palyginti krūvos momentines nuotraukas: Nustatyti atminties nutekėjimus lyginant momentines nuotraukas, padarytas skirtingu laiku.
• Įrašyti paskirstymo laiko juostas (Allocation Timelines): Stebėti atminties paskirstymą laikui bėgant, kad nustatytumėte per didelio atminties naudojimo sritis.

Pavyzdžiui, jei kuriate vieno puslapio programą (SPA) su sudėtingomis duomenų struktūromis, atminties nutekėjimai gali būti didelė problema. „Memory“ skydelis gali padėti jums nustatyti šiuos nutekėjimus, parodydamas, kurie objektai nėra surenkami šiukšlių rinkiklio (angl. garbage collected) ir kaupiasi atmintyje. Analizuodami paskirstymo laiko juostas, galite tiksliai nustatyti kodą, kuris yra atsakingas už šių objektų kūrimą, ir įgyvendinti pataisymus, kad išvengtumėte nutekėjimų.

Geriausios „JavaScript“ našumo optimizavimo praktikos

Štai keletas geriausių praktikų, skirtų „JavaScript“ našumui optimizuoti:

• Sumažinkite DOM manipuliavimą: Grupuokite atnaujinimus ir naudokite tokias technikas kaip virtualus DOM.
• Optimizuokite vaizdus: Suspauskite vaizdus ir naudokite tinkamus vaizdų formatus.
• Atidėkite trečiųjų šalių scenarijus: Įkelkite trečiųjų šalių scenarijus asinchroniškai arba atidėkite jų vykdymą.
• Naudokite kodo skaidymą (Code Splitting): Suskaidykite savo kodą į mažesnes dalis, kurias galima įkelti pagal poreikį.
• Talpyklokite duomenis (Caching): Talpyklokite dažnai pasiekiamus duomenis, kad išvengtumėte nereikalingų skaičiavimų.
• Naudokite Web Workers: Perkelkite skaičiavimams imlias užduotis į „Web Workers“, kad neblokuotumėte pagrindinės gijos.
• Venkite atminties nutekėjimų: Atlaisvinkite atmintį, kai ji nebėra reikalinga.
• Naudokite turinio pristatymo tinklą (CDN): Paskirstykite savo statinius išteklius per CDN, kad pagerintumėte įkėlimo laiką vartotojams visame pasaulyje.
• Sumažinkite ir suspauskite savo kodą: Sumažinkite savo „JavaScript“ ir CSS failų dydį juos sumažindami (minifying) ir suspausdami (compressing).

Pasaulinė CDN strategija

CDN naudojimas yra labai svarbus norint greitai ir efektyviai pristatyti turinį vartotojams visame pasaulyje. CDN saugo jūsų svetainės statinių išteklių (vaizdų, CSS, „JavaScript“) kopijas serveriuose, esančiuose įvairiose geografinėse vietose. Kai vartotojas paprašo ištekliaus, CDN automatiškai jį pateikia iš serverio, kuris yra arčiausiai vartotojo, taip sumažinant delsą ir pagerinant įkėlimo laiką. Norėdami pasiekti tikrai pasaulinį mastą, apsvarstykite kelių CDN (multi-CDN) metodą, naudodami kelis CDN teikėjus platesnei aprėpčiai ir dubliavimui užtikrinti.

Išvada

„JavaScript“ našumo profiliavimas yra esminis įgūdis bet kuriam žiniatinklio kūrėjui. Įvaldę „Chrome DevTools“ ir taikydami šiame vadove aptartus metodus bei geriausias praktikas, galite ženkliai pagerinti savo žiniatinklio programų našumą ir suteikti geresnę vartotojo patirtį vartotojams visame pasaulyje. Atminkite, kad našumo optimizavimas yra nuolatinis procesas. Reguliariai profiliuokite savo kodą ir stebėkite jo našumą, kad nustatytumėte ir pašalintumėte bet kokias naujas kliūtis, kurios gali atsirasti. Teikdami pirmenybę našumui, galite užtikrinti, kad jūsų žiniatinklio programos būtų greitos, reaguojančios ir malonios naudoti, nepriklausomai nuo to, kur yra jūsų vartotojai ar kokius įrenginius jie naudoja.

Šis vadovas suteikia tvirtą pagrindą jūsų našumo profiliavimo kelionei. Eksperimentuokite su skirtingais įrankiais ir metodais ir nebijokite gilintis į detales. Kuo daugiau suprasite, kaip veikia jūsų kodas, tuo geriau būsite pasirengę jį optimizuoti maksimaliam našumui. Nuolat mokykitės, eksperimentuokite ir stumkite „JavaScript“ našumo galimybių ribas.

Papildomi šaltiniai

• „Chrome DevTools“ dokumentacija
• Web.dev Measure
• Front-End Performance Checklist 2018