JavaScripti Performance API: Käitusaegsete mõõdikute kogumise valdamine

Tänapäeva kiires digimaailmas on veebisaitide ja -rakenduste jõudlus esmatähtis. Kasutajad ootavad kohest reageerimisvõimet ja sujuvaid kogemusi. Aeglased laadimisajad või loid interaktsioonid võivad põhjustada frustratsiooni ja lõpuks lehelt lahkumist. Optimaalse jõudluse tagamiseks vajavad arendajad tööriistu oma JavaScripti koodi käituskäitumise mõõtmiseks, analüüsimiseks ja parandamiseks. JavaScripti Performance API pakub võimsat ja standardiseeritud viisi käitusaegsete mõõdikute kogumiseks, võimaldades arendajatel tuvastada jõudluse kitsaskohti ja optimeerida oma rakendusi sujuvama kasutajakogemuse nimel.

Mis on JavaScripti Performance API?

JavaScripti Performance API on tänapäevastes veebibrauserites saadaolev liideste ja meetodite kogum, mis võimaldab arendajatel pääseda juurde ja mõõta erinevaid jõudlusega seotud andmeid. See annab ülevaate käituskäitumise eri aspektidest, sealhulgas:

• Navigeerimise ajastus (Navigation Timing): Mõõdab lehe laadimise eri etappideks kulunud aega, näiteks DNS-i otsing, TCP-ühendus, päringu ja vastuse ajad.
• Ressursside ajastus (Resource Timing): Pakub detailset ajastusteavet lehe laaditud üksikute ressursside, näiteks piltide, skriptide ja stiililehtede kohta.
• Kasutaja ajastus (User Timing): Võimaldab arendajatel määratleda ja mõõta kohandatud jõudlusmõõdikuid, mis on spetsiifilised nende rakenduse loogikale.
• Pikad ülesanded (Long Tasks): Tuvastab ülesanded, mis blokeerivad põhilõime pikemaks ajaks, põhjustades potentsiaalselt kasutajaliidese hangumist.
• Mälu mõõtmine (Memory Measurement): (Saadaval mõnedes brauserites) Pakub teavet lehe mälukasutuse kohta.
• Elemendi ajastus (Element Timing): Pakub ajastusmõõdikuid selle kohta, millal konkreetsed HTML-elemendid kasutajale nähtavaks muutuvad.
• Sündmuse ajastus (Event Timing): Mõõdab sündmuste, nagu klikkide, klahvivajutuste ja muude kasutaja interaktsioonide kestust.

Neid võimalusi kasutades saavad arendajad sügavuti aru, kuidas nende JavaScripti kood reaalsetes olukordades toimib, ja tuvastada optimeerimist vajavad valdkonnad.

Performance API põhikomponendid

1. performance objekt

performance objekt on peamine sisenemispunkt Performance API-le juurdepääsemiseks. See on window objekti omadus ja pakub juurdepääsu erinevatele meetoditele ja omadustele jõudlusandmete mõõtmiseks ja analüüsimiseks. Kõige sagedamini kasutatavad omadused on performance.timing ja performance.now().

2. performance.now()

performance.now() tagastab kõrge resolutsiooniga ajatempli (millisekundites), mis tähistab dokumendi navigeerimise algusest möödunud aega. See on aluseks koodi täitmise kestuse mõõtmisel. Erinevalt Date.now()-st on performance.now() monotoonne, mis tähendab, et süsteemi kella kohandused seda ei mõjuta.

Näide: funktsiooni täitmisaja mõõtmine

            const startTime = performance.now();
// Code to be measured
for (let i = 0; i < 1000000; i++) {
  // Perform some operation
}
const endTime = performance.now();
const executionTime = endTime - startTime;
console.log(`Execution time: ${executionTime} milliseconds`);

            

              
                Copy
              
            
          

3. Jõudluse ajatelg (Performance Timeline)

Jõudluse ajatelg on lehe eluea jooksul toimuvate jõudlusega seotud sündmuste register. See sisaldab kirjeid navigeerimise, ressursside, kasutaja ajastuse ja muu kohta. Jõudluse ajateljele pääseb juurde selliste meetoditega nagu performance.getEntries(), performance.getEntriesByType() ja performance.getEntriesByName().

4. PerformanceEntry liides

Iga kirje jõudluse ajateljel on esindatud PerformanceEntry objektiga. See liides pakub omadusi, mis kirjeldavad jõudlussündmust, näiteks selle nimi, algusaeg, kestus ja kirje tüüp. Erinevatel jõudluskirjete tüüpidel on lisaks oma sündmuse tüübile spetsiifilised omadused.

Käitusaegsete mõõdikute kogumine ja analüüsimine

JavaScripti Performance API pakub mitmesuguseid meetodeid käitusaegsete mõõdikute kogumiseks ja analüüsimiseks. Siin on mõned levinud kasutusjuhud:

1. Lehe laadimisaja mõõtmine

performance.timing objekt pakub üksikasjalikku teavet lehe laadimise eri etappide kohta. Saate neid andmeid kasutada kitsaskohtade tuvastamiseks ja laadimisprotsessi optimeerimiseks.

Näide: DOMContentLoaded sündmuse aja arvutamine

            window.addEventListener('load', () => {
  const loadTime = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;
  console.log(`DOMContentLoaded event time: ${loadTime} milliseconds`);
});

            

              
                Copy
              
            
          

Tulemuste tõlgendamine: Kõrge domContentLoadedEventEnd väärtus võib viidata sellele, et brauser kulutab palju aega JavaScripti koodi parsimisele ja käivitamisele, DOM-i renderdamisele või ressursside laadimise ootamisele. Üksikute ressursside ajastuste analüüsimine (vt allpool) aitab kindlaks teha konkreetsed ressursid, mis viivitusi põhjustavad.

Optimeerimisstrateegiad: Võimalikud lahendused hõlmavad mittekriitilise JavaScripti täitmise edasilükkamist, CSS-i edastamise optimeerimist ja DOM-elementide arvu minimeerimist.

2. Ressursside laadimisaegade mõõtmine

Resource Timing API pakub detailset ajastusteavet iga lehe laaditud ressursi kohta. See võimaldab teil tuvastada aeglaselt laadivaid ressursse ja optimeerida nende edastamist.

Näide: ressursside ajastusteabe hankimine

            const resourceEntries = performance.getEntriesByType('resource');

resourceEntries.forEach(entry => {
  console.log(`Resource: ${entry.name}`);
  console.log(`  Duration: ${entry.duration} milliseconds`);
  console.log(`  Fetch Start: ${entry.fetchStart}`);
  console.log(`  Response End: ${entry.responseEnd}`);
});

            

              
                Copy
              
            
          

Tulemuste tõlgendamine: Iga ressursikirje duration omaduse uurimine aitab tuvastada aeglaselt laadivaid ressursse. Kõrge duration võib viidata võrgu latentsusele, suurtele failidele või ebaefektiivsele serveripoolsele töötlemisele.

Optimeerimisstrateegiad: Potentsiaalsed lahendused hõlmavad piltide tihendamist, JavaScripti ja CSS-failide minimeerimist, sisuedastusvõrgu (CDN) kasutamist ja serveripoolse vahemälu optimeerimist.

Globaalne näide: Veebisait, mis pakub kõrge resolutsiooniga pilte piiratud ribalaiusega piirkondade kasutajatele (nt Kagu-Aasia, Aafrika osad), võib nende kasutajate jaoks kogeda oluliselt aeglasemaid laadimisaegu. Reageerivate piltide rakendamine, mis kohanduvad kasutaja ühenduse kiiruse ja ekraani suurusega, võib jõudlust oluliselt parandada.

3. Kasutaja interaktsioonide mõõtmine

User Timing API võimaldab teil määratleda ja mõõta kohandatud jõudlusmõõdikuid, mis on spetsiifilised teie rakenduse loogikale. See on kasulik kriitiliste kasutaja interaktsioonide, näiteks vormide esitamise, otsingupäringute ja navigeerimisüleminekute jõudluse jälgimiseks.

Näide: vormi esitamiseks kuluva aja mõõtmine

            const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  performance.mark('formSubmitStart');
  // Simulate form submission delay
  setTimeout(() => {
    performance.mark('formSubmitEnd');
    performance.measure('formSubmitDuration', 'formSubmitStart', 'formSubmitEnd');

    const measure = performance.getEntriesByName('formSubmitDuration')[0];
    console.log(`Form submission duration: ${measure.duration} milliseconds`);
  }, 1000); //Simulate network request taking 1 second

  event.preventDefault();
});

            

              
                Copy
              
            
          

Tulemuste tõlgendamine: Kõrge formSubmitDuration võib viidata aeglasele serveripoolsele töötlemisele, võrgu latentsusele või ebaefektiivsele kliendipoolsele valideerimisele.

Optimeerimisstrateegiad: Potentsiaalsed lahendused hõlmavad serveripoolse koodi optimeerimist, võrgupäringute vähendamist ja kliendipoolse valideerimise parandamist.

4. Pikkade ülesannete tuvastamine

Pikad ülesanded on ülesanded, mis blokeerivad põhilõime pikemaks ajaks (tavaliselt üle 50 millisekundi), põhjustades potentsiaalselt kasutajaliidese hangumist ja halba kasutajakogemust. Long Tasks API võimaldab teil neid ülesandeid tuvastada ja oma koodi optimeerida nende vältimiseks.

Näide: pikkade ülesannete tuvastamine

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`Long task: ${entry.name}`);
    console.log(`  Duration: ${entry.duration} milliseconds`);
  });
});

observer.observe({ entryTypes: ['longtask'] });

// Simulate a long task
setTimeout(() => {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  console.log(`Long task complete: ${sum}`);
}, 0);

            

              
                Copy
              
            
          

Tulemuste tõlgendamine: Pika ülesande kestus toob esile koodi, mis takistab brauseril kasutajaliidest sujuvalt uuendamast.

Optimeerimisstrateegiad: Koodi tükeldamine (code splitting), viivitamine (debouncing), läbilaskvuse piiramine (throttling) ja ülesannete delegeerimine veebitöötajatele (web workers) on strateegiad pikkade ülesannete kestuse vähendamiseks.

5. Elemendi nähtavuse mõõtmine

Element Timing API võimaldab teil mõõta, millal konkreetsed HTML-elemendid kasutajale nähtavaks muutuvad. See on eriti kasulik kriitiliste elementide, näiteks avalehe piltide (hero images) või oluliste sisuosade laadimise ja renderdamise jõudluse jälgimiseks.

Näide: elemendi nähtavusaja mõõtmine

            <img src="hero-image.jpg" elementtiming="hero-image" id="heroImage">

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name === 'hero-image') {
      console.log(`Hero image render start: ${entry.renderStart} milliseconds`);
    }
  });
});

observer.observe({ type: 'element', buffered: true });

            

              
                Copy
              
            
          

Tulemuste tõlgendamine: Hiline renderStart väärtus näitab, et elemendi nähtavaks muutumine võtab kaua aega, mis võib olla tingitud aeglastest laadimis- või renderdamisprotsessidest.

Optimeerimisstrateegiad: Optimeerige piltide tihendamist, kasutage laiska laadimist (lazy loading) ja seadke prioriteediks kriitiliste ressursside laadimine.

6. Sündmuse latentsuse mõõtmine

Event Timing API mõõdab aega, mis kulub sündmusekuulajate (event listeners) täitmiseks. See on väärtuslik sündmuste käsitlejate tuvastamiseks, mis võivad kasutaja interaktsioone aeglustada.

Näide: kliki sündmuse latentsuse mõõtmine

            <button id="myButton">Click Me</button>

const button = document.getElementById('myButton');

button.addEventListener('click', (event) => {
  performance.mark('clickStart');
  // Simulate some processing
  for (let i = 0; i < 1000000; i++) {
    // Perform some operation
  }
  performance.mark('clickEnd');
  performance.measure('clickDuration', 'clickStart', 'clickEnd');

  const measure = performance.getEntriesByName('clickDuration')[0];
  console.log(`Click event duration: ${measure.duration} milliseconds`);
});

            

              
                Copy
              
            
          

Tulemuste tõlgendamine: Pikk clickDuration näitab, et sündmusekäsitleja täitmine võtab liiga kaua aega, põhjustades potentsiaalselt viivitust kasutajaliidese reageerimisel.

Optimeerimisstrateegiad: Optimeerige sündmusekäsitleja koodi, kasutage sündmusekuulajate puhul viivitamist (debounce) või läbilaskvuse piiramist (throttle) ja delegeerige raske töötlus veebitöötajatele.

Performance API kasutamise parimad praktikad

• Kasutage täpseks ajamõõtmiseks performance.now(). See pakub suuremat täpsust ja on monotoonne, mis teeb selle ideaalseks koodi täitmisaja mõõtmiseks.
• Kasutage jõudlussündmuste analüüsimiseks jõudluse ajatelge. Jõudluse ajatelg pakub põhjalikku ülevaadet lehe eluea jooksul toimuvatest jõudlusega seotud sündmustest.
• Kasutage kohandatud jõudlusmõõdikute määratlemiseks User Timing API-d. See võimaldab teil jälgida kriitiliste kasutaja interaktsioonide ja rakendusespetsiifilise loogika jõudlust.
• Jälgige jõudlust reaalsetes keskkondades. Kasutage tegelikelt kasutajatelt jõudlusandmete kogumiseks tööriistu nagu Google Analytics, New Relic või Sentry. See annab teile täpsema pildi teie rakenduse jõudlusest.
• Seadke jõudluseelarved ja jälgige edusamme ajas. Määratlege oma rakendusele jõudluseesmärgid ja jälgige oma edusamme. See aitab teil keskenduda jõudluse optimeerimisele ja tagada, et teie rakendus vastab kasutajate ootustele.
• Kombineerige Performance API teiste silumistööriistadega. Brauseri arendajatööriistad pakuvad võimsaid võimalusi JavaScripti koodi profileerimiseks ja silumiseks. Nende tööriistade kombineerimine Performance API-ga võib anda veelgi sügavamaid teadmisi jõudluse kitsaskohtadest.

Tööriistad ja teegid jõudluse jälgimiseks

Kuigi Performance API pakub toorandmeid, on mitmeid tööriistu ja teeke, mis aitavad teil neid andmeid tõhusamalt analüüsida ja visualiseerida:

• Google Lighthouse: Automatiseeritud tööriist veebisaidi jõudluse, ligipääsetavuse ja SEO auditeerimiseks. See kasutab mõõdikute kogumiseks Performance API-d ja pakub rakendatavaid soovitusi parandusteks.
• WebPageTest: Tasuta veebisaidi kiiruse testimise tööriist, mis võimaldab teil testida oma veebisaidi jõudlust erinevatest asukohtadest ja brauseritest.
• New Relic Browser: Põhjalik jõudluse jälgimise tööriist, mis pakub reaalajas ülevaadet veebisaidi jõudlusest, sealhulgas lehe laadimisaegadest, JavaScripti vigadest ja kasutajakogemuse mõõdikutest.
• Sentry: Veajälgimis- ja jõudluse monitooringu platvorm, mis aitab teil tuvastada ja lahendada probleeme oma JavaScripti koodis.
• Perfume.js: Väike avatud lähtekoodiga teek, mis pakub lihtsat API-d jõudlusmõõdikute kogumiseks ja raporteerimiseks.

Kokkuvõte

JavaScripti Performance API on asendamatu tööriist igale veebiarendajale, kes soovib luua suure jõudlusega veebirakendusi. Kasutades Performance API võimalusi, saate sügavuti mõista oma rakenduse käituskäitumist, tuvastada jõudluse kitsaskohti ja optimeerida oma koodi sujuvama kasutajakogemuse nimel. Nende jõudluse jälgimise tehnikate rakendamine ja koodi pidev täiustamine toob kaasa kiiremad ja reageerimisvõimelisemad veebisaidid ja -rakendused, mis rõõmustavad kasutajaid üle maailma. Ärge unustage veebirakenduse jõudluse optimeerimisel arvestada erinevate võrgutingimuste ja seadmete võimekusega, et tagada kõigile ühtlane kasutajakogemus.