JavaScript Performance API: Ajoaikaisten mittareiden keräämisen hallinta

Nykypäivän nopeatempoisessa digitaalisessa maailmassa verkkosivustojen ja -sovellusten suorituskyky on ensiarvoisen tärkeää. Käyttäjät odottavat välitöntä reagointikykyä ja saumattomia kokemuksia. Hitaat latausajat tai kankeat vuorovaikutukset voivat johtaa turhautumiseen ja lopulta sivuston hylkäämiseen. Optimaalisen suorituskyvyn varmistamiseksi kehittäjät tarvitsevat työkaluja JavaScript-koodinsa ajonaikaisen käyttäytymisen mittaamiseen, analysointiin ja parantamiseen. JavaScript Performance API tarjoaa tehokkaan ja standardoidun tavan kerätä ajoaikaisia mittareita, joiden avulla kehittäjät voivat tunnistaa suorituskyvyn pullonkauloja ja optimoida sovelluksiaan sujuvamman käyttäjäkokemuksen saavuttamiseksi.

Mikä on JavaScript Performance API?

JavaScript Performance API on kokoelma rajapintoja ja metodeja, jotka ovat saatavilla moderneissa verkkoselaimissa ja joiden avulla kehittäjät voivat päästä käsiksi ja mitata erilaista suorituskykyyn liittyvää dataa. Se tarjoaa näkemyksiä ajonaikaisen käyttäytymisen eri osa-alueisiin, mukaan lukien:

• Navigoinnin ajoitus: Mittaa sivun latauksen eri vaiheisiin kuluvaa aikaa, kuten DNS-kysely, TCP-yhteys, pyyntö- ja vastausajat.
• Resurssien ajoitus: Tarjoaa yksityiskohtaista ajoitustietoa sivun lataamista yksittäisistä resursseista, kuten kuvista, skripteistä ja tyylisivuista.
• Käyttäjän ajoitus: Mahdollistaa kehittäjien määritellä ja mitata omia, sovelluslogiikkaan liittyviä suorituskykymittareita.
• Pitkät tehtävät: Tunnistaa tehtävät, jotka estävät pääsäikeen toiminnan pitkäksi aikaa, aiheuttaen mahdollisesti käyttöliittymän jäätymistä.
• Muistin mittaus: (Saatavilla joissakin selaimissa) Tarjoaa tietoa sivun muistinkäytöstä.
• Elementin ajoitus: Tarjoaa ajoitusmittareita siitä, milloin tietyt HTML-elementit tulevat käyttäjän näkyviin.
• Tapahtuman ajoitus: Mittaa tapahtumien, kuten klikkausten, näppäinpainallusten ja muiden käyttäjävuorovaikutusten kestoa.

Hyödyntämällä näitä ominaisuuksia kehittäjät voivat saada syvällisen ymmärryksen siitä, miten heidän JavaScript-koodinsa suoriutuu todellisissa käyttöskenaarioissa, ja tunnistaa optimointikohteita.

Performance API:n keskeiset komponentit

1. performance-objekti

performance-objekti on pääasiallinen reitti Performance API:n käyttöön. Se on window-objektin ominaisuus ja tarjoaa pääsyn erilaisiin metodeihin ja ominaisuuksiin suorituskykytietojen mittaamiseksi ja analysoimiseksi. Yleisimmin käytettyjä ominaisuuksia ovat performance.timing ja performance.now().

2. performance.now()

performance.now() palauttaa korkean resoluution aikaleiman (millisekunneissa), joka edustaa dokumentin navigoinnin alkamisesta kulunutta aikaa. Se on perusta koodin suoritusajan mittaamiselle. Toisin kuin Date.now(), performance.now() on monotoninen, mikä tarkoittaa, että järjestelmän kellon säädöt eivät vaikuta siihen.

Esimerkki: Funktion suoritusajan mittaaminen

            const startTime = performance.now();
// Mitattava koodi
for (let i = 0; i < 1000000; i++) {
  // Suoritetaan jokin operaatio
}
const endTime = performance.now();
const executionTime = endTime - startTime;
console.log(`Execution time: ${executionTime} milliseconds`);

            

              
                Copy
              
            
          

3. Suorituskyvyn aikajana

Suorituskyvyn aikajana on tietue suorituskykyyn liittyvistä tapahtumista, jotka tapahtuvat sivun elinkaaren aikana. Se sisältää merkintöjä navigoinnin ajoituksesta, resurssien ajoituksesta, käyttäjän ajoituksesta ja muusta. Suorituskyvyn aikajanaan pääsee käsiksi metodeilla, kuten performance.getEntries(), performance.getEntriesByType() ja performance.getEntriesByName().

4. PerformanceEntry-rajapinta

Jokainen merkintä suorituskyvyn aikajanalla on PerformanceEntry-objekti. Tämä rajapinta tarjoaa ominaisuuksia, jotka kuvaavat suorituskykytapahtumaa, kuten sen nimen, alkamisajan, keston ja merkinnän tyypin. Eri tyyppisillä suorituskykymerkinnöillä on lisäominaisuuksia, jotka ovat ominaisia niiden tapahtumatyypille.

Ajoaikaisten mittareiden kerääminen ja analysointi

JavaScript Performance API tarjoaa useita metodeja ajoaikaisten mittareiden keräämiseen ja analysointiin. Tässä on joitakin yleisiä käyttötapauksia:

1. Sivun latausajan mittaaminen

performance.timing-objekti tarjoaa yksityiskohtaista tietoa sivun latauksen eri vaiheista. Voit käyttää tätä dataa pullonkaulojen tunnistamiseen ja latausprosessin optimointiin.

Esimerkki: DOMContentLoaded-tapahtuman ajan laskeminen

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

            

              
                Copy
              
            
          

Tulosten tulkinta: Korkea domContentLoadedEventEnd-arvo saattaa viitata siihen, että selain käyttää paljon aikaa JavaScript-koodin jäsentämiseen ja suorittamiseen, DOM:n renderöintiin tai resurssien latautumisen odottamiseen. Yksittäisten resurssien ajoitusten analysointi (katso alla) voi auttaa paikantamaan tietyt resurssit, jotka aiheuttavat viiveitä.

Optimointistrategiat: Mahdollisia ratkaisuja ovat ei-kriittisen JavaScriptin suorituksen lykkääminen, CSS:n toimituksen optimointi ja DOM-elementtien määrän minimoiminen.

2. Resurssien latausaikojen mittaaminen

Resource Timing API tarjoaa yksityiskohtaista ajoitustietoa jokaisesta sivun lataamasta resurssista. Tämän avulla voit tunnistaa hitaasti latautuvat resurssit ja optimoida niiden toimitusta.

Esimerkki: Resurssien ajoitustietojen hakeminen

            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
              
            
          

Tulosten tulkinta: Jokaisen resurssimerkinnän duration-ominaisuuden tarkastelu voi auttaa tunnistamaan hitaasti latautuvat resurssit. Korkea duration-arvo saattaa viitata verkon viiveeseen, suuriin tiedostokokoihin tai tehottomaan palvelinpuolen käsittelyyn.

Optimointistrategiat: Mahdollisia ratkaisuja ovat kuvien pakkaaminen, JavaScript- ja CSS-tiedostojen pienentäminen, sisällönjakeluverkon (CDN) käyttö ja palvelinpuolen välimuistin optimointi.

Globaali esimerkki: Verkkosivusto, joka tarjoaa korkearesoluutioisia kuvia käyttäjille alueilla, joilla on rajallinen kaistanleveys (esim. osissa Kaakkois-Aasiaa, Afrikkaa), voi kokea huomattavasti hitaampia latausaikoja näille käyttäjille. Responsiivisten kuvien käyttöönotto, jotka mukautuvat käyttäjän yhteysnopeuteen ja näytön kokoon, voi parantaa suorituskykyä merkittävästi.

3. Käyttäjävuorovaikutusten mittaaminen

User Timing API:n avulla voit määritellä ja mitata omia, sovelluslogiikkaan liittyviä suorituskykymittareita. Tämä on hyödyllistä kriittisten käyttäjävuorovaikutusten, kuten lomakkeiden lähettämisen, hakukyselyiden ja navigointisiirtymien, suorituskyvyn seuraamisessa.

Esimerkki: Lomakkeen lähettämiseen kuluvan ajan mittaaminen

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

form.addEventListener('submit', (event) => {
  performance.mark('formSubmitStart');
  // Simuloidaan lomakkeen lähetyksen viivettä
  setTimeout(() => {
    performance.mark('formSubmitEnd');
    performance.measure('formSubmitDuration', 'formSubmitStart', 'formSubmitEnd');

    const measure = performance.getEntriesByName('formSubmitDuration')[0];
    console.log(`Form submission duration: ${measure.duration} milliseconds`);
  }, 1000); //Simuloidaan 1 sekunnin kestävää verkkopyyntöä

  event.preventDefault();
});

            

              
                Copy
              
            
          

Tulosten tulkinta: Korkea formSubmitDuration-arvo saattaa viitata hitaaseen palvelinpuolen käsittelyyn, verkon viiveeseen tai tehottomaan asiakaspuolen validointiin.

Optimointistrategiat: Mahdollisia ratkaisuja ovat palvelinpuolen koodin optimointi, verkkopyyntöjen vähentäminen ja asiakaspuolen validoinnin parantaminen.

4. Pitkien tehtävien tunnistaminen

Pitkät tehtävät ovat tehtäviä, jotka estävät pääsäikeen toiminnan pitkäksi aikaa (tyypillisesti yli 50 millisekuntia), aiheuttaen mahdollisesti käyttöliittymän jäätymistä ja huonon käyttäjäkokemuksen. Long Tasks API:n avulla voit tunnistaa nämä tehtävät ja optimoida koodisi niiden estämiseksi.

Esimerkki: Pitkien tehtävien tunnistaminen

            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'] });

// Simuloidaan pitkää tehtävää
setTimeout(() => {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  console.log(`Long task complete: ${sum}`);
}, 0);

            

              
                Copy
              
            
          

Tulosten tulkinta: Pitkän tehtävän kesto korostaa koodia, joka estää selainta päivittämästä käyttöliittymää sujuvasti.

Optimointistrategiat: Koodin jakaminen (code splitting), debouncing, throttling ja tehtävien siirtäminen web workereille ovat strategioita pitkien tehtävien keston lyhentämiseksi.

5. Elementtien näkyvyyden mittaaminen

Element Timing API:n avulla voit mitata, milloin tietyt HTML-elementit tulevat käyttäjän näkyviin. Tämä on erityisen hyödyllistä kriittisten elementtien, kuten "hero"-kuvien tai tärkeiden sisältöosioiden, lataus- ja renderöintisuorituskyvyn seuraamisessa.

Esimerkki: Elementin näkyvyysajan mittaaminen

            <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
              
            
          

Tulosten tulkinta: Myöhäinen renderStart-arvo osoittaa, että elementin näkyviin tuleminen kestää kauan, mahdollisesti hitaiden lataus- tai renderöintiprosessien vuoksi.

Optimointistrategiat: Optimoi kuvien pakkaus, käytä viivästettyä latausta (lazy loading) ja priorisoi kriittisten resurssien lataamista.

6. Tapahtumaviiveen mittaaminen

Event Timing API mittaa ajan, joka kuluu tapahtumankäsittelijöiden (event listeners) suorittamiseen. Tämä on arvokasta sellaisten tapahtumankäsittelijöiden tunnistamisessa, jotka saattavat hidastaa käyttäjävuorovaikutuksia.

Esimerkki: Klikkaustapahtuman viiveen mittaaminen

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

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

button.addEventListener('click', (event) => {
  performance.mark('clickStart');
  // Simuloidaan käsittelyä
  for (let i = 0; i < 1000000; i++) {
    // Suoritetaan jokin operaatio
  }
  performance.mark('clickEnd');
  performance.measure('clickDuration', 'clickStart', 'clickEnd');

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

            

              
                Copy
              
            
          

Tulosten tulkinta: Pitkä clickDuration osoittaa, että tapahtumankäsittelijän suorittaminen kestää liian kauan, mikä saattaa aiheuttaa viiveen käyttöliittymän vastauksessa.

Optimointistrategiat: Optimoi tapahtumankäsittelijän koodia, käytä debouncing- tai throttling-tekniikoita tapahtumankäsittelijöissä ja siirrä raskas prosessointi web workereille.

Parhaat käytännöt Performance API:n käyttöön

• Käytä performance.now()-metodia tarkkoihin aikamittauksiin. Se tarjoaa suuremman tarkkuuden ja on monotoninen, mikä tekee siitä ihanteellisen koodin suoritusajan mittaamiseen.
• Hyödynnä suorituskyvyn aikajanaa suorituskykytapahtumien analysointiin. Suorituskyvyn aikajana tarjoaa kattavan tietueen suorituskykyyn liittyvistä tapahtumista, jotka tapahtuvat sivun elinkaaren aikana.
• Käytä User Timing API:a omien suorituskykymittareiden määrittelyyn. Tämä mahdollistaa kriittisten käyttäjävuorovaikutusten ja sovelluskohtaisen logiikan suorituskyvyn seuraamisen.
• Seuraa suorituskykyä todellisissa käyttöympäristöissä. Käytä työkaluja, kuten Google Analytics, New Relic tai Sentry, kerätäksesi suorituskykytietoja todellisilta käyttäjiltä. Tämä antaa sinulle tarkemman kuvan sovelluksesi suorituskyvystä.
• Aseta suorituskykybudjetteja ja seuraa edistymistä ajan myötä. Määrittele suorituskykytavoitteet sovelluksellesi ja seuraa edistymistäsi ajan kuluessa. Tämä auttaa sinua keskittymään suorituskyvyn optimointiin ja varmistamaan, että sovelluksesi täyttää käyttäjien odotukset.
• Yhdistä Performance API muihin virheenkorjaustyökaluihin. Selaimen kehittäjätyökalut tarjoavat tehokkaita ominaisuuksia JavaScript-koodin profilointiin ja virheenkorjaukseen. Näiden työkalujen yhdistäminen Performance API:n kanssa voi tarjota vielä syvällisempiä näkemyksiä suorituskyvyn pullonkauloista.

Työkalut ja kirjastot suorituskyvyn seurantaan

Vaikka Performance API tarjoaa raakadataa, useat työkalut ja kirjastot voivat auttaa sinua analysoimaan ja visualisoimaan tätä dataa tehokkaammin:

• Google Lighthouse: Automaattinen työkalu verkkosivuston suorituskyvyn, saavutettavuuden ja SEO:n tarkastamiseen. Se käyttää Performance API:a mittareiden keräämiseen ja tarjoaa käytännönläheisiä suosituksia parannuksiksi.
• WebPageTest: Ilmainen verkkosivuston nopeustestityökalu, jonka avulla voit testata sivustosi suorituskykyä eri sijainneista ja selaimista.
• New Relic Browser: Kattava suorituskyvyn seurantatyökalu, joka tarjoaa reaaliaikaisia näkemyksiä verkkosivuston suorituskyvystä, mukaan lukien sivun latausajat, JavaScript-virheet ja käyttäjäkokemusmittarit.
• Sentry: Virheenseuranta- ja suorituskyvyn seurantaympäristö, joka auttaa sinua tunnistamaan ja ratkaisemaan ongelmia JavaScript-koodissasi.
• Perfume.js: Pieni, avoimen lähdekoodin kirjasto, joka tarjoaa yksinkertaisen API:n suorituskykymittareiden keräämiseen ja raportointiin.

Yhteenveto

JavaScript Performance API on korvaamaton työkalu jokaiselle web-kehittäjälle, joka haluaa rakentaa korkean suorituskyvyn verkkosovelluksia. Hyödyntämällä Performance API:n ominaisuuksia voit saada syvällisen ymmärryksen sovelluksesi ajonaikaisesta käyttäytymisestä, tunnistaa suorituskyvyn pullonkauloja ja optimoida koodisi sujuvampaa käyttäjäkokemusta varten. Näiden suorituskyvyn seurantatekniikoiden käyttöönotto ja koodin jatkuva iterointi johtavat nopeampiin ja reagoivampiin verkkosivustoihin ja -sovelluksiin, jotka ilahduttavat käyttäjiä maailmanlaajuisesti. Muista ottaa huomioon erilaiset verkkoyhteysolosuhteet ja laitteiden ominaisuudet optimoidessasi verkkosovelluksesi suorituskykyä varmistaaksesi johdonmukaisen käyttäjäkokemuksen kaikille.