JavaScript Performance API: Mestre innsamling av kjøretidsmetrikker

I dagens hektiske digitale verden er ytelsen til nettsteder og webapplikasjoner avgjørende. Brukere forventer umiddelbar respons og sømløse opplevelser. Lange lastetider eller trege interaksjoner kan føre til frustrasjon og til syvende og sist at brukeren forlater siden. For å sikre optimal ytelse, trenger utviklere verktøy for å måle, analysere og forbedre kjøretidsatferden til JavaScript-koden sin. JavaScript Performance API gir en kraftig og standardisert måte å samle inn kjøretidsmetrikker på, noe som gjør det mulig for utviklere å identifisere ytelsesflaskehalser og optimalisere applikasjonene sine for en jevnere brukeropplevelse.

Hva er JavaScript Performance API?

JavaScript Performance API er en samling grensesnitt og metoder tilgjengelig i moderne nettlesere som lar utviklere få tilgang til og måle ulike ytelsesrelaterte data. Det gir innsikt i forskjellige aspekter av kjøretidsatferd, inkludert:

• Navigasjonstiming: Måler tiden det tar for ulike stadier av sideinnlasting, som DNS-oppslag, TCP-tilkobling, samt forespørsels- og responstider.
• Ressurstidfesting: Gir detaljert timinginformasjon for individuelle ressurser lastet av siden, som bilder, skript og stilark.
• Brukertiming: Lar utviklere definere og måle egendefinerte ytelsesmetrikker som er spesifikke for applikasjonens logikk.
• Lange oppgaver: Identifiserer oppgaver som blokkerer hovedtråden i en lengre periode, noe som potensielt kan forårsake at brukergrensesnittet fryser.
• Minnebruk: (Tilgjengelig i noen nettlesere) Gir informasjon om sidens minnebruk.
• Elementtiming: Gir timingmetrikker for når spesifikke HTML-elementer blir synlige for brukeren.
• Hendelsestiming: Måler varigheten av hendelser, som klikk, tastetrykk og andre brukerinteraksjoner.

Ved å utnytte disse mulighetene kan utviklere få en dyp forståelse av hvordan JavaScript-koden deres presterer i reelle scenarier og identifisere områder for optimalisering.

Nøkkelkomponenter i Performance API

1. performance-objektet

performance-objektet er hovedinngangspunktet for å få tilgang til Performance API. Det er en egenskap ved window-objektet og gir tilgang til ulike metoder og egenskaper for å måle og analysere ytelsesdata. De mest brukte egenskapene er performance.timing og performance.now().

2. performance.now()

performance.now() returnerer et høyoppløselig tidsstempel (i millisekunder) som representerer tiden som har gått siden dokumentets navigasjonsstart. Det er grunnlaget for å måle varigheten av kodekjøring. I motsetning til Date.now(), er performance.now() monoton, noe som betyr at den ikke påvirkes av justeringer i systemklokken.

Eksempel: Måle kjøretiden til en funksjon

            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. Ytelsestidslinjen

Ytelsestidslinjen er en logg over ytelsesrelaterte hendelser som oppstår i løpet av en sides levetid. Den inkluderer oppføringer for navigasjonstiming, ressurstidfesting, brukertiming og mer. Ytelsestidslinjen kan nås ved hjelp av metoder som performance.getEntries(), performance.getEntriesByType() og performance.getEntriesByName().

4. PerformanceEntry-grensesnittet

Hver oppføring i ytelsestidslinjen er representert av et PerformanceEntry-objekt. Dette grensesnittet gir egenskaper som beskriver ytelseshendelsen, som navn, starttid, varighet og oppføringstype. Ulike typer ytelsesoppføringer har tilleggsegenskaper som er spesifikke for deres hendelsestype.

Innsamling og analyse av kjøretidsmetrikker

JavaScript Performance API tilbyr en rekke metoder for å samle inn og analysere kjøretidsmetrikker. Her er noen vanlige bruksområder:

1. Måle sidens lastetid

performance.timing-objektet gir detaljert informasjon om de ulike stadiene av sideinnlasting. Du kan bruke disse dataene til å identifisere flaskehalser og optimalisere lasteprosessen.

Eksempel: Beregne tiden for DOMContentLoaded-hendelsen

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

            

              
                Copy
              
            
          

Tolking av resultatene: En høy domContentLoadedEventEnd-verdi kan indikere at nettleseren bruker mye tid på å parse og kjøre JavaScript-kode, rendre DOM, eller vente på at ressurser skal lastes. Å analysere de individuelle ressurstidfestingene (se nedenfor) kan hjelpe med å finne de spesifikke ressursene som forårsaker forsinkelser.

Optimaliseringsstrategier: Mulige løsninger inkluderer å utsette kjøring av ikke-kritisk JavaScript, optimalisere levering av CSS og minimere antall DOM-elementer.

2. Måle lastetider for ressurser

Resource Timing API gir detaljert timinginformasjon for hver ressurs som lastes av siden. Dette lar deg identifisere ressurser som laster sakte og optimalisere leveringen av dem.

Eksempel: Hente informasjon om ressurstidfesting

            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
              
            
          

Tolking av resultatene: Ved å undersøke duration-egenskapen for hver ressursoppføring kan man identifisere ressurser som laster sakte. En høy duration kan indikere nettverksforsinkelse, store filstørrelser eller ineffektiv server-side prosessering.

Optimaliseringsstrategier: Potensielle løsninger inkluderer komprimering av bilder, minifisering av JavaScript- og CSS-filer, bruk av et Content Delivery Network (CDN) og optimalisering av server-side caching.

Globalt eksempel: Et nettsted som serverer høyoppløselige bilder til brukere i regioner med begrenset båndbredde (f.eks. deler av Sørøst-Asia, Afrika) kan oppleve betydelig tregere lastetider for disse brukerne. Implementering av responsive bilder som tilpasser seg brukerens tilkoblingshastighet og skjermstørrelse kan forbedre ytelsen betraktelig.

3. Måle brukerinteraksjoner

User Timing API lar deg definere og måle egendefinerte ytelsesmetrikker som er spesifikke for applikasjonens logikk. Dette er nyttig for å spore ytelsen til kritiske brukerinteraksjoner, som skjemainnsendinger, søk og navigasjonsoverganger.

Eksempel: Måle tiden det tar å sende inn et skjema

            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
              
            
          

Tolking av resultatene: En høy formSubmitDuration kan indikere treg server-side prosessering, nettverksforsinkelse eller ineffektiv klient-side validering.

Optimaliseringsstrategier: Potensielle løsninger inkluderer optimalisering av server-side kode, reduksjon av nettverksforespørsler og forbedring av klient-side validering.

4. Identifisere lange oppgaver

Lange oppgaver er oppgaver som blokkerer hovedtråden i en lengre periode (vanligvis lenger enn 50 millisekunder), noe som potensielt kan føre til at brukergrensesnittet fryser og gir en dårlig brukeropplevelse. Long Tasks API lar deg identifisere disse oppgavene og optimalisere koden din for å forhindre dem.

Eksempel: Identifisere lange oppgaver

            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
              
            
          

Tolking av resultatene: En lang varighet på en oppgave fremhever kode som hindrer nettleseren i å oppdatere brukergrensesnittet jevnt.

Optimaliseringsstrategier: Kodesplitting, debouncing, throttling og å flytte oppgaver til web workers er strategier for å redusere varigheten på lange oppgaver.

5. Måle elementsynlighet

Element Timing API lar deg måle når spesifikke HTML-elementer blir synlige for brukeren. Dette er spesielt nyttig for å spore laste- og rendringsytelsen til kritiske elementer, som forsidebilder eller viktige innholdsseksjoner.

Eksempel: Måle tid for elementsynlighet

            <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
              
            
          

Tolking av resultatene: En sen renderStart-verdi indikerer at det tar lang tid før elementet blir synlig, potensielt på grunn av trege laste- eller rendringsprosesser.

Optimaliseringsstrategier: Optimaliser bildekomprimering, bruk "lazy loading" (utsatt innlasting), og prioriter lasting av kritiske ressurser.

6. Måle hendelsesforsinkelse

Event Timing API måler tiden det tar for hendelseslyttere å kjøre. Dette er verdifullt for å identifisere hendelseshåndterere som kan bremse ned brukerinteraksjoner.

Eksempel: Måle forsinkelse på klikkhendelser

            <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
              
            
          

Tolking av resultatene: En lang clickDuration indikerer at hendelseshåndtereren bruker for lang tid på å kjøre, noe som potensielt forårsaker en forsinkelse i responsen fra brukergrensesnittet.

Optimaliseringsstrategier: Optimaliser koden i hendelseshåndtereren, bruk "debounce" eller "throttle" på hendelseslyttere, og flytt tung prosessering til web workers.

Beste praksis for bruk av Performance API

• Bruk performance.now() for nøyaktige tidsmålinger. Den gir høyere presisjon og er monoton, noe som gjør den ideell for å måle kodekjøringstid.
• Utnytt ytelsestidslinjen for å analysere ytelseshendelser. Ytelsestidslinjen gir en omfattende logg over ytelsesrelaterte hendelser som oppstår i løpet av en sides levetid.
• Bruk User Timing API for å definere egendefinerte ytelsesmetrikker. Dette lar deg spore ytelsen til kritiske brukerinteraksjoner og applikasjonsspesifikk logikk.
• Overvåk ytelse i reelle miljøer. Bruk verktøy som Google Analytics, New Relic eller Sentry for å samle inn ytelsesdata fra faktiske brukere. Dette vil gi deg et mer nøyaktig bilde av applikasjonens ytelse.
• Sett ytelsesbudsjetter og følg fremgangen over tid. Definer ytelsesmål for applikasjonen din og spor fremgangen over tid. Dette vil hjelpe deg med å holde fokus på å optimalisere ytelsen og sikre at applikasjonen din oppfyller brukernes forventninger.
• Kombiner Performance API med andre feilsøkingsverktøy. Nettleserens utviklerverktøy tilbyr kraftige funksjoner for profilering og feilsøking av JavaScript-kode. Å kombinere disse verktøyene med Performance API kan gi enda dypere innsikt i ytelsesflaskehalser.

Verktøy og biblioteker for ytelsesovervåking

Mens Performance API gir rådataene, kan flere verktøy og biblioteker hjelpe deg med å analysere og visualisere disse dataene mer effektivt:

• Google Lighthouse: Et automatisert verktøy for å revidere nettstedets ytelse, tilgjengelighet og SEO. Det bruker Performance API til å samle metrikker og gir handlingsrettede anbefalinger for forbedring.
• WebPageTest: Et gratis verktøy for testing av nettstedshastighet som lar deg teste nettstedets ytelse fra forskjellige steder og nettlesere.
• New Relic Browser: Et omfattende verktøy for ytelsesovervåking som gir sanntidsinnsikt i nettstedets ytelse, inkludert lastetider, JavaScript-feil og brukeropplevelsesmetrikker.
• Sentry: En plattform for feilsporing og ytelsesovervåking som hjelper deg med å identifisere og løse problemer i JavaScript-koden din.
• Perfume.js: Et lite, åpen kildekode-bibliotek som gir et enkelt API for å samle inn og rapportere ytelsesmetrikker.

Konklusjon

JavaScript Performance API er et uunnværlig verktøy for enhver webutvikler som ønsker å bygge høytytende webapplikasjoner. Ved å utnytte mulighetene i Performance API kan du få en dyp forståelse av applikasjonens kjøretidsatferd, identifisere ytelsesflaskehalser og optimalisere koden din for en jevnere brukeropplevelse. Å implementere disse teknikkene for ytelsesovervåking og kontinuerlig forbedre koden din vil resultere i raskere, mer responsive nettsteder og webapper som gleder brukere over hele verden. Husk å ta hensyn til ulike nettverksforhold og enhetskapasiteter når du optimaliserer webapplikasjonens ytelse for å sikre en konsistent brukeropplevelse for alle.