Chromo kūrėjo įrankiai: raktas į fragmentus ir laiko matavimą

Šioje instrukcijoje gausi išsamų apžvalgą apie Snippets naudojimą ir laiko matavimo funkciją Chrome kūrėjų įrankiuose. Snippets leidžia tau kurti perpanaudojamus kodo fragmentus, kurie gali tau suteikti vertingų paslaugų programuojant ir testuojant savo kodą. Be to, parodysime tau, kaip matuoti JavaScript kodo vykdymo laiką, kad galėtum optimizuoti savo programų našumą. Tokios funkcijos gali būti lemiamos, siekiant geriau suprasti savo JavaScript kūrimo aplinką.

Svarbiausios išvados

• Snippets yra perpanaudojami kodo fragmentai, kurie saugomi „Chrome kūrėjų įrankiuose“.
• Gali kurti, redaguoti ir vykdyti Snippets, kad automatizuotum dažnus uždavinius.
• Su funkcijomis console.time() ir console.timeEnd() gali matuoti kodo dalių vykdymo laiką.
• Teisingas time ir time end kvietimų apdorojimas yra lemiamas, norint gauti teisingus matavimo rezultatus.

Žingsnis po žingsnio instrukcija

Snippets kūrimas ir tvarkymas

Pirmiausia pažiūrėkime, kaip galite kurti ir tvarkyti Snippets „Chrome kūrėjų įrankiuose“.

Norėdami pasiekti Snippets, atidarykite „Chrome kūrėjų įrankius“, spustelėkite skirtuką „Šaltiniai“ ir ieškokite Snippets skydelio. Snippets skydelyje galite pasiekti arba prisitaikydami peržiūrai, arba naudodamiesi meniu.

Čia galite kurti naujus Snippets. Spustelėkite „Naujas Snippet“, kad sukurtumėte naują Snippet. Jums bus prašoma įvesti pavadinimą savo „Snippet“; pavadinkite jį pavyzdžiui „Test“.

Kai pavadinote „Snippet“, galite iš karto jį redaguoti. Čia galite įrašyti norimą JavaScript kodą, kuris bus vykdomas vykdant „Snippet“.

Pakeitimai bus laikinai išsaugoti, kol juos išsaugosite, spausdami „Ctrl + S“ (arba „Command + S“ „Mac“ kompiuteryje). Atkreipkite dėmesį, kad Snippets saugomi nepriklausomai nuo aplankytos svetainės, tai reiškia, kad Snippets galite naudoti kiekvienoje svetainėje.

Norėdami vykdyti Snippet, tiesiog spustelėkite žaidimo simbolį arba naudokite „Ctrl + Enter“ (arba „Command + Enter“ „Mac“ kompiuteryje) spartintuvą.

Jei vykdote „Snippet“, rezultatus tiesiogiai gaunate „Konsolės“ srities „Developer Tools“.

Laiko matavimas naudojant console.time() ir console.timeEnd()

Dabar, kai sėkmingai sukūrei Snippets, pažiūrėkime, kaip naudojant funkcijas console.time() ir console.timeEnd() matuoti JavaScript kodų našumą.

Laiko matavimą pradėti galite įdėdami console.time('Ciklas') ties kodo dalyku, kurį norite matuoti. Užtikrinkite, kad tie patys simboliai būtų naudojami console.timeEnd('Ciklas') kodo pabaigoje. Tarp jų praeis laikas išreikštas milisekundėmis.

Jeigu abu simboliai nesutampa arba pamiršote iškviesti timeEnd funkcijos, gausite įspėjimą.

Pavyzdys laiko matavimui

Paimkime paprastą pavyzdį, kai vykdote ciklą per 100 000 elementų ir juos įrašote į masyvą.

Prieš ciklą įrašykite console.time('Ciklas') ir po ciklo įrašykite console.timeEnd('Ciklas'). Tai leis jums matuoti laiką, kurį ciklas turi vykdyti.

Kuomet išbandysi šią funkcionalumą vieną kartą, pamatysi, kaip laiko matavimas padės išsiaiškinti ir optimizuoti Engpasus.

Svarbūs naudojimo patarimai

Atkreipkite dėmesį, kad console.time() ir console.timeEnd() naudojimas nerekomenduojamas produkcinėse aplinkose. Šios funkcijos turėtų būti naudojamos tik testavimui, nes jos gali būti skirtingai palaikomos įvairiose JavaScript aplinkose.

Išvados apie naudojimą Snippets ir laiko matavimo

Tu dabar išmokei pagrindus, kaip naudoti Snippets ir console.time() bei console.timeEnd() metodus Chrome Naršyklės kūrėjo įrankiuose. Šios funkcijos yra galingos, padedančios darbuotis efektyviau ir geriau suprasti tavo programų veiklos efektyvumą.

Santrauka

Galiau pabrėžti, kad Snippets ir laiko matavimo naudojimas Chrome Naršyklės kūrėjo įrankiuose suteikia tau vertingus įrankius, padedančius padidinti tavo kūrimo efektyvumą ir giliau suprasti tavo JavaScript kodų vykdymo laikus.